Andriod programming – Posts 5: Interface design with LinearLayoout
As I said earlier post, LinearLayout is ViewGroup contain other View and manage horizontally or vertically (It is prescribed depending). Like so we lined up, arranged in horizontal or vertical. So when we use LinearLayout pretty easy to handle interface. Now we go to practice some interface design for applications with proficiency LinearLayout.
[qads]
Content
1. Login interface design with LinearLayout
This interface is the day before we were Designed with RelativeLayout a simple way, now try to apply to LinearLayout see stars.
We recall the following interface:
Such, we envision in my mind that this interface includes elements are lined from top to bottom. You see the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tvLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Login"
android:textSize="24sp" />
<TextView
android:id="@+id/tvUser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="user" />
<EditText
android:id="@+id/editUser"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tvPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="password" />
<EditText
android:id="@+id/editPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="ok" />
</LinearLayout>
With this code you will have an interface similar to the previous day, and similar to the one described above.
Have you noticed some of the following attributes in the code above:
First LinearLayout card
android:orientation=”vertical” : with LinearLayout, it manages the interface vertically and horizontally. Key Attributes orientation This regulation dimensional elements within it. vertical will be along and will be horizontal horizontal.
Followed by the tag and tag TextView Login Button
android:layout_gravity=”center”: This attribute is responsible for making all of that object layout (TextView Login và Button) is centered. That is all part of the frame is centered not only literal content it is centered. You remember the other day we have a similar attribute is android:gravity, it aligns the contents of the object in the middle.
So you can think of a way different from our interface. It is for the card inside LinearLayout content in between. So we do not need to align TextView and Button Login Ok much that just for their horizontally enough content is being. Carving it out among themselves, because they are inside it is LinearLayout original content LinearLayout, but the content of it in the middle and LinearLayout. However TextView TextView User and Password need to adjust the horizontal anthem plucked up the screen because otherwise we would have gone between. Such code would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="@+id/tvLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:textSize="24sp" />
<TextView
android:id="@+id/tvUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="user" />
<EditText
android:id="@+id/editUser"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tvPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="password" />
<EditText
android:id="@+id/editPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ok" />
</LinearLayout>
Here you will find our interface consisting of elements to be centered as desired. Only one thing is Every element is in the middle vertically as shown below:
That's because the property android:gravity=”center” is responsible for the content of LinearLayout do in the middle horizontally and vertically according to the latest (center). To overcome this trait, you change the value center by center_horizontal the horizontal center, because we do not want the middle vertically. Other articles you might want to use the center vertically, use value center_vertical.
2. Interface Design Calculator (Calculator) by LinearLayout
We will try a pocket computer with community functions, minus, ring, basic division offline. The better you care to make its interface, because after all I will do a practice to perfect the handling of the machine as it's always.
Let us now right click on the folder /res/layoout -> new -> Layout resource file -> Đặt tên file là layout_calculator.xml -> OK And open it out.
We imagine this computer with the functions and basic shape as follows:
Such, we will plan to use layout and layout as follows:
From that, we will have the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/tvMath"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"
android:text="0"
android:textSize="24sp" />
<TextView
android:id="@+id/tvResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"
android:text="0"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btnC"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="C"
android:textSize="20sp" />
<Button
android:id="@+id/btnOpen"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="("
android:textSize="20sp" />
<Button
android:id="@+id/btnClose"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text=")"
android:textSize="20sp" />
<Button
android:id="@+id/btnDiv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="7"
android:textSize="20sp" />
<Button
android:id="@+id/btn8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="8"
android:textSize="20sp" />
<Button
android:id="@+id/btn9"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="9"
android:textSize="20sp" />
<Button
android:id="@+id/btnMul"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="*"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="4"
android:textSize="20sp" />
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="5"
android:textSize="20sp" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="6"
android:textSize="20sp" />
<Button
android:id="@+id/btnSub"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="-"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1"
android:textSize="20sp" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="2"
android:textSize="20sp" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="3"
android:textSize="20sp" />
<Button
android:id="@+id/btnPlus"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="+"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btn0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="0"
android:textSize="20sp" />
<Button
android:id="@+id/btnDot"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="."
android:textSize="20sp" />
<Button
android:id="@+id/btnResult"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="="
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
From there we basically have the following frame
Have you noticed our code is very long, but absolutely the same basic buttons, so you do 1 button and copy a row 5 customers will very quickly.
Visual preview interface you will find it is not our desired, even if the screen horizontally to view and you will find the interface is as follows:
So we need to find ways how to overcome:
– The buttons are well spaced and of equal size and horizontally to fill the screen, riêng button Result (headboard) it will occupy an area equal 2 times the normal button.
– Evenly spaced rows and fill the screen vertically.
To achieve the Button in 1 equal-sized rows and horizontally to fill the screen we use properties android:layout_weight. Weighted mean weight. Ie we design based on key elements of – size ratio. To the button equal size and spill out horizontally, we give them equal weight of. For example, the first row we have the following code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btnC"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C"
android:textSize="20sp" />
<Button
android:id="@+id/btnOpen"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="("
android:textSize="20sp" />
<Button
android:id="@+id/btnClose"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=")"
android:textSize="20sp" />
<Button
android:id="@+id/btnDiv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
Since LinearLayout father is horizontal buttons, should attribute android:layout_weight will be applied to the horizontal. In the case of the vertical LinearLayout, this attribute applies to vertical of elements.
And we were like this interface though the mode you have to rotate the vertical or horizontal screen it too, still beautiful.
However, in many cases, when you give them an equal weighting of, but the text of the long button, they will have different size, you can try to correct the text of the button to open a long parenthesis like this.
The reason is that the property android:layout_width are worth the wrap_content it required just enough content to last.
To fix it completely equal, you for the size of the button horizontally 0dp. Here you notice is the size horizontally using layout 0dp because our father is horizontally, if the father is the vertical layout, then we have to give the size of the elements vertically by 0dp.
So complete code of the first row will be as follows:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="@+id/btnC"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C"
android:textSize="20sp" />
<Button
android:id="@+id/btnOpen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="("
android:textSize="20sp" />
<Button
android:id="@+id/btnClose"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=")"
android:textSize="20sp" />
<Button
android:id="@+id/btnDiv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
The next line we do the same. Another thing is that Button by, we need to give it the size folding 2 Other times the Button, I will therefore put its weight 2. Our new interface here:
Next we must do so to the height of the rows are equal and filled up the screen. Similar idea came up. We set the weight for that item, ie set android:layout_weight for LinearLayout in line with each other. But attention, Father Layout containing them are vertical dimension, So we have to put android:layout_height=”0dp”.
Finally our interface will be standardized as follows:
With the following code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/tvMath"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"
android:text="0"
android:textSize="24sp" />
<TextView
android:id="@+id/tvResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"
android:text="0"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btnC"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="C"
android:textSize="20sp" />
<Button
android:id="@+id/btnOpen"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="("
android:textSize="20sp" />
<Button
android:id="@+id/btnClose"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text=")"
android:textSize="20sp" />
<Button
android:id="@+id/btnDiv"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="/"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btn7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="7"
android:textSize="20sp" />
<Button
android:id="@+id/btn8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="8"
android:textSize="20sp" />
<Button
android:id="@+id/btn9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="9"
android:textSize="20sp" />
<Button
android:id="@+id/btnMul"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="*"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btn4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="4"
android:textSize="20sp" />
<Button
android:id="@+id/btn5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="5"
android:textSize="20sp" />
<Button
android:id="@+id/btn6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="6"
android:textSize="20sp" />
<Button
android:id="@+id/btnSub"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="-"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
android:textSize="20sp" />
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="2"
android:textSize="20sp" />
<Button
android:id="@+id/btn3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="3"
android:textSize="20sp" />
<Button
android:id="@+id/btnPlus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="+"
android:textSize="20sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="@+id/btn0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="0"
android:textSize="20sp" />
<Button
android:id="@+id/btnDot"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="."
android:textSize="20sp" />
<Button
android:id="@+id/btnResult"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="="
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
This article is here relatively long and, but I still want to guide the way you try to design interfaces Chat with LinearLayout. Since his days in advance will reside can not be done by LinearLayout but last, through a share on face, I knew this was a pretty good trick.
3. Chat interface design by LinearLayout
As all the previous day Chat interface design by RelativeLayout, we visualize the interface.
The new layout file you create is like creating a calculator layout file for offline.
Such, basically we can arrange the following arrangement:
In that, we must also use the properties weight to divide the interface rate of not knowing exactly the type of screen sizes how.
– ListView accounting 9 section height
– LayoutInput accounting 1 section height
– In the EditText accounting LayoutInput 4 part, Send accounting Button 1 part.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/lvChat"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="9" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<EditText
android:id="@+id/editChat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="4" />
<ImageButton
android:id="@+id/btnSend"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:src="@drawable/ic_send" />
</LinearLayout>
</LinearLayout>
Looking so beautiful and such a standard we want, however if you rotate the screen horizontal, you will see the following:
As you can see, LayoutInput part will shrink baby, because when rotated, reduced height that it accounts for only 1 section should be little and lose focus, typeface. Send Button also are left out horizontally bulge.
To remedy, we do not put the weight for which only put wrap_content LayoutInput for height, the width of the send button did not put weight only just put wrap_content. And because the object Send Button, No weights LayoutInput, ListView and EditText so you can leave any number of certain key, I like that 1.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/lvChat"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="@+id/editChat"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageButton
android:id="@+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_send" />
</LinearLayout>
</LinearLayout>
The interface you will see whether in screen, big or small, horizontal or vertical, it will not be broken as on more. Very tasty peach branch. ^^.
If you have comments or reviews, What questions, would you please comment below in.
His great article, very easy to understand for beginners, I only wish this series Truy.
Thank you, wishes him health.
Thank you. Please share with your friends offline.
Friend, in all 4 and 5 This, when your code is complete, to convert files MainActivity.java setContentView(R.layout.activity_main); the setContentView(R.layout.layout_calculator); then all FATAL EXCEPTION map error: main….. Run the Application error bị stopped. To fix it, huh how?
Do not know you did not create the correct interface file?