LinearLayout

These exercises continue the previous project, Hello, which already has an activity_main.xml file.

The orientation attribute of a LinearLayout is either vertical or horizontal. Only a LinearLayout has the attribute android:layout_weight. A LinearLayout is simpler then a RelativeLayout and more complicated than a FrameLayout. A RelativeLayout and a FrameLayout can superimpose two or more views on top of each other. See the Wyoming covering the corner of Utah in RelativeLayout.

Android’s documentation about LinearLayout

1. Layouts in general. Look at the pretty diagrams in LayoutParameters and Common Layouts.


2. Guide to LinearLayouts in particular.


3. The Java class android.widget.LinearLayout.
   1. documentation for the class.
   2. source code for the class on the GitHub website.


4. The Java class android.widget.LinearLayout.LayoutParams. This is where you look up the attributes you can give to the children of a LinearLayout: android:layout_gravity and android:layout_weight.
   1. documentation for the class.
   2. source code for the class on the GitHub website.

Things to try

1. Here are two activity_main.xml files that draw exactly the same picture. The one with a vertical LinearLayout is simpler.

   <RelativeLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingTop="@dimen/activity_vertical_margin"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       tools:context=".MainActivity">
   
       <TextView
           android:id="@+id/red"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#FFFF0000"
           android:text="Red"/>
   
       <TextView
           android:id="@+id/orange"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/red"
           android:background="#FFFF8000"
           android:text="Orange"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_below="@id/orange"
           android:background="#FFFFFF00"
           android:text="Yellow"/>
   
   </RelativeLayout>
   

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingTop="@dimen/activity_vertical_margin"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:orientation="vertical"
       tools:context=".MainActivity">
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#FFFF0000"
           android:text="Red"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#FFFF8000"
           android:text="Orange"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="#FFFFFF00"
           android:text="Yellow"/>
   
   </LinearLayout>
   

   


2. Change the orientation of the LinearLayout to horizontal. If the layout_width of the red TextView had remained match_parent, the TextView would have hogged the entire width of the screen and the orange and yellow ones would have been pushed off the right edge.

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       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"
       android:orientation="horizontal"
       tools:context=".MainActivity">
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#FFFF0000"
           android:text="Red"/>
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#FFFF8000"
           android:text="Orange"/>
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="#FFFFFF00"
           android:text="Yellow"/>
   
   </LinearLayout>
   

   For the second screenshot, I added the android:supportsRtl="true" (right to left) attribute to the <application> element of the AndroidManifest.xml file. Then I went to the Settings app and changed the phone’s language to Hebrew.

   


3. Change activity_main.xml to the following. A View is like a TextView except that the View has no text. (A more object-oriented way to say the same thing is that a TextView is like a View, except that the TextView has text. An even more object-oriented way to say the same thing is that class TextView is a subclass of class View.) The color #FF000000 is opaque black.

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       tools:context=".MainActivity">
   
       <View
           android:layout_width="1in"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="1 inch"/>
   
       <View
           android:layout_width="72pt"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="72 points"/>
   
       <View
           android:layout_width="160dp"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="160 density-independent pixels"/>
   
       <View
           android:layout_width="160px"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="160 pixels"/>
   
       <View
           android:layout_width="160sp"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="160 scale-independent pixels"/>
   
       <View
           android:layout_width="10mm"
           android:layout_height="20dp"
           android:layout_marginTop="20dp"
           android:background="#FF000000"/>
   
       <TextView
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text="1 centimeter"/>
   
   </LinearLayout>
   

   In the second screenshot, the scale-independent pixels got smaller after I went to the Settings app and selected
   DEVICE → Display → Font size
   and chose Small.

   

   Even better, write the #FF000000 once and for all as a color resource. Select the res/values folder in the Android Studio project view and pull down
   File → New → Values resource file
   New Resource File
   File name: colors
   OK
   Change the contents of your new file colors.xml to the following.

   <?xml version="1.0" encoding="utf-8"?>
   
   <resources>
   	<!-- alpha, red, green, blue -->
   	<color name="black">#FF000000</color>
   </resources>
   

   In activity_main.xml, change every

   		android:background="#FF000000"
   

   to

   		android:background="@color/black"
   

   Can you figure out how to write the 20dp once and for all as a dimension resource? See, for example, the dimension resource activity_horizontal_margin in dimens.xml, and its use in activity_main.xml.



