Android LinearLayout deals with placing components one after another either in horizontal or vertical manner. It acts as a parent container, which can hold components like TextView, RadioButton, EditText, ImageView, Button, as well as other Layouts inside it as their child components. Android LinearLayout are of two kind :
- Horizontal LinearLayout : Every new component we place, aligns towards right of the older component i.e. horizontally.
- Vertical LinearLayout : Addition of new component will be done below the older component i.e. vertically.
Source code : LinearLayout Horizontal
Source code : LinearLayout Vertical
Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) LinearLayout which you might have downloaded from above or you can follow the scripts below by copying it to implement in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/LinearLayout/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.
1. Android LinearLayout Horizontal
- We can make our LinearLayout horizontal, simply by defining a property android:orientation=”horizontal”.
- Below you will see that we have started our Linear layout at Line-2 & it ends on Line-27. So everything between these two lines falls as child of our Horizontal LinearLayout.
- You will see that all 3 Buttons we made inside our LinearLayout will be placed in a single horizontal line.
- Add 5-6 more buttons. You will see that when the screen area will be completely occupied, new buttons will not be visible since they will be out of frame. So we should keep this in mind while designing layouts.
activity_main.xml : Layout file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFED595C" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3" /> </LinearLayout> |
Output : Android LinearLayout – Horizontal
2. Android LinearLayout Vertical
- We can make our LinearLayout Vertical, simply by changing property to android:orientation=”vertical”.
- You will see that we have started our Linear layout at Line-2 & it ends on Line-27. So everything between these two lines falls as child of our Vertical LinearLayout.
- You will see that all 3 Buttons we made inside our LinearLayout will be placed in a vertical manner.
activity_main.xml : Layout file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#EEFFAA2A" android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button3" /> </LinearLayout> |
Output : Android LinearLayout – Vertical
MainActivity.java common for both horizontal & vertical layout
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
package com.example.linearlayouthorizontal; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } } |
Try it yourself :
- Try changing layout_height – width to fill_parent for all buttons & see that only 1st button will be visible.
- Try making combined layout using both Vertical & Horizontal linearlayout to make a simple login screen. Add a vertical linearlayout inside which place 2 horizontal linearlayout, both of horizontal layout containing 1 textView & 1 EditText. At end of 2nd Horizontal layout add a Login button.
Connect with us