1. Introduction

When we develop an Android application, we need to design its user interface. For example, a login screen contains text fields, buttons, labels, and other UI components.

In Android development, XML is commonly used to define the structure and appearance of these UI components.

An XML layout tells Android:

• Which UI components should appear on the screen.

• Where components should be positioned.

• How much space each component should occupy.

• How components should be arranged.

Android provides different layout types. In this tutorial, we will understand three important layouts:

1. LinearLayout

2. RelativeLayout

3. ConstraintLayout

By the end of this tutorial, you will understand how to create Android screens using XML.

2. What Is an XML Layout?

An XML layout is a file that defines the user interface of an Android application.

Layout XML files are generally stored inside:

app/src/main/res/layout/

For example:

activity_main.xml

A simple XML layout looks like this:

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to Android" />

</LinearLayout>

Here:

• LinearLayout is the parent layout.

• TextView displays text.

• layout_width defines the component's width.

• layout_height defines the component's height.

• orientation="vertical" arranges child components vertically.

3. Understanding Important XML Attributes

Before learning different layouts, understand these common attributes.

layout_width

It defines the width of a UI component.

Two commonly used values are:

match_parent: The component tries to occupy the available width of its parent.

wrap_content: The component occupies only the space required by its content.

Example:

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello Android" />

layout_height

It defines the height of a UI component.

Example:

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login" />

padding

Padding is the space between a view's content and its own boundary.

android:padding="16dp"

margin

Margin is the space outside a view, separating it from other views.

android:layout_margin="12dp"

dp and sp

dp (Density-independent Pixels): Used for dimensions such as width, height, margin, and padding.

sp (Scale-independent Pixels): Used mainly for text sizes because it respects the user's font-size settings.

Example:

android:layout_width="200dp"
android:textSize="18sp"

4. What Is LinearLayout?

LinearLayout arranges its child components in a single direction.

It supports two orientations:

• Vertical: Components appear one below another.

• Horizontal: Components appear side by side.

Vertical LinearLayout Example

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login Screen"
        android:textSize="24sp" />

    <EditText
        android:id="@+id/etUsername"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Username" />

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter Password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login" />

</LinearLayout>

Explanation:

• The parent LinearLayout uses vertical orientation.

• TextView displays the Login Screen heading.

• Two EditText components collect username and password.

• Button displays the Login button.

• All components appear one below another.

Horizontal LinearLayout Example

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Yes" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="No" />

</LinearLayout>

In this example, both buttons appear side by side.

Understanding layout_weight

The layout_weight attribute distributes available space between child views inside a LinearLayout.

Example:

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

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="First" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Second" />

</LinearLayout>

Both buttons receive an equal share of the available horizontal space.

When should you use LinearLayout?

Use it when you need a simple vertical or horizontal arrangement of components.

5. What Is RelativeLayout?

RelativeLayout positions child components relative to the parent layout or other views.

For example:

• Place a button at the bottom of the parent.

• Place one TextView below another TextView.

• Align a component to the right side of its parent.

RelativeLayout is an older layout system. It is still useful for understanding existing Android projects, but ConstraintLayout is generally preferred for complex modern screen designs.

RelativeLayout Example

<?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:padding="20dp">

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

    <Button
        android:id="@+id/btnContinue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Continue"
        android:layout_below="@id/tvTitle"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

Explanation:

• RelativeLayout is the parent container.

• tvTitle displays the Welcome heading.

• layout_centerHorizontal centers the heading horizontally.

• layout_below places the button below the heading.

• The button is also centered horizontally.

Common RelativeLayout Attributes

layout_below: Places a view below another view.

layout_above: Places a view above another view.

layout_toStartOf: Places a view before another view in the layout direction.

layout_toEndOf: Places a view after another view in the layout direction.

layout_centerInParent: Centers a view inside its parent.

layout_alignParentBottom: Aligns a view with the bottom of its parent.

These attributes help position components without using a fixed screen position.

6. What Is ConstraintLayout?

ConstraintLayout is a flexible layout that positions views using constraints.

A constraint connects one side of a view to:

• Another view.

• The parent layout.

• A guideline.

It is useful for creating complex and responsive Android screens.

ConstraintLayout is commonly preferred for modern XML-based screen designs because it can create complex arrangements with a relatively flat view hierarchy.

Basic ConstraintLayout Example

First, ensure that the ConstraintLayout dependency is available in your app module.

dependencies {
    implementation("androidx.constraintlayout:constraintlayout:2.2.1")
}

Use a version compatible with your project's Android Gradle configuration.

Now create this XML layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to Param Classes"
        android:textSize="22sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Get Started"
        app:layout_constraintTop_toBottomOf="@id/tvTitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="20dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation:

• ConstraintLayout is the parent layout.

• The TextView is connected to the top, start, and end of the parent.

• The start and end constraints center the heading horizontally.

• The Button is connected below the TextView.

• layout_marginTop adds space between the heading and button.

Understanding Important Constraints

Top constraint: Connects the top of a view to another view or parent.

Bottom constraint: Connects the bottom of a view to another view or parent.

Start constraint: Connects the start side of a view.

End constraint: Connects the end side of a view.

For example:

app:layout_constraintTop_toTopOf="parent"

This connects the top of a view to the top of its parent.

Understanding Bias

Bias controls a view's position between two opposing constraints.

For example:

app:layout_constraintHorizontal_bias="0.3"

This moves the view toward the start side of the available constrained space.

The default horizontal and vertical bias is 0.5, which places the view in the middle of the available space.

Understanding Chains

