In this session, I'll mostly cover on a simple design to fit your android phone screen by using columns and rows. Some good and bad examples will be provided to show the xml design outline.
Tips: Some key words you need to pay attention on:
-LinearLayout
-TextView
-fill_parent
-wrap_content
-android:layout_weight
The end product for this session should be something like this.
The following steps are showing you the ways from a simple 1 row for whole screen to the end product as above, you may skip all steps and go to
Step 4 to see the code for end product.
Step 1 - Understand and display the simplest layout
Lets make a new project called HelloRCT (Hello Row Col Tutorial).
Then as usual, go to main.xml, click on the main.xml beside the Graphical Layout at the bottom left, then you should see something like this as default.
If you do not know where to find the main.xml or Strings.xml, please read Display Hello World via XML layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>
If we say it visually, it is something like figure on the left. After we run the application, to make the view clearer, i change the textview background color (android:backgroud="#00aa00") to green as shown on the right figure.
Step 2 - Insert more Rows
So what will happen if two TextView tag are put under the LinearLayout tag?
Copy whole
<TextView ... /
> tag and paste right after it where before
</LinearLayout
> and change the android:background to yellow (#aaaa00), then run the application, then you should get something like the figure below.
Good, lets edit codes now.
Assume we got a code likes below,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:background="#00aa00"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:background="#aaaa00"/>
>
change the
android:orientation="vertical" to
"horizontal", but due to the
android:width="fill_parent", the second column will be pushed outside the screen.
Logically is something like below, in fact, it is a human error which you will not see the second column.
Two ways to solve this problem, either you change
android:width="fill_parent" to
"wrap_content" or you may fit both columns in the screen with adding
android:layout_weight.
android:layout_weight is used to fit everything into the screen with ratio.
For example, add another line in both
tag,
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:background="#00aa00"
android:layout_weight="1"
/>
this is the ratio of 1:1 to share and fit the screen.
You may try to edit the layout_weight ratio to 3:1 and see the effect.
The ratio of 3:1 is actually can change to percentage to increase your own understanding.
from ratio 3+1, total 4 divided by 100 means ratio = 75:25.
Here comes the common confusion, the keywords to look for: 1. android:layout_weight beginner's question 2. bigger number of android:layout_weight should increase the area, but it decreases. 3. android:layout_weight best practices.
Aren't your application showing something out of your expectation?
E.g I'm using ratio 3:1 or 75:25, left figure is the result.
We are wondering why
75 out of 100 will gain smaller space than
25 out of 100.
The key is "
Weight"!
If something heavier (higher weight), means it will falls downwards more than others.
The example showing the green path (75%) is heavier than the yellow(25%). So the yellow path will visually took 75% and green path took 25% .
So please be reminded the keywords weight = how heavy the path are. I'll show you two different examples which left figure will be
horizontal and the bottom figure will be
vertical under
android:orientation in the
LinearLayout.
top figure is android:orientation="horizontal"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
So as you can see, since the weight is always about something heavy pushing downwards, so the green path will gain 75% of the screen and yellow path gain 25%
<=android:orientation="vertical"
Step 3 - More LinearLayout
Once you understand the concept of up, down, left and right, now try to make it two (2) columns on the top and one (1) row at the bottom without any assistance from this post. The product should be like the figure below.
Nested LinearLayout will be used to separate more field and makes it looks more flexible.
The code is shown below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="50"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"
android:background="#00aa00"
android:layout_weight="75"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"
android:background="#aaaa00"
android:layout_weight="25"
/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="50"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="@string/hello"
android:background="#aa0000"
/>
</LinearLayout>
</LinearLayout>
Step 4 - Organize the words, text color, background and whole picture.
Go to the strings.xml, set your own sentances. No idea how to do it? please refer to
Display Hello World via XML layout
Cheat code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello1">Hello World, Hello Column1!</string>
<string name="hello2">Hello World, Hello Column2!</string>
<string name="hello3">Hello World, Hello Row1!</string>
<string name="hello4">Hello World, Hello Row2!</string>
<string name="hello5">Hello World, Hello Row3!</string>
<string name="app_name">Hello Row and Col</string>
</resources>
Create a new colors.xml to store all colors you have. No idea how to do it? Please refer to
Different font style using HTML tag and change background color
Cheat code:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="red">#aa0000</color>
<color name="green">#00aa00</color>
<color name="purple">#aa00aa</color>
<color name="yellow">#aaaa00</color>
<color name="blue">#0000aa</color>
</resources>
Once you have done it, now is time for draw the outline.
The full code is as below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="@string/hello1"
android:background="@color/red"
android:layout_weight="1"/>
<TextView
android:gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="@string/hello2"
android:background="@color/green"
android:layout_weight="1"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello3"
android:background="@color/yellow"
android:textColor="#000000"
android:layout_weight="2"/>
<TextView
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello4"
android:background="@color/blue"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:gravity="center_vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello5"
android:background="@color/purple"
android:textSize="15pt"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
After run the application, you should get something similar like figure below.
This session is completed. If you found any problem, please drop me a comment or email to me at rickiedroid@gmail.com
Happy Java Android-ing.
