How can I learn Android? |Day 3 The four most basic layouts in Android

Hey, it’s me again! I saw this image online then I was thinking how can we put the controls on the page in an orderly manner but not in a mess?

It requires a layout. A layout is a container that can be used to place many controls. It can adjust the position of internal controls according to certain rules to create a beautiful interface.

So today I’m going to learn the four most basic layouts in Android.

The following are my study notes for you.

1. LinearLayout

LinearLayout is what we use mostly. As its name describes, the layout arranges the controls it contains in a linear direction. If the android: orientation attribute is set to vertical, the controls are arranged vertically. If the android: orientation attribute is set to horizontal, the controls are arranged horizontally.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2" />

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 3" />

</LinearLayout>

If you change the direction of LinearLayout, as shown in the following codes:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
......
</LinearLayout>

Change the value of the android: orientation property to horizontal, which means letting the control in LinearLayout.

The components are arranged horizontally, but if you do not specify the value of the android: orientation property, the default direction is

Horizontal. Run the program again, it will come out:

2. RelativeLayout

Different from LinearLayout, RelativeLayout is more casual, allowing controls to appear anywhere in the layout by positioning them relative to each other.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:layout_alignParentTop="true"android:text="Button 1" /><Buttonandroid:id="@+id/button2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:text="Button 2" /><Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:text="Button 3" /><Buttonandroid:id="@+id/button4"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:text="Button 4" /><Buttonandroid:id="@+id/button5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:text="Button 5" /></RelativeLayout>

Let’s align Button 1 with the upper left corner of the parent layout, Button 2 with the upper right corner of the parent layout, Button 3 with the center, Button 4 with the lower-left corner of the parent layout, and Button 5 with the lower right corner of the parent layout. While android:layout_alignParentLeft,

android:layout_alignParentTop, android:layout_alignParentRight, android:layout_alignParentBottom,

Android:layout_centerInParent attributes we’ve never touched before, but their names fully state their functions.

Each control in the above example is positioned relative to the parent layout. Can the control be positioned relative to the control?

Where’s the location? You can modify the code in activity_main.xml as follows:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button 3" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 2" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toLeftOf="@id/button3"
android:text="Button 4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button3"
android:layout_toRightOf="@id/button3"
android:text="Button 5" />
</RelativeLayout>

3. FrameLayout

FrameLayout is much simpler than the previous two layouts. It has no way of positioning, and all controls are placed in the upper left corner of the layout.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"> <Buttonandroid:id="@+id/button"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Button"/><ImageViewandroid:id="@+id/image_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@drawable/ic_launcher"/></FrameLayout>

In the following example, FrameLayout contains only a button and a picture.

4. TableLayout

It allows us to arrange controls in a table, a layout that is not very common. When we design the form, you should try to have the same number of columns for each row, and such a table is the simplest. But sometimes things don’t always go our way. When a row in a table has to have an unequal number of columns, you need to merge cells. For example, there is a login page that allows users to enter their account and password to log in.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent" ><TableRow><TextViewandroid:layout_height="wrap_content"android:text="Account: "/><EditTextandroid:id="@+id/account"android:layout_height="wrap_content"android:hint="Input your account" /></TableRow><TableRow><TextViewandroid:layout_height="wrap_content"android:text="Password: "/><EditTextandroid:id="@+id/password"android:layout_height="wrap_content"android:inputType="textPassword" /></TableRow><TableRow><Buttonandroid:id="@+id/login"android:layout_height="wrap_content"android:layout_span="2"android:text="Login" /></TableRow></TableLayout>

Each time a TableRow is added to a TableLayout, a row is added to the table, and then a TableRow is added.

Each time a control is added in, a column is added to the row. The width of the control in TableRow cannot be specified.

Here we designed the table in a three-row, two-column format, with a TextView and a text view on the first line for entering accounts.

EditText, the second line also has a TextView and an EditText for entering the password, by setting

Android: Set inputType to text password to change EditText to a password text box. But the third row has only one button for login, the first two rows have two columns, and the third row has only one column, which makes the table look ugly and very unreasonable. In this case, you need to merge cells to solve this problem.

Android:layout_span=”2" allows the login button to occupy two columns to ensure that the table structure is reasonable.

What if we want it to automatically adapt to screen width?

In this case, the android:stretchColumns attribute can be used to solve this problem. It allows a column in the TableLayout to be stretched to automatically adapt to the screen width.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:stretchColumns="1"> ......</TableLayout>

Specify the value of android: stretch column to 1, which means that if the table does not fully occupy the screen width,

Stretch the second column. Yes! If this parameter is set to 1, the second column is stretched. If this parameter is set to 0, the first column is stretched.

Okay, that’s all for today’s notes. There is an absolute layout in Android, which is not recommended by the official website. Therefore, we get a good excuse for our laziness.LOL

--

--

--

Insights, success stories, and monetization tips for app development at https://medium.com/appgallery

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AppGallery Team

AppGallery Team

Insights, success stories, and monetization tips for app development at https://medium.com/appgallery

More from Medium