4. Remember how a TextView had gravity in exercise 7 of Hello? Well, a LinearLayout has gravity too.
   
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" android:background="#FFFFFF00" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:background="#FFFF8000" android:text="One"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:padding="16dp" android:background="#FFFF8000" android:text="Two"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:padding="16dp" android:background="#FFFF8000" android:text="Three"/> </LinearLayout>

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:orientation="vertical" android:gravity="bottom|right" android:background="#FFFFFF00" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:background="#FFFF8000" android:text="One"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:padding="16dp" android:background="#FFFF8000" android:text="Two"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:padding="16dp" android:background="#FFFF8000" android:text="Three"/> </LinearLayout>

   Other values for a LinearLayout’s gravity include

   android:gravity="top|left"                 (the default)
   android:gravity="left|center_vertical"     (middle of left edge)
   android:gravity="top|center_horizontal"    (middle of top edge)
   android:gravity="center"
   

   We can use this gravity to accomplish something we were unable to do with a RelativeLayout: centering a caption below (or above) a big View.

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="vertical" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" tools:context=".MainActivity"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:orientation="vertical" android:gravity="center_horizontal" android:background="#FFFF8000"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="16dp" android:background="#FFFF0000" android:padding="16dp" android:text="top caption"/> <TextView android:layout_width="160dp" android:layout_height="160dp" android:background="#FFFF0000" android:padding="16dp" android:text="big view"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:background="#FFFF0000" android:padding="16dp" android:text="bottom caption"/> </LinearLayout> </LinearLayout>

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="vertical" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" tools:context=".MainActivity"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="16dp" android:orientation="horizontal" android:gravity="center_vertical" android:background="#FFFF8000"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="16dp" android:background="#FFFF0000" android:padding="16dp" android:text="L"/> <TextView android:layout_width="160dp" android:layout_height="160dp" android:background="#FFFF0000" android:padding="16dp" android:text="big view"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:background="#FFFF0000" android:padding="16dp" android:text="R"/> </LinearLayout> </LinearLayout>

To make the bottom caption overlap the big view, change the caption’s layout_marginTop to "-16dp".



5. Replace the big TextView in the previous exercise with an ImageView.

   First, create a drawable resource. Save an image such as the one below (a 300 × 197 jpg) on your Mac or PC desktop. On Mac, right-click on the image and select
   Copy “mercury.png”
   Right-click on the folder app/res/drawable in the project view and select Paste.
   Copy file ~/Desktop/mercury.png
   OK

   In activity_main.xml, replace the big TextView with the following ImageView. For drama, change the background of the inner LinearLayout to #FF000000 (opaque black). And change the caption to white text on a black background.

           <ImageView
               android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:src="@drawable/mercury"
               android:contentDescription="1962 Project Mercury stamp"/>
   

   


6. [Winner take all.] A vertical LinearLayout may have leftover height after satisfying the layout_height requested by each of its children. If so, the children can request shares of the leftover height. The number of shares requested by each child is called the layout weight of the child. Ditto for a horizontal LinearLayout, mutatis mutandis.
   
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="vertical" 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=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="16dp" android:background="#FFFF8000" android:text="1"/> <TextView android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="16dp" android:layout_weight="1" android:padding="16dp" android:background="#FFFF8000" android:text="2"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:padding="16dp" android:background="#FFFF8000" android:text="3"/> </LinearLayout>

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="horizontal" 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=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:background="#FFFF8000" android:padding="16dp" android:text="1"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="2"/> <TextView android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:background="#FFFF8000" android:padding="16dp" android:text="3"/> </LinearLayout>



