Using Linear Layout Inside Relative Layout With Example In Android Studio

Linear Layout can be used inside relative layout since one layout can be nested in other layout in XML. Here we will show you how to use Linear Layout in relative layout with example in Android Studio.

Also Read:

Relative Layout Tutorial
Linear Layout Tutorial

In the example of Linear Layout in relative layout we create custom layout of four buttons by using two Linear Layout’s. We place both the layout’s inside Relative Layout one after another by using different properties of Relative Layout. Finally we get the reference of Button in our Activity and perform click events on them. Whenever a user click on any Button the name of the Button is displayed on the screen by using a Toast.

Below you can download code, see final output and step by step explanation:

Download Code ?

Step 1: Create a new project and name it LinearLayoutInsideRelativeLayout.

Step 2: Open res -> layout -> activity_main.xml (or) main.xml and add following code:

In this step we open xml file and then create custom layout of four buttons by using two Linear Layout’s and then place the both layout’s inside Relative Layout one after another by using  different properties of Relative Layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<!-- create a Linear Layout with horizontal orientation and weightSum property -->

<LinearLayout
android:id="@+id/firstLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="2">

<!-- place two button's inside layout using weight property -->

<Button
android:id="@+id/firstButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@color/redColor"
android:text="First"
android:textColor="@color/whiteColor"
android:textStyle="bold" />

<Button
android:id="@+id/secondButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@color/greenColor"
android:text="Second"
android:textColor="@color/whiteColor"
android:textStyle="bold" />
</LinearLayout>

<!-- create a Linear Layout with horizontal orientation and weightSum property -->

<LinearLayout
android:id="@+id/secondLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/firstLayout"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:weightSum="2">

<!-- place two button's inside layout using weight property -->

<Button
android:id="@+id/thirdButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="@color/greenColor"
android:text="Third"
android:textColor="@color/whiteColor"
android:textStyle="bold" />

<Button
android:id="@+id/fourthButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="@color/redColor"
android:text="Fourth"
android:textColor="@color/whiteColor"
android:textStyle="bold" />
</LinearLayout>

</RelativeLayout>

Step 3: Open src -> package -> MainActivity.java

In this step Firstly we get the reference of Button’s and then perform click event on all the Button’s. In this Activity we implement overrided methods of OnClickListener interface to perform click event. Whenever a user click on any Button the name of the Button is displayed on the screen by using a Toast.

package example.abhiandroid.linearlayoutinsiderelativelayout;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity extends Activity implements View.OnClickListener {

Button firstButton, secondButton, thirdButton, fourthButton;

// automatically called when the activity is first created
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// get the reference of Button's and then perform click event on Button's
firstButton = (Button) findViewById(R.id.firstButton);
firstButton.setOnClickListener(this);
secondButton = (Button) findViewById(R.id.secondButton);
secondButton.setOnClickListener(this);
thirdButton = (Button) findViewById(R.id.thirdButton);
thirdButton.setOnClickListener(this);
fourthButton = (Button) findViewById(R.id.fourthButton);
fourthButton.setOnClickListener(this);
}

@Override
public void onClick(View v) {
String btnName = null;
// check which button is clicked and set the string value in the variable for displaying it by using a toast
switch (v.getId()) {
case R.id.firstButton:
btnName = "First Button Clicked";
break;
case R.id.secondButton:
btnName = "Second Button Clicked";
break;
case R.id.thirdButton:
btnName = "Third Button Clicked";
break;
case R.id.fourthButton:
btnName = "Fourth Button Clicked";
break;
}
// display the name of clicked Button by using a Toast
Toast.makeText(getApplicationContext(), btnName, Toast.LENGTH_LONG).show();

}



}

Step 4: Open res -> values-> colors.xml

In this step we define the colors (red, green and white) that used in the background and text color of Button’s.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- define colors used in our xml file-->
<color name="whiteColor">#fff</color>
<color name="redColor">#f00</color>
<color name="greenColor">#0f0</color>
</resources>

Output:

You will see 4 button out of which 2 each are used in one Linear Layout which further used inside Relative Layout.

DOWNLOAD THIS FREE eBook!

This free eBook will help you master the learning of Android App Development in Android Studio!

Name

Email

Subscribe & Download eBook Now >>