Android app contents are listed in a certain order so that they fit in the mobile phone screen without overlapping or hiding contents of other features inside the application. The contents of mobile applications are defined using layouts and therefore as an android developer, you must know how to work with android layouts that are defined and supported in the android studio. There are several layouts that are used while developing android applications but for this article, we shall focus on relative layout and linear layout in android.
According to Android developer documentation, a layout defines the structure of how items will appear in the user interface in an application. Therefore, a layout is a key element while developing android applications as it defines how the end-user of the application one is developing will look like, without layouts the user experience in the application will be rated low and despite having a great application, there will be no one who will want to be associated with the app.
Layouts are defined in the xml file
Linear layout in android
Android linear layout is a layout or a view group that organizes items along a single line. The single line can either be vertical or horizontal. While using the linear layout, the items will appear to lie along a line. The vertical alignment or horizontal alignment is defined by the user using the android orientation attribute. If you do not define the orientation in a linear layout, the horizontal orientation will be applied by default.
Every layout must define the below attributes for it to work perfectly
- android:id is the ID that uniquely identifies the layout.
- android:orientation which specifies the direction of arrangement of items, holds the value of either vertical or horizontal.
The other attributes are added according to the developer preferences example the width and height of the layout.
The code snippet below shows how linear layout is defined.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:id="@+id/linear1">
</LinearLayout>
To add elements to the linear layout example text views and buttons, the below code snippet show that
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:id="@+id/linear1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="30dp"
android:id="@+id/textview1"
android:textColor="@color/black">
</TextView>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/edittext1"
android:width="300dp">
</EditText>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:text="Button"
android:width="300dp">
</Button>
</LinearLayout>
When you use the above code and preview in the android studio, you will notice that the items will arrange themselves in a vertical line following each other from the first to the last.
If you change the orientation of the linear layout, the items will follow each other in a horizontal line.
The good thing with linear layout is that you do not have to define the position of the item since it will be covered by the orientation property in the linear layout.
Relative layout in android
An android relative layout is a view group that displays items in relative positions depending on the relationships with each other. While using the relative layout you have to define the position of each item relative to each other inside the relative item without this, the items will overlap in one position.
The attributes that are important in this layout are the use of
- android:layout_below which places an element below a specified element
- android:layout_above which places an element above a specified element
- android:layout_toLeftOf which places an element to the left of the specified element
- android:layout_toRightOf which places an element to the right of the specified element
The above attributed holds ids of a different element in the same layout.
To define relative layout, you can use the code snippet below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:id="@+id/relative1">
</RelativeLayout>
To add items to the relative layout you can use the code snippet as shown below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_marginLeft="50dp"
android:id="@+id/relative1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textSize="30dp"
android:id="@+id/textview1"
android:textColor="@color/black">
</TextView>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/edittext1"
android:layout_below="@+id/textview1"
android:width="300dp">
</EditText>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button1"
android:text="Button"
android:layout_below="@id/edittext1"
android:width="300dp">
</Button>
In the above discussion, we have highlighted the definition of layout in android and its importance. We have also shown steps of how to define the linear layout and relative layout, the attributes that are required in each, and how to display items in each layout. You can test with different elements that we have not added in this article and see how your layouts will perform.
