Layouts and Material

Design
Material Design
• The objective of material design is, quite simply, to achieve beautiful
user interfaces.
• Material design uses the concept of layers of materials that you can
think of in the same way you would think of layers in a photo-editing
app.
Layouts
• We have already seen ConstraintLayout, but there are more. Layouts
are the building blocks that group together the other UI
elements/widgets.
• We have already seen that, once we have designed a layout, we can
put it into action using the setContentView function in our Kotlin
code.
Creating the Exploring Layouts project
• The Exploring Layouts project is the first app of this type. We will
learn how to build multiple types of layout while linking them all
together in one handy app:
Creating the Exploring Layouts project
1. Create a new project in Android Studio. If you already have a
project open, select File | New Project. When prompted, choose
Open in same window, as we do not need to refer to our previous
project.
2. Select the Empty Activity project template, as we will build most of
the UI from scratch. Click the Next button.
3. Enter Exploring Layouts for the name of the project.
4. All the rest of the settings are the same as we have used for the
previous three projects.
5. Click the Finish button.
Creating the Exploring Layouts project
• Look at the MainActivity.kt file. Here is the entirety of the code,
excluding the import… statements

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
Creating the Exploring Layouts project
• Locate the call to setContentView and delete the entire line.
• This is just what we want, because now we can build our very own
layouts, explore the underlying XML, and write our own Kotlin code
to display these layouts. If you run the app now, you will just get a
blank screen with a title; not even a Hello World! message.
• The first type of layout we will explore is the LinearLayout.
Building a menu with LinearLayout
• LinearLayout is probably the simplest layout that Android offers. As
the name suggests, all the UI items within it are laid out linearly.
• You have just two choices – vertical and horizontal.
• By adding the following line of code, you can configure a LinearLayout
to lay things out vertically: android:orientation="vertical“
• You can then change "vertical" to "horizontal" to lay things out
horizontally.
Adding a LinearLayout to the project
• In the project window, expand the res folder. Now right-click the
layout folder and select New. Notice that there is an option for Layout
resource file, as shown in the following screenshot:
Adding a LinearLayout to the project
Select Layout resource file and you will see the New Resource File
dialog window:
Adding a LinearLayout to the project
Examining the generated XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

</LinearLayout>
Adding a TextView to the UI
• Switch back to the Design tab and we will add some elements to the
UI.
• First, find the TextView in the palette. This can be found in both the
Common and Text categories. Left-click and drag the TextView onto
the UI, and notice that it sits neatly at the top of the LinearLayout.
• Look at the XML on the Text tab and confirm that it is a child of the
LinearLayout and that it is indented by one tab to make this clear.
Adding a TextView to the UI

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TextView" />

Switch back to the design tab and we will make some changes.
Adding a TextView to the UI
• We want this text to be the heading text of this screen, which is the
main menu screen. In the attributes window, click the search icon,
type text into the search box, and change the text attribute to Menu,
as shown in the following screenshot:
Adding a TextView to the UI
• Next, find the textSize attribute using your preferred search technique
and set textSize to 50sp. When you have entered this new value, the
text size will increase.
• The sp stands for scalable pixels. This means that when the user
changes the font size settings on their Android device, the font will
dynamically rescale itself.
Adding a TextView to the UI
• Now, search for the gravity attribute and expand the options by
clicking the little arrow indicated in the following screenshot:
Adding a TextView to the UI
• Set gravity to center_horizontal, as shown in the following screenshot:
Adding a multi-line TextView to the UI
• witch back to Design tab, find the Multiline Text in the Text category of the
palette, and drag it onto the design just below the TextView.
• Your XML will be updated with another child in the LinearLayout, after the
TextView, that looks like the following code:
<EditText
android:id="@+id/editTextTextMultiLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="start|top"
android:text="Select a layout type to view an example. The onClick attribute of each
button will call a function
which executes setContentView to load the new layout."
android:inputType="textMultiLine" />
Wiring up the UI with the Kotlin code
• To achieve an interactive app, we will do the following three things:
1. We will call setContentView from the onCreate function to show
the progress of our UI when we run the app.
2. We will write two more functions of our own and each one will
call setContentView on a different layout (that we have yet to design).
3. Then, later in this chapter, when we design two more UI layouts,
we will be able to load them at the click of a button.
Wiring up the UI with the Kotlin code
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

setContentView(R.layout.main_menu)
}
}
Wiring up the UI with the Kotlin code
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main_menu)
}
fun loadConstraintLayout(v: View) {
setContentView(R.layout.activity_main)
}
fun loadTableLayout(v: View) {
//setContentView(R.layout.my_table_layout)
}
}
Adding layouts within layouts
• From the Layouts category of the palette, drag a LinearLayout
(Horizontal) onto the 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
• Now, go back to the Text category of the palette and drag a TextView
onto the new LinearLayout we just added.
• From the Button category, drag a Button onto the right-hand side of
the previous TextView.
Adding layouts within layouts
• Now we can repeat ourselves and add another TextView and Button
attribute 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 the text attribute of the Button to LOAD
6. Resize the LinearLayout by changing the layout_height attribute to
wrap_content
Adding layouts within layouts
• 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

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

Making the layout look pretty
• In this section, we will explore some more attributes that control the finer details of our UI.
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 topto 75sp.
Making the layout look pretty
• You can now run the app and see our first full layout in all its glory: