If you fire up the Stopwatch app from the previous chapter, you'll see that Android Studio created a dimens.xml file is app/src/main/res/values for you:

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
</resources>

However, it looks like the padding values used in the RelativeLayout of content_stopwatch.xml uses literals rather than these resource values. Don't be misled: once again it's Android Studio trying to be helpful by showing you the value that the resource resolves to. If you hover over each of the values and you should see something that matches the following:

content_stopwatch.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    ...

Create a new project called “Linear Layout Demo” to experiment with the changes described in this section. Call the main activity, “SendMessageActivity”. After creating the default project, you will need to convert the main RelativeLayout to a LinearLayout. One way to do this is:

1. Open content_send_message.xml in Text mode.
2. Replace the “Relative” text in the first tag with “Linear”. The closing tag should automatically change, but if it doesn't, change it manually.
3. Within the LinearLayout item, add the following attribute:

   android:orientation="vertical"

   just after android:layout_height=“match_parent”.

Now you can add the new Views and other code presented through p.185.

Make sure the attribute you add to the EditText is android:gravity and not android:layout_gravity. On my computer, when I preview this change on the “Design” tab, the Button gets hidden behind the bottom navigation bar. It shows up as expected on the emulator though.

Make sure the attribute you add to the Button is android:layout_gravity and not android:gravity.

But now we have a new problem: the email icon, which is actually part of a FloatingActionBar that Android Studio adds to all default projects, is covering the Send button. This page at Code2care.org shows you how to get rid of the FloatingActionBar altogether by following the procedure. I'm duplicating that content here in case the original goes away:

1. In the {Whatever}Activity.java file, remove the code that creates the FloatingActionBar inside the onCreate method:

   FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
   fab.setOnClickListener(new View.OnClickListener() {
   	@Override
   	public void onClick(View view) {
   		Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
   				.setAction("Action", null).show();
   	}
   });

2. In the activity_{whatever}.xml layout file, remove the android.support.design.widget.FloatingActionButton item:

   <android.support.design.widget.FloatingActionButton
   	android:id="@+id/fab"
   	android:layout_width="wrap_content"
   	android:layout_height="wrap_content"
   	android:layout_gravity="bottom|end"
   	android:layout_margin="@dimen/fab_margin"
   	android:src="@android:drawable/ic_dialog_email" />

Create a new project to work with the GridLayout example. The process of converting the default RelativeLayout to a GridLayout is similar to changing it to a LinearLayout. Be sure to add an android:columnCount attribute.

When you create the EditText for the GridLayout example, add and remove the android:layout_gravity attribute to gain an understanding of what it does.

Create a throwaway project for this final section of the chapter and experiment with as many of the Views covered as possible.

A good source of images that you can use without worrying about licensing is openclipart.org. Don't expect production-quality images though.

Another good resource is, iconfinder.com, but you have to take care to meet the licensing requirements of each image.

Your text suggest a ScrollView can be used as a root ViewGroup:

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hfad.scrollviewdemo.MainActivity"
    tools:showIn="@layout/activity_main">
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Top!" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!" />
        ...
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bottom!" />
    </LinearLayout>
 
</ScrollView>

However, in my experience this leads to unpredictable results (top of the ScrollView being obscured, etc.). A more reliable strategy seems to be nesting a ScrollView inside a root ViewGroups:

content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.hfad.scrollviewdemo.MainActivity"
    tools:showIn="@layout/activity_main">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Outside ScrollView"
        android:id="@+id/textView" />
 
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollView"
        android:layout_below="@+id/textView">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Top" />
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Hello World!" />
            ...
 
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bottom" />
        </LinearLayout>
    </ScrollView>
 
</RelativeLayout>

Android Studio produces a warning stating that the android:layout_height attribute of the LinearLayout inside the ScrollView should be set to wrap_content rather than match_parent.

If you examine the UI builder on a layout's “Design” tab, you will see that in addition to using it to add Views to your layout, you can also edit your Views' attributes.

Given that for a lot of people pointing, clicking, dragging, and dropping is more fun than writing code, you might be wondering why we didn't just use the drag-and-drop UI builder on the “Design” tab for everything rather than coding by hand. The answer is twofold:

1. Crawl before you walk. To use the UI builder effectively, you need to know what it is doing.
2. The UI builder only gets you so far. Typically you need to change the code that the UI builder generates for you. So you need to know what the code does.