7. [Equal portions.]
   
   

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="vertical" 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=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="1"/> <TextView android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="16dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="2"/> <TextView android:layout_width="match_parent" android:layout_height="0dp" android:layout_marginTop="16dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="3"/> </LinearLayout>

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF00" android:orientation="horizontal" 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=".MainActivity"> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="1"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="2"/> <TextView android:layout_width="0dp" android:layout_height="match_parent" android:layout_marginLeft="16dp" android:layout_weight="1" android:background="#FFFF8000" android:padding="16dp" android:text="3"/> </LinearLayout>



8. Time for a practical example. Launch the ApiDemos app in the Android emulator and select
   Views → Layouts → LinearLayout → 05. Simple Form
   The same form is drawn with a RelativeLayout in
   Views → Layouts → RelativeLayout → 2. Simple Form.
   See exercise 4 in RelativeLayout.

   An android:gravity="right" attribute in the outer LinearLayout would move all three of the LinearLayout’s children to the right. To move only one child to the right, the child has the android:layout_gravity="right" attribute (not the gravity attribute). See line 55 of linear_layout_5.xml.

   1. ApiDemos/src/com/example/android/apis/view/LinearLayout5.java
   2. ApiDemos/res/layout/linear_layout_5.xml
      consists of a vertical LinearLayout containing a TextView, an EditText, and a horizontal LinearLayout containing two Buttons.
   3. ApiDemos/res/values/strings.xml
      contains three string resources:
      1. linear_layout_5_instructions (line 1176)
      2. linear_layout_5_cancel (line 1177)
      3. linear_layout_5_ok (line 1178)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/AndroidManifest.xml
      lists the LinearLayout5 Activity in lines 1604–1610.
   
   


9. Make a bar chart with vertical bars. The gravity attribute of the LinearLayout causes the bars to rest on the floor. If we set android:baselineAligned="true", September would still be resting on the floor, but all the other bars would be top-aligned with September. The gravity attribute within each bar causes the word to rise to the center of the top of the bar.

   <LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_marginBottom="4dp"
       android:orientation="horizontal"
       android:gravity="bottom"
       android:baselineAligned="false"
       tools:context=".MainActivity">
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="20dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:text="Jan"
           android:gravity="top|center"
           android:background="#FFFF0000"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="40dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FFFF8000"
           android:gravity="top|center"
           android:text="Feb"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="80dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FFFFFF00"
           android:gravity="top|center"
           android:text="Mar"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="120dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FF00FF00"
           android:gravity="top|center"
           android:text="Apr"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="160dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FF0000FF"
           android:gravity="top|center"
           android:text="May"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="265dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FF4B0082"
           android:textColor="#FFFFFFFF"
           android:gravity="top|center"
           android:text="Jun"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="310dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FF7F00FF"
           android:gravity="top|center"
           android:text="Jul"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="340dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:background="#FF808080"
           android:gravity="top|center"
           android:text="Aug"/>
   
       <TextView
           android:layout_width="0dp"
           android:layout_height="475dp"
           android:layout_weight="1"
           android:layout_marginLeft="4dp"
           android:layout_marginRight="4dp"
           android:background="#FFD2B48C"
           android:gravity="top|center"
           android:text="Sep"/>
   
   </LinearLayout>
   

   


