Android Programming with Kotlin for Beginners
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Making the layout look pretty

In this section, we will explore some more attributes that control the finer details of our UI. You have probably noticed how the UI looks a bit squashed in some places, and wonky and unsymmetrical in others. As we progress through the book, we will continually add to our repertoire to improve our layouts, but these short steps will introduce and take care of some of the basics:

  1. Select the Multiline Text, and then expand the Padding attribute. Set the all option to 15sp. This has made a neat area of space around the outside of the text.
  2. To make a nice space below the Multiline text, find and expand the Layout_Margin attribute and set bottom to 100sp.
  3. On both TextView widgets that are aligned/related to the buttons, set the textSize attribute to 20sp, the layout_gravity to center_vertical, the layout_width to match_parent, and the layout_weight to .7.
  4. On both buttons, set the weight to .3. Notice how both buttons now take up exactly .3 of the width and the text .7 of the LinearLayout, making the whole appearance more pleasing.
  5. On the RatingBar, find the Layout_Margin attribute, and then set left and right to 15sp.
  6. Still with the RatingBar and the Layout_Margin attribute, change top to 75sp.

You can now run the app and see our first full layout in all its glory:

Notice that you can play with the RatingBar, although the rating won't persist when the app is turned off.

Tip

By way of a reader challenge, find an attribute or two that could further improve the appearance of the LoadConstraintLayout and LoadTableLayout text. They look a little bit close to the edges of the screen. Refer to the section Attributes – a quick summary at the start of Chapter 5, Beautiful Layouts with CardView and ScrollView.

Unfortunately, the buttons don't do anything yet. Let's fix that.

上一章目录下一章