Adding layouts within layouts

The solution to laying out some elements with a different orientation to others is to nest layouts within layouts. Here is how to do it.

From the Layouts category of the palette, drag a LinearLayout (Horizontal) onto our design, placing it just below the Multiline Text. Notice that there is a blue border occupying all the space below the Multiline Text:

Adding layouts within layouts

This indicates that our new LinearLayout (Horizontal) is filling the space. Keep this blue border area in mind as it is where we will put the next item on our UI.

Now go back to the Text category of the palette and drag a TextView onto the new LinearLayout we just added. Notice how the TextView sits snuggly in the top left-hand corner of the new LinearLayout:

Adding layouts within layouts

This at first seems no different to what happened with the previous vertical LinearLayout, which was part of our UI from the start. But watch what happens when we add our next piece of the UI.

Note

The term used to refer to adding layouts within layouts is nesting. The Android term applied to any item that appears on the UI (buttons, text, for example) is view, and anything that contains views is a view group. As the terms view and view group do not always make their meanings clear in certain contexts, I will usually refer to parts of the UI either specifically (such as TextView, Button, and LinearLayout) or more broadly (UI element, item, or widget).

From the Button category, drag a Button onto the right-hand side of the previous TextView. Notice that the button sits to the right of the text, as shown in the following screenshot:

Adding layouts within layouts

Next, select the LinearLayout (the horizontal one) by clicking on an empty part of it. Find the layout_height attribute and set it to wrap_content. Observe that the LinearLayout is now taking up only as much space as it needs:

Adding layouts within layouts

Let's configure the text attribute of the TextView and the Button before we add the next part of the UI. Change the text attribute of the Button to LOAD. Change the text attribute of our new TextView to Load ConstraintLayout.

Tip

Did that work? Yes, excellent. You are now familiar with editing attributes of Android Views. No? Left-click the item you want to edit (in this case, the TextView), search using the search icon or scroll to find the attribute you want to edit in the Attributes window (in this case, the text attribute), select the attribute, and press Enter to edit it. I can now give more succinct instructions on how to build future UI projects, and this makes your journey to becoming an Android ninja much quicker.

Now we can repeat ourselves and add another TextView and Button within another LinearLayout (Horizontal) just below the one we have just finished. To do so, follow these steps in order:

  1. Add another LinearLayout (Horizontal) just below the previous one
  2. Add a TextView to the new LinearLayout
  3. Change the text attribute of the TextView to Load TableLayout
  4. Add a Button on the right-hand side of the TextView
  5. Change text attribute of the Button to LOAD
  6. Resize the LinearLayout by changing the layout_height attribute to wrap_content

Now we have two neatly (and horizontally) aligned texts and buttons.

Just for fun, and for the sake of exploring the palette a bit more, find the Widgets category of the palette and drag a RatingBar onto the design just below the final LinearLayout. Now, your UI should look very similar to this next screenshot:

Adding layouts within layouts

Note

In the previous two screenshots, I hadn't yet changed the text attribute of the two Button elements. Everything else should be the same as yours.

Let's add some visual finishing touches to the layout.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.139.104.214