10. The following RelativeLayout superimposes two LinearLayouts on top of each other. Each LinearLayout covers the entire screen, but fortunately the second one (which is closer to the user) is largely transparent. The first LinearLayout contains the thirteen stripes. The second LinearLayout contains the blue union jack and the transparent areas to its right and below it. The second LinearLayout was necessary because the union jack has to be 7/13 of the height of the flag and 2/5 of the width accoding to the federal government; see the specs in Wikipedia. Only a LinearLayout, not a RelativeLayout, can set a subview to be a given fraction of a total dimension of the screen.

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <!-- This LinearLayout holds the 13 horizontal stripes. -->
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"
                android:gravity="center"
                android:textAllCaps="true"
                android:text="Don't Tread On Me"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFFFFFF"/>
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#FFFF0000"/>
    
        </LinearLayout>
    
        <!-- This LinearLayout holds the inner LinearLayout and the area below it. -->
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
    
            <!-- This LinearLayout holds the blue union jack and the area to the right of it. -->
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="7"
                android:orientation="horizontal">
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2"
                    android:background="#FF0000FF"/>
    
                <!-- This transparent view covers the area to the right of the blue union jack. -->
    
                <View
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="3"
                    android:background="#00000000"/>
    
            </LinearLayout>
    
            <!-- This transparent view covers the lower six stripes. -->
    
            <View
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="6"
                android:background="#00000000"/>
    
        </LinearLayout>
    
    </RelativeLayout>
    

    To make the screen orientation horizontal, add the following attribute to the activity element in AndroidManifest.xml.

                android:screenOrientation="landscape"
    

    To get rid of the action bar, change the parent attribute of the style element in styles.xml from

        parent="Theme.AppCompat.Light.DarkActionBar"
    

    to the following.

        parent="Theme.AppCompat.Light.NoActionBar"
    

    


11. Make a Scottish tartan. The colors are
    • #FF000000 black
    • #FFFF0000 red
    • #FFFFFF00 yellow
    The two inner LinearLayouts (vertical and horizontal) are superimposed on each other because they occupy the same space (the entire RelativeLayout). Fortunately, their contents are semitransparent (android:alpha = .5). The purpose of the RelativeLayout is to do the superimposition. The purpose of the outer LinearLayout is to center the RelativeLayout, which is larger than the screen.

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        android:gravity="center"
        tools:context=".MainActivity">
    
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
            <!-- the horizontal stripes -->
    
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:alpha=".5"
                android:gravity="center"
                android:orientation="vertical">
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="29dp"
                    android:background="#FF000000"/>
    
            </LinearLayout>
    
            <!-- the vertical stripes -->
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:alpha=".5"
                android:gravity="center"
                android:orientation="horizontal">
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FFFF0000"/>
    
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
                <View
                    android:layout_width="2dp"
                    android:layout_height="match_parent"
                    android:background="#FFFFFF00"/>
                <View
                    android:layout_width="29dp"
                    android:layout_height="match_parent"
                    android:background="#FF000000"/>
    
            </LinearLayout>
    
        </RelativeLayout>
    
    </LinearLayout>
    

    


12. Write an app that displays an interesting screen containing objects of class View (exercise 3 above), TextView, ImageView (exercise 5 above), and/or Button (exercise 4 in RelativeLayout). Maybe class AnalogClock, too (exercise 11 in Hello). It can be a control panel, a map of several states, or whatever you want. At least one of the views should be touch-sensitive (exercise 6 in RelativeLayout). For example,

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF00"
        android:orientation="vertical"
        android:padding="16dp"
        tools:context=".MainActivity">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFF8000"
            android:orientation="vertical"
            android:padding="16dp">
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#FFFF0000"
                android:text="Moscow"/>
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="#FFFF0000"
                android:text="Peking"/>
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="#FFFF0000"
                android:text="London"/>
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="#FFFF0000"
                android:text="Washington"/>
    
            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="#FFFF0000"
                android:text="New York"/>
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:orientation="horizontal">
    
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="16dp"
                android:orientation="horizontal"
                android:background="#FFFF8000">
    
                <View
                    android:layout_width="16dp"
                    android:layout_height="100dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="16dp"
                    android:layout_height="100dp"
                    android:layout_marginLeft="16dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="16dp"
                    android:layout_height="100dp"
                    android:layout_marginLeft="16dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="16dp"
                    android:layout_height="100dp"
                    android:layout_marginLeft="16dp"
                    android:background="#FF000000"/>
    
                <View
                    android:layout_width="16dp"
                    android:layout_height="100dp"
                    android:layout_marginLeft="16dp"
                    android:background="#FF000000"/>
    
            </LinearLayout>
    
            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                android:background="#FFFF8000"
                android:padding="16dp">
    
                <Button
                    android:layout_width=100dp"
                    android:layout_height="100dp"
                    android:background="#FFFF0000"
                    android:text="Launch"/>
    
            </FrameLayout>
    
        </LinearLayout>
    
    </LinearLayout>
    

    
    
    

