Settings Screen UI in Android Studio XML & Java

In this article, we will learn how to Implement the Settings Screen UI in Android Studio. This settings screen is used to manage app settings that we usually design in almost every App. At the end of this tutorial, we will develop the following screen.

Settings Screen UI in Android

Activity Main XML

Copy and paste the following code in the activity_main.xml file. This view created by using the Constraint Layout. In the XML file, we have TextView, ImageView, and View. By using all these elements we have created the Setting Screen. In the drawable, we paste the following images which are required for the setting screen.

<?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:background="@color/white">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_settings_header"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="91dp"
            android:layout_height="49dp"
            android:layout_marginTop="@dimen/dp_10"
            android:gravity="center"
            android:text="Settings"
            android:textColor="@color/black"
            android:textSize="22sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:layout_marginStart="@dimen/dp_20"
            android:layout_marginEnd="@dimen/dp_20"
            android:background="@color/teal_700"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_edit_my_profile"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_settings_header">

        <ImageView
            android:id="@+id/iv_edit_my_profile"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/settings"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_edit_my_profile"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="edit_my_profile"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_edit_my_profile"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_edit_my_profile_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_edit_my_profile"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_change_password"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_edit_my_profile">

        <ImageView
            android:id="@+id/iv_change_password"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/key"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_change_password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="change_password"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_change_password"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_change_password_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_change_password"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_notifications"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_change_password">

        <ImageView
            android:id="@+id/iv_notifications"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/bell"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_notifications"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="notifications"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_notifications"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_notifications_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_notifications"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_contact_us"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_notifications">

        <ImageView
            android:id="@+id/iv_contact_us"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/email"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_contact_us"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="contact_us"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_contact_us"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_contact_us_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_contact_us"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_terms_and_conditions"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_contact_us">

        <ImageView
            android:id="@+id/iv_terms_and_conditions"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/clipboard"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_terms_and_conditions"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="terms_conditions"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_terms_and_conditions"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_terms_and_conditions_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_terms_and_conditions"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_privacy_policy"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_terms_and_conditions">

        <ImageView
            android:id="@+id/iv_privacy_policy"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/verified"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_privacy_policy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="privacy_policy"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_privacy_policy"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_privacy_policy_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="30dp"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/tv_privacy_policy"
            android:layout_marginRight="30dp" />


    </androidx.constraintlayout.widget.ConstraintLayout>


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cl_sign_out"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:visibility="visible"
        app:layout_constraintTop_toBottomOf="@+id/cl_privacy_policy">

        <ImageView
            android:id="@+id/iv_sign_out"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="40dp"
            android:padding="5dp"
            android:src="@drawable/logout"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="40dp" />

        <TextView
            android:id="@+id/tv_sign_out"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dp_20"
            android:text="sign_out"
            android:textColor="@color/black"
            android:textSize="@dimen/sp_17"
            android:textStyle="normal"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toEndOf="@+id/iv_sign_out"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginLeft="@dimen/dp_20" />

        <ImageView
            android:id="@+id/iv_sign_out_view"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginEnd="40dp"
            android:padding="5dp"
            android:src="@drawable/next"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginRight="40dp" />

        <View
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_marginEnd="@dimen/dp_20"
            android:layout_marginStart="@dimen/dp_20"
            android:background="#CCD1D1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity Java

Following is the Java code for the MainActivity.Java. In this code, we just initialized our views and hooked OnClickListener to handle the click events. For example, when the user presses the notification button OnClick method inside cl_notifications.setOnClickListener() gets called. Here inside the OnClickListeners you can write your own logic.

package com.example.settingfragment;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {

    View inflatedView;

    private TextView tv_back;
    private View cl_sign_out, cl_privacy_policy, cl_terms_and_conditions,
            cl_contact_us, cl_notifications, cl_change_password, cl_edit_my_profile;


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

        findViews();
        initViews();
        initClickListeners();
    }

    private void findViews() {


        cl_sign_out = inflatedView.findViewById(R.id.cl_sign_out);
        cl_privacy_policy = inflatedView.findViewById(R.id.cl_privacy_policy);
        cl_terms_and_conditions = inflatedView.findViewById(R.id.cl_terms_and_conditions);
        cl_contact_us = inflatedView.findViewById(R.id.cl_contact_us);
        cl_notifications = inflatedView.findViewById(R.id.cl_notifications);
        cl_change_password = inflatedView.findViewById(R.id.cl_change_password);
        cl_edit_my_profile = inflatedView.findViewById(R.id.cl_edit_my_profile);

    }

    private void initViews() {


    }

    private void initClickListeners() {

        tv_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });

        cl_sign_out.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });
        cl_privacy_policy.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });
        cl_terms_and_conditions.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });
        cl_contact_us.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });
        cl_notifications.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });
        cl_change_password.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //add your here
            }
        });

        cl_edit_my_profile.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               //add your here
            }
        });

    }


}

In this tutorial, we have learned how to Implement the Settings Screen UI in Android Studio.

If you have any questions or suggestions, feel free to ask in the comments section below.

Next Article

1. How to Load Multiple Images From URL in Android Using Picasso Kotlin
2. How to Save And Retrieve Class Object From Shared Preferences Using Gson Library in Kotlin Android Studio

Please share this post:
Posts created 41

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: