Two buttons next to each other

I want to achieve something like this image. The two images are supposed to be buttons, that will show a new screen. Is it possible to achieve this in glide?

yes… use CSS and position images the way you want… as long you are using Apps not Pages :wink:

The easiest method would be to create a table with two rows and the necessary columns to hold the image text. Then add a Tiles or Cards inline list configured to show both items side by side, and change the source to be this table. Finally create a custom action that performs a different function depending on which item you click on. That’s the basics of it.

I’m just guessing at what you may already have and what you may want. I assume you have a table of Games and a table of Teams. I will assume that you have an array of each Team playing in a game. This array can be used to create a relation to the Teams table. The relation can be the source of your inline list, and clicking on each team would take you to the team details screen.

6 Likes

or you can create something cool… substituting buttons images and modal windows :wink:

Screen Shot 2022-10-27 at 2.40.58 PM

I have tried this method, but I seem to be stuck.
I have a calendar, with different games. I have a home team image column and a away team image column under every row in this calendar list.
When I click on the Calendar row, I want to show a screen that looks like the image.
I can’t seem to make this work. If I make the Card list to home team, it shows the home team image on both images. Obviously.
What am I misunderstanding or missing?
Bonus info: I have a table with all the different team names and their images.

Ok, that shouldn’t be a problem. Instead of storing images in your calendar table, I would store the team name or a team ID if you have one. So you should have one column that contains the home team name/ID, and another column that contains the away team name/ID.

Next create a Make Array column that joins those two team columns together to create an array of both teams.

Using that array, create a multiple relation linking the array column in your calendar table, to the team Name/ID column in your teams table. This relation will be the source of your cards or tiles list on the next screen.

Now I do see one potential issue. I’m guessing that you always want the home team to show on the left and the away team to show on the right. That’s tricky because the cards will most likely sort by row order in the teams table or alphabetically. It’s definitely possible, but might be a lot more work, so I’m wondering how important it is…of the two teams…which team is shown on the left and which is shown on the right. I have some ideas, but I’m also open to ideas from others if they have other thoughts.

2 Likes

This works great. However, how can I make the text centered? And also the title text cuts out some of the names. But the detail text is too small. What is the best solution here?
Screenshot 2022-10-28 at 21.07.20

Your best bet is to play around with the settings. Try a Tiles layout vs the Cards layout. Try using different content settings for overlay settings. Try different text styles. You can try a lot of different things to get it to look nice. I personally like using the cards layout because it’s the most flexible.

These are some options with the Cards layout.
image

These are some options with the Tiles layout.
image

Neither are probably probably exactly what you want, so you would probably have to start learning how to apply CSS to modify the layouts a little bit.

Keep in mind that many phones have screens which are a little bit wider than what you see in the emulator, so text that appears cut off may not be in the published version.

3 Likes

Use Tiles, with::

Tile Shape “Circle”
Tiles per Row 2
Text Size medium

and the text will be centered.

Then configure the Action you want when the image/button is pressed.

2 Likes