LinearLayout in ApiDemos

1. Views → Layouts → LinearLayout → 01. Vertical
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout1.java
   2. ApiDemos/res/layout/linear_layout_1.xml
      consists of a vertical LinearLayout with android:layout_height="wrap_content", containing three TextViews.
   3. ApiDemos/res/values/strings.xml
      contains three string resources:
      1. linear_layout_1_top (line 1167)
      2. linear_layout_1_middle (line 1168)
      3. linear_layout_1_bottom (line 1169)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/res/drawable/box.xml
      consists of a shape drawable
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout1 Activity in lines 1572–1578.
   


2. Views → Layouts → LinearLayout → 02. Vertical (Fill Screen)
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout2.java
   2. ApiDemos/res/layout/linear_layout_2.xml
      consists of a vertical LinearLayout with android:layout_height="match_parent", containing three TextViews.
   3. ApiDemos/res/values/strings.xml
      contains three string resources:
      1. linear_layout_2_top (line 1170)
      2. linear_layout_2_middle (line 1171)
      3. linear_layout_2_bottom (line 1172)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/res/drawable/box.xml
      consists of a shape drawable
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout2 Activity in lines 1580–1586.
   


3. Views → Layouts → LinearLayout → 03. Vertical (Padded)
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout3.java
   2. ApiDemos/res/layout/linear_layout_3.xml
      consists of a vertical LinearLayout with android:layout_height="match_parent", containing three TextViews. The middle TextView has android:layout_weight="1".
   3. ApiDemos/res/values/strings.xml
      contains three string resources:
      1. linear_layout_3_top (line 1173)
      2. linear_layout_3_middle (line 1174)
      3. linear_layout_3_bottom (line 1175)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/res/drawable/box.xml
      consists of a shape drawable
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout3 Activity in lines 1588–1594.
   


4. Views → Layouts → LinearLayout → 04. Horizontal
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout4.java
   2. ApiDemos/res/layout/linear_layout_4.xml
      consists of a horizontal LinearLayout containing four TextViews with no text.
   3. ApiDemos/res/values/colors.xml
      contains four drawable resources:
      1. red (line 20)
      2. blue (line 21)
      3. green (line 22)
      4. yellow (line 23)
   4. ApiDemos/AndroidManifest.xml
      lists the LinearLayout4 Activity in lines 1596–1602.
   


5. Views → Layouts → LinearLayout → 05. Simple Form
   The same form is drawn with a RelativeLayout in Views → Layouts → RelativeLayout → 2. Simple Form. See RelativeLayout.
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout5.java
   2. ApiDemos/res/layout/linear_layout_5.xml
      consists of a vertical LinearLayout containing a TextView, an EditText, and a horizontal LinearLayout containing two Buttons.
   3. ApiDemos/res/values/strings.xml
      contains three string resources:
      1. linear_layout_5_instructions (line 1176)
      2. linear_layout_5_cancel (line 1177)
      3. linear_layout_5_ok (line 1178)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/AndroidManifest.xml
      lists the LinearLayout5 Activity in lines 1604–1610.
   


