Listing screen design

In this content, we will learn how to create a listing screen design where generated ideas are brought together and can be filtered.

Let's take a look at the list screen we designed. At the top of the screen, there is a Label showing the name of the screen, an icon that provides access to filtering options, and a header that makes it possible to view notifications. Just below this header, in a similar structure to the Dashboard screen, there is a list of ideas created by the user.

Let's start preparing this screen design together.

1. Create a new screen called Suggestion List using the Screens panel.
2. Drag and drop a Header element onto the screen. 
3. Change the background color of the Header with Background selection.
4. Drag and drop a Row into the Header and turn it into two columns.
5. Drag and drop an Image element into the left column.
6. Add a temporary image to the Image element.
7. Then choose the Image32 style and select Radius from the Border field.
8. Select the column with the Image element and align it.
9. Add a Horizontal Stack in the column on the right.
10. Drag two icons into the Horizontal Stack and select them.
11. Select the Horizontal Stack and center it vertically.
12. Select the Horizontal Stack's parent column and right align it horizontally and center it vertically.

Now let's design the structure that will provide the listing function.

13. Drag and drop a Row on the screen and convert it to a single column. Remove the padding style on the column and select none.
14. Open the Dashboard screen.
15. Copy GalleryView.
16. Go back to the Suggestion List screen and paste it into the column.

Let's continue by copying the Tab Bar menu we prepared before to this screen.

17. Drag a Footer to the screen.
18. Open the Dashboard screen.
19. Copy the Tabbar menu design with placeholder Row.
20. Return to the list screen.
21. Select and paste the Footer.
22. Perform the icon color editing.

Your list screen for the mobile application is ready.