A chain connects multiple views together using constraints.

Chains are useful when you want to arrange multiple components horizontally or vertically and control how their available space is distributed.

For example, you can create a horizontal chain of three buttons and distribute them evenly.

7. How to Connect XML Layout with Java

Creating a layout is only one part of Android development. We also need Java code to interact with its components.

Let's understand how to access XML views from MainActivity.java.

XML Code

Create or update activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <EditText
        android:id="@+id/etName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name" />

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp" />

</LinearLayout>

Java Code

Open MainActivity.java:

package com.example.myapp;

import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    EditText etName;
    Button btnSubmit;
    TextView tvResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        etName = findViewById(R.id.etName);
        btnSubmit = findViewById(R.id.btnSubmit);
        tvResult = findViewById(R.id.tvResult);

        btnSubmit.setOnClickListener(v -> {
            String name = etName.getText().toString();

            tvResult.setText("Welcome, " + name);
        });
    }
}

Understanding the Java Code:

setContentView(R.layout.activity_main);

This loads the activity_main.xml layout on the screen.

findViewById(R.id.etName);

This finds the EditText using its XML ID.

setOnClickListener()

This runs code when the user clicks the button.

getText().toString()

This reads the text entered by the user.

tvResult.setText()

This displays the result inside the TextView.

Important: The package name and AndroidX dependencies must match your actual project configuration. The example uses AppCompatActivity, so the AppCompat dependency must be available.

8. How to Work with XML in Android Studio

Android Studio provides different ways to edit XML layouts.

Code View: Write and edit XML directly.

Design View: Arrange components using the visual editor.

Split View: View XML code and the design preview together.

For beginners, Split View is especially useful because you can see how XML changes affect the screen.

Steps to Create an XML Layout

1. Open your Android Studio project.

2. Navigate to app > res > layout.

3. Open activity_main.xml.

4. Select Code, Design, or Split View.

5. Add a layout such as LinearLayout or ConstraintLayout.

6. Add UI components such as TextView, EditText, and Button.

7. Give components unique IDs when you need to access them from Java.

8. Run the application and check the screen.

9. Common XML Layout Mistakes

Mistake 1: Missing XML namespace

If the Android namespace is missing, Android attributes may not work correctly.

Use:

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

Mistake 2: Using the wrong layout dimensions

Every view should have valid layout_width and layout_height values.

Mistake 3: Incorrect view ID

If Java references an ID that does not exist in XML, the project may show an error.

Mistake 4: Missing constraints

In ConstraintLayout, a view needs sufficient constraints to determine its position. Missing constraints may cause unexpected placement.

Mistake 5: Using RelativeLayout for every screen

RelativeLayout can work, but ConstraintLayout is generally more suitable for complex modern layouts.

Mistake 6: Confusing padding and margin

Padding creates space inside a view's boundary. Margin creates space outside it.

10. Practice Tasks

Try these tasks yourself:

Task 1: Create a vertical LinearLayout with a heading, two EditText fields, and one Login button.

Task 2: Create a horizontal LinearLayout containing three buttons.

Task 3: Create a RelativeLayout with a heading at the top and a button below it.

Task 4: Create a ConstraintLayout with a centered heading and a button below it.

Task 5: Connect an EditText, Button, and TextView with Java. When the user clicks the button, display the entered name.

These tasks will help you understand how XML layouts work in real Android applications.

11. Conclusion

XML layouts are an important part of Android application development. They define how UI components appear and how they are arranged on the screen.

In this tutorial, we learned:

• What XML layouts are.

• How match_parent and wrap_content work.

• The difference between dp and sp.

• How to use LinearLayout.

• How RelativeLayout positions views.

• How ConstraintLayout uses constraints.

• How to connect XML components with Java using findViewById.

• How to edit layouts in Android Studio.

Remember: LinearLayout is useful for simple vertical and horizontal arrangements, RelativeLayout is useful for understanding older projects, and ConstraintLayout is a flexible choice for complex modern screens.

12. Frequently Asked Questions (FAQs)

Q1. What is an XML layout in Android?

An XML layout defines the structure and appearance of an Android application's user interface.

Q2. What is LinearLayout?

LinearLayout arranges its child components vertically or horizontally.

Q3. What is RelativeLayout?

RelativeLayout positions components relative to the parent layout or other views.

Q4. What is ConstraintLayout?

ConstraintLayout positions views using constraints connected to other views or the parent.

Q5. Which layout is best for modern Android applications?

ConstraintLayout is a flexible choice for complex XML-based screen designs. LinearLayout is also useful for simpler arrangements.

Q6. What is the difference between match_parent and wrap_content?

match_parent uses the available space provided by the parent, while wrap_content uses the space required by the view's content.

Q7. What is the difference between dp and sp?

dp is generally used for dimensions, while sp is generally used for text size.

Q8. How can Java access an XML component?

Java can access a view using findViewById() and the ID defined in the XML file.

13. SEO Details

SEO Title: XML Layouts in Android Studio: LinearLayout, RelativeLayout and ConstraintLayout

Meta Description: Learn Android XML layouts with practical examples of LinearLayout, RelativeLayout and ConstraintLayout. Understand UI components, constraints, dp, sp and Java integration.

Focus Keyword: XML Layouts in Android Studio

Related Keywords:

• Android LinearLayout Tutorial

• Android RelativeLayout Example

• Android ConstraintLayout Tutorial

• Android XML UI Design

• Android Studio Java Tutorial

• Android Layout Attributes

Suggested URL Slug: android-xml-layouts-linearlayout-relativelayout-constraintlayout