6. Views → Layouts → LinearLayout → 06. Uniform Size
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout6.java
   2. ApiDemos/res/layout/linear_layout_6.xml
      consists of a vertical LinearLayout containing four TextViews.
   3. ApiDemos/res/values/strings.xml
      contains four string resources:
      1. linear_layout_6_one (line 1179)
      2. linear_layout_6_two (line 1180)
      3. linear_layout_6_three (line 1181)
      4. linear_layout_6_four (line 1182)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/res/drawable/box.xml
      consists of a shape drawable
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout6 Activity in lines 1612–1618.
   


7. Views → Layouts → LinearLayout → 07. Fill Parent
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout7.java
   2. ApiDemos/res/layout/linear_layout_7.xml
      consists of a horizontal LinearLayout containing four TextViews. The second one (green) contains a lot of text, but most of it is hidden.
   3. ApiDemos/res/values/strings.xml
      contains four string resources:
      1. linear_layout_7_small (line 1183)
      2. linear_layout_7_big (line 1184)
      3. linear_layout_7_wrap (line 1185)
   4. ApiDemos/res/values/colors.xml
      contains four drawable resources:
      1. red (line 20)
      2. blue (line 21)
      3. green (line 22)
      4. yellow (line 23)
   5. ApiDemos/AndroidManifest.xml
      lists the LinearLayout7 Activity in lines 1620–1626.
   


8. Views → Layouts → LinearLayout → 08. Gravity
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout8.java
      The options menu changes the orientation and gravity of the LinearLayout.
   2. ApiDemos/res/layout/linear_layout_8.xml
      consists of a FrameLayout containing an initially vertical LinearLayout, containing three TextViews.
   3. ApiDemos/res/values/strings.xml
      contains 11 string resources:
      1. linear_layout_8_a (line 1186)
      2. linear_layout_8_b (line 1187)
      3. linear_layout_8_c (line 1188)
      
      
      4. linear_layout_8_vertical (line 955)
      5. linear_layout_8_horizontal (line 956)
      
      
      6. linear_layout_8_top (line 957)
      7. linear_layout_8_middle (line 958)
      8. linear_layout_8_bottom (line 959)
      
      
      9. linear_layout_8_left (line 960)
      10. linear_layout_8_center (line 961)
      11. linear_layout_8_right (line 962)
   4. ApiDemos/res/values/colors.xml
      contains a drawable resource:
      1. blue (line 21)
   5. ApiDemos/res/drawable/box.xml
      consists of a shape drawable
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout8 Activity in lines 1628–1634.
   


9. Views → Layouts → LinearLayout → 09. Layout Weight
   1. ApiDemos/src/com/example/android/apis/view/LinearLayout9.java
   2. ApiDemos/src/com/example/android/apis/view/AutoComplete1.java
      contains a field named COUNTRIES.
   3. ApiDemos/res/layout/linear_layout_9.xml
      consists of a vertical LinearLayout containing a ListView and a Button.
   4. android/platform/framewords/base/master/./core/res/res/layout/simple_list_item_1.xml
   5. ApiDemos/res/values/strings.xml
      contains one string resource:
      1. linear_layout_9_button (line 1189)
   6. ApiDemos/AndroidManifest.xml
      lists the LinearLayout9 Activity in lines 1636–1642.
   


10. Views → Layouts → LinearLayout → 10. Background Image
    1. ApiDemos/src/com/example/android/apis/view/LinearLayout10.java
    2. ApiDemos/res/layout/linear_layout_10.xml
       consists of a vertical LinearLayout containing two horizontal LinearLayouts.
    3. ApiDemos/res/values/strings.xml
       contains two string resources:
       1. linear_layout_10_from (line 963)
       2. linear_layout_10_to (line 964)
    4. ApiDemos/res/drawable_mdpi/star_big_on.png (32 × 32 pixels)
    5. ApiDemos/res/drawable_hdpi/star_big_on.png (48 × 48 pixels)
    6. android/platform/framewords/base/master/./core/res/res/drawable/exit_text.xml
    7. ApiDemos/AndroidManifest.xml
       lists the LinearLayout1 Activity in lines 1644–1650.