Nested LinearLayouts

The flag is a vertical LinearLayout containing seven elements. The last six are the six lowest stripes. The first element is a horizontal LinearLayout containing two elements: a blue View and a vertical LinearLayout of seven stripes.

It would have been simpler to superimpose the blue union jack onto the stripes by means of the FrameLayout we saw here. But FrameLayout does not support the android:layout_weight attribute that makes the union jack 2/5 of the width and 7/13 of the height of the flag.

It would also have been simpler to superimpose the blue union jack onto the stripes by means of the TableLayout we will see here. But a cell in a TableLayout cannot span more than one row (although it can span more than one column).

Landscape with no title bar

To get landscape orientation with no title bar, add the attributes

android:screenOrientation="landscape"

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"

Since there are so many stripes, it might have been easier to create the user interface with a for loop in Java code.

Source code in Tread.zip

1. TreadActivity.java
2. main.xml
3. AndroidManifest.xml

Things to try

1. Instead of writing the rgb formula for red (#ff0000) seven times, write it once and for all in a resource file. Create a file named colors.xml in the res/values folder. Right-click on res/values, and select New → File. The file should contain the following.

   <?xml version="1.0" encoding="utf-8"?>
   
   <resources>
   	<!-- alpha, red, green, blue -->
   	<color name="red">#ffff0000</color>
   	<color name="white">#ffffffff</color>
   	<color name="blue">#ff0000ff</color>
   </resources>
   

   In main.xml, change each #ff0000 to @color/red. Keep the double quotes.