Android-UI Designs

Layouts

Constraint Layout: A flexible layout called ConstraintLayout enables you to design complicated and responsive user interfaces. Constraints are used to specify the size and placement of views in relation to one another.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Constraint layout!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Relative Layout: You can place views relative to one another or relative to the parent container using RelativeLayout. It provides easy placement choices.

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

    <TextView
        android:layout_width="wrap_content"
        android:id="@+id/text1"
        android:layout_height="wrap_content"
        android:text="This is Linear layout1!"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_below="@+id/text1"
        android:layout_height="wrap_content"
        android:text="This is Linear layout2!"/>

</RelativeLayout>

Linear Layout: Views are organized linearly via LinearLayout, either horizontally or vertically. In order to divide available space fairly, it supports weighing.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Linear layout1!"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Linear layout2!"/>

</LinearLayout>

Frame Layout: A single item can be seen at a time via the FrameLayout. The last view added takes up the entirety of the layout and is placed on top of the previous views.

This is the code for activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frameLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click here"
        android:layout_gravity="center" />

</FrameLayout>

This is the code for MainActivity.java

package com.example.layouts;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Handle button click event
            }
        });
    }
}

GridLayout:  the GridLayout layout manager organizes views into rows and columns much like a grid. When designing a grid-based user interface with views arranged in a tabular layout, it is helpful.

This is the code for activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rowCount="3"
    android:columnCount="2"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text1"
        android:text="Text 1"
        android:layout_row="0"
        android:layout_column="0" />
    <TextView
        android:id="@+id/text2"
        android:text="Text 2"
        android:layout_row="0"
        android:layout_column="1" />

    <TextView
        android:id="@+id/text3"
        android:text="Text 3"
        android:layout_row="1"
        android:layout_column="0" />

    <Button
        android:id="@+id/button"
        android:text="Button"
        android:layout_row="1"
        android:layout_column="1"/>

</GridLayout>

This is the code for MainActivity.java

package com.example.layouts;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GridLayout gridLayout = findViewById(R.id.gridLayout);

        TextView textView1 = findViewById(R.id.text1);
        TextView textView2 = findViewById(R.id.text2);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(view -> {
            // Perform action for button1
        });
    }
}