Working with the tiles layout

Hire an Expert Ask the Community Watch & Learn
Search…
The Tiles Layout is a highly customizable and versatile style that enables us to add multiple configurations to our lists. 
Data
Similar to the other styles, the Tiles Layout has properties that we can connect with the columns in our database. Once we have selected the Tiles Layout, we can determine which columns to display as a Title, Details, and Image. 
Data
Options
If some or all of your list items don't have images, you can choose whether you want to show a title instead.
Options
Design
Image is
We can choose whether to display an image or a map in our Tiles layout. If we select 'Image URL', then the property Image in the Data section needs to be connected to a column that contains an image link. 
On the other hand, if we select 'Image' as Map from address, then the property Image in the Data section needs to be connected to a column that contains an address or co-ordinates. 
Tile shape
Tile shape enables us to modify the shape of our Tiles. We can choose from a broad selection of shapes, from a square to a circle or various rectangular options.
Tiles per row
With Tiles per row, we have the ability to choose how many tiles we want to display in each row, either 1, 2, 3, or 4.
Tiles per row
Padding
Padding refers to the space around your images. There are two padding options. Loose or tight. 
Loose padding (left) tight padding (right)
Corners
In the image above, we can perceive that the corners are slightly rounded. At times, rounded corners may fit our design. However, there are occasions when rounded corners may not be the best choice. For instance, tight padding and rounded corners do not go together. Therefore we can select Sharp Corners to make our design look more elegant.
Corners
Text Style
Overlay position
We can place the Title and Details properties beneath or within our tiles, by choosing Below or Overlay in the Text Style settings. 
Text alignment
Suppose we select Overlay as the setting for Position. In that case, a new section will appear called Alignment, enabling us to choose where in the image we place our text. 
Text size 
We can select  three different sizes for our text, small, medium, or large and we can also toggle whether the title is All-Caps or not. 
Text Style 
Text wrapping
When we choose Below as the setting for our text Position, a new toggle will appear called Allow text wrapping. We may want to enable this if we have chosen a lengthy text that is being cut. 
Text wrapping 
Action
At the very bottom of the right side panel is the Action section. By default, all Lists have the action Show Detail Screen enabled. This means that when we tap on a list item we will be redirected to that item's Details Screen.
However, we can disable this action and prevent your list items from doing this, or simply select another action from the list. 
Inline lists & horizontal scrolling
We can use the Tiles layout with Inline lists and the List relation. If we use the layout with Inline lists, you gain access to an extra feature - horizontal scrolling. 
The app below shows three inline lists with horizontal scrolling applied. 
Horizontal scrolling 
To apply horizontal scrolling to your Inline list, click on the component in the right sidebar, set the layout to 'Tiles', and then toggle the Orientation setting to 'Horizontal'. 
Set up Horizontal scrolling
Only Show a Few Items
In the Tiles layout, we have the option to limit how many items are displayed in our app. In addition to this, we can choose when to display the "Show all" button. When we click "Show all" the app will redirect us to a list that will display all our items. 
If you select both, Limit number of items and Show "See all" for more than, when you click on "See all", Glide will limit the number of items displayed based on your choice. You can set only Show "See all" for more than to avoid this.
This option works for both vertical and horizontal layouts. 
Overlays
The tiles layout also allows you to add overlays to add a richer and more detailed view for each tile. Read more about overlays here 👇
Overlays