Like I said in the previous post: Good UI design, you learn good Android, interface design, you learn Android unfinished unfinished. So today we start going into the interface design practice.

[qads]

1. Overview View

First I would like to introduce you a little bit with you about the Android interface. You observe the following:

All display elements are called View and practice them from class enemies View. View display means. In our View classified 2 type is:

• View menu: is the existing display elements that we can see directly as TextView, EditText, Button.
• ViewGroup: the other view View to contain, can accommodate single view or contain other ViewGroup.

In ViewGroup we have many kinds, here I recommend to you 2 The most frequently used type is RelativeLayout and LinearLayout.

• RelativeLayout View other is ViewGroup contain and manage according to the relationship between View in it. Like you sit next to your A B, you sit underneath your C B,…
• LinearLayout View other is ViewGroup contain and manage horizontally or vertically (It is prescribed depending). Like so we lined up, arranged in horizontal or vertical.

Today we are all going to learn through practicing RelativeLayout interface design of some applications.
You create a new project file and on the Text tab to perform offline activity_main.xml.

2. Login interface design with RelativeLayout

We envision the following login interface:

Such, we will need 3 TextView (Login, user, password), 2 EditText (user, password) and 1 Button (ok). We temporarily put to us tvLogin, TVUS, tvPassword, editUser, editPassword, btnOk.
Since we are using RelativeLayout, as I said above, RelativeLayout arrange the components within it is based, and the relationship between them. I imagine next:

• tvLogin at the top
• tvUser under tvLogin
• edituser under tvUser
• tvPassword under edituser
• editPassword under tvPassword
• btnOk under editPassword

So we will have the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tvLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="Login"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/tvUser"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvLogin"
        android:text="user" />

    <EditText
        android:id="@+id/editUser"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvUser" />

    <TextView
        android:id="@+id/tvPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editUser"
        android:text="password" />

    <EditText
        android:id="@+id/editPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvPassword" />

    <Button
        android:id="@+id/btnOk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editPassword"
        android:layout_centerHorizontal="true"
        android:text="ok" />

</RelativeLayout>

His explanation of the code as follows. Since this is my first time to explain your code should xml attention. Lines android:xyz in the corresponding View tab called View That's properties.

First you look at the first card RelativeLayout

Because RelativeLayout so it is a closing tag ViewGroup (current 2) and the opening tag (current 48) and it contains child elements within 2 This opens the card pair. Its properties are used

android:layout_width và android:layout_height here 2 only attribute is horizontally and vertically to its. All View all required to have at least 2 this attribute to determine the size of the View that. If the View does not have 1 in 2 This attribute will fail. Value of 2 This attribute can get the:

– wrap_content : ie just enough content (wrap – just enough, content – content). Its contents ie how much it just enough to get there.
– match_parent : means the whole of the father (match – total, parent – parents). That is his father (thằng contain it) how much it took out that section.
– XDP : where x is 1 reals, dp is the same as the wild cm, m, inch,.. In Android unit length to the moment you remember it is dp.
For this RelativeLayout ViewGroup, we placed both horizontally and vertically are match_parent ie horizontal and vertical are taken all his father, his father was the phone screen.

Follow, you pay attention to the first TextView card, tvLogin
Here 2 attribute android:layout_width và android:layout_height is natural and compulsory. Clarify his order for you to understand a little more:
– Its width is set wrap_content – just enough content, ie the whole it is always enough content. Click on it you will see the blue border around, it always has to content

– If you set the value for it is android:layout_width=”match_parent” ie horizontally you gave it with the entire width guy, it is the boy's father that this guy is RelativeLayout occupy the entire screen width, it has the entire screen horizontally like this.

– Properties android:layout_centerHorizontal=”true” ie we put it in the middle of the guy horizontally. center – between, horizontal – Horizontal. So you'll see in the middle of the screen tvLogin. If you set the width is match_parent (ie the entire screen) then the layout of it in the middle and as constant as what (because it is the entire width, it's the middle of that) and text “Login” located between the left digit is not anymore. You discriminate 1 View offers 2 as its components and its content. With TextView it is surrounded text layout, Its content is text. With it's part RelativeLayout wrapped frame, Its content is the children inside it. So in this case when the width of tvLogin you that want to text as well match_parent in between, you must use properties android:gravity=”center”. android:gravity position to define the content of View.
Specifically when it will TextViewLogin following resin:

<TextView
    android:id="@+id/tvLogin"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:gravity="center"
    android:text="Login"
    android:textSize="24sp" />

– Properties android:textSize=”24sp” ie we set the font size for it is 24sp. Font size unit is sp.

Next EditText View edituser and below

They are the same and are 1 property is:

android:layout_below : below your means something. Below of something is determined by the id of view related to it.

Also you need more of the same attributes of the View can be used in RelativeLayout

• android:layout_above : Located above a certain view (argument is the id of view)
• android:layout_toLeftOf : Located to the left of certain View (argument is the id of view)
• android:layout_toRightOf: Located to the right of certain View (argument is the id of view)
• android:layout_alignParentTop, android:layout_alignParentRight, android:layout_alignParentBottom, android:layout_alignParentLeft : attributes specify located on, right, below, View dad left. Our argument is true, false.

3. Interface Design Chat with RelativeLayout

Chat interface we are talking about it as the application interface that Facebook Messager. Means there 2 people chat with each other. So you envision the interface will be as follows:

According to the image above, we need 1 ListView (View this is allowed to display a list of data), 1 EditText and 1 ImageButton is the button that image. We put them respectively id lvMessage, editMessage, btnSend.

• btnSend located below the screen headline and situated right of the screen headline
• editMessage also located below the screen headline and to the left of btnSend.
• lvMessage located above editMessage.

Now you create 1 new interface file by right clicking on the folder layout in res and select new -> layout resource file and name the file layout_chat.xml

Next, you create 1 send button icons as follows. Right click on the folder drawable in res
selected new -> vector Asset. Dialogs, you click the Choose button.

Another dialog box appears so many icons, You pull down about 2/3 and select the send icon:

Click OK, and rename the icon's return ic_send

Finally Click Next -> Finish. Now icons have been created in the folder drawable, in fact it was painted by xml.

Now open the Text tab of the layout_chat.xml. The default you will see LinearLayout, RelativeLayout you edit and write code like the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/lvMessage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/editMessage" />

    <EditText
        android:id="@+id/editMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/btnSend" />

    <ImageButton
        android:id="@+id/btnSend"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_send" />

</RelativeLayout>

The properties in this code himself explained, The only attribute only android:src means the path to the file icon. value here is @drawable/ic_send ie retrieve files in a folder drawable ic_send.

One thing to note is that the interface you'll see a preview of the ListView is described like this. It is described as containing the element list, but when you run the application you will see empty list, because we do not have data. Later we will work with it later. This article only interface design alone.

At this point you run the program it will still display interface we do table top Login, to change the interface, you need to file Chat MainActivity.java change setContentView(R.layout.activity_main); to setContentView(R.layout.layout_chat); That's it.

Today all his longish bit but put a lot of hope. Good design is good programming. I wish you effective learning. If you have any questions comments, share please leave a comment below the article.