Detail screen design

In this learning content we will create a screen design that shows the details of a registered idea.

Let's examine the screen design we aim to design at the end of the learning content.

When we look at the Header design, similar to the Header we prepared on the Dashboard screen before, there is a notification icon where you can open the application logo and notification screen.

Under the header, there is an area that lists the idea details and comments on the idea. The details of the idea and comments are shown in the Tab element.

At the bottom is the Tab Bar Menu we created before.

We have examined the general outlines of the idea detail screen. Now let's design this screen together.

1. Create a new screen called SuggestionDetail via the Screens panel.

We can use the Header design that we previously used on the Dashboard screen by copying it on the detail screen. Let's do the necessary operations on the detail screen before copying.

2. Drag and drop a Header element on the screen.
3. Change the background color of the Header.
4. Open the Dashboard screen. Select the Row in the Header and copy it via the detail menu.
5. Open the detail screen again.
6. Select the header and paste it via the detail menu.

Now let's proceed by preparing the detailed structure of the idea.

7. Drag and drop a Row on the screen.
8. To present the idea detail, we can use the structure in the GalleryView in the Dashboard.
9. Open the Dashboard screen.
10. Select the Row in GalleryView and copy it.
11. Open the Detail screen.
12. Select the Row you dragged and dropped on the screen and paste it via the Detail menu.
13. Delete the empty Row on the screen.
14.  Drag and drop a Tab element to the bottom of the column in the pasted Row.
15. Select the column with the Tab element and remove the default Padding style and select None.
16. Select the Tab element and delete the third Tab element.
17. Update the titles of the Tab elements and the title color of the selected tab.
18. Add a Row inside the Tab element titled Details and convert it to a single column.
19. Select the column and remove the default Column style and add none style.
20. Add a Vertical Stack inside the column.
21. Drag and drop a Label into the Vertical Stack.
22. Update the content of the Label and add the H3 style.
23. Duplicate the Label.
24. Update the content of the underlying Label.
25. Remove the Text styles and add the H6 style.

The content of the Details tab is ready. Now let's continue by preparing the content of the Comments tab.

26. Insert a Row inside the Tab item titled Comments and convert it to a single column.
27. Remove the default Layout styles from the Row and Column and add the None style.
28. Drag and drop a Table into the column.
29. Hide the Table Header.
30. In Table, remove the default Table style and select none.
31. Select TableRow and remove the Border style and select BorderBottom.
32. Drag and drop a Row into TableRow and convert it into two columns.
33. Remove the Row style from the Row and add the None style.
34. Add a Label element in the first column and update the text.
35. Update the text style of the Label to H6. 
36. Perform alignment operations in the column.
37. Copy the Label and paste it into the column on the right.
38. Update the content.
39. Align the parent column.
40.  Drag and drop another Row into the TableRow and convert it to a single column.
41. Remove the Row style from the Row and add the None style.
42. Add a Label inside the column and update its content.

Let's continue by adding our Tabbar design, the last structure to complete the design of the screen. 

43. Copy the Tab Bar menu we prepared on the Dashboard screen here.
44. Drag a Footer to the screen.
45. Open the Dashboard screen.
46. Copy the Tab Bar menu design with the placeholder Row.
47. Return to the detail screen.
48. Select and paste the Footer.
49. Perform the icon color editing.

Here is your Detail screen design ready for your mobile application. You can prepare and use detail screens with similar structure.