Settings - Android Material UI/UX

App settings let users indicate preferences for how an app should behave.

App settings are located under the “Settings” label in your app’s navigation. Setting controls should capture user preferences. The settings shown should either affect most users or provide critical support to a minority of users.



Placement options :

  • Side navigation, 
  • Toolbar menu,
Settings components :
  • Labels, 
  • Secondary text, 
  • Switch or checkbox settings, 
  • Status.

In the layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:scrollbars="none"
    android:scrollingCache="true">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:paddingTop="15dp">

<!--
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="15dp"
            android:text="Settings"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
            android:textColor="@android:color/black"
            android:textStyle="bold" />
-->

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                >


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="center_vertical"
                    android:minHeight="60dp"
                    android:orientation="horizontal"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">


                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Select Language"

                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                        android:textColor="@color/grey_90"
                        android:textStyle="bold" />

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="English, US"

                        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                        android:textColor="@android:color/holo_red_light" />

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:minHeight="?attr/actionBarSize"
                    android:orientation="vertical"
                    android:padding="15dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/selectableItemBackground"
                        android:clickable="true"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="Real Time Mode"

                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_90"
                            android:textStyle="bold" />

                        <View
                            android:layout_width="10dp"
                            android:layout_height="wrap_content" />

                        <androidx.appcompat.widget.SwitchCompat
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:checked="true"
                            />
                        <!-- app:thumbTint="@color/switch_color_primary"-->


                        <View
                            android:layout_width="10dp"
                            android:layout_height="wrap_content" />

                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/middle_lorem_ipsum"

                        android:textAppearance="@style/TextAppearance.AppCompat.Small"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:minHeight="?attr/actionBarSize"
                    android:orientation="vertical"
                    android:padding="15dp">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="?attr/selectableItemBackground"
                        android:clickable="true"
                        android:gravity="center_vertical"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:text="App Auto Update"

                            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                            android:textColor="@color/grey_90"
                            android:textStyle="bold" />

                        <View
                            android:layout_width="10dp"
                            android:layout_height="wrap_content" />

                        <androidx.appcompat.widget.SwitchCompat
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:checked="true"
                            />
                        <!-- app:thumbTint="@color/switch_color_primary"-->

                        <View
                            android:layout_width="10dp"
                            android:layout_height="wrap_content" />

                    </LinearLayout>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Update your App in the background"

                        android:textAppearance="@style/TextAppearance.AppCompat.Small"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="10dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginStart="15dp"
                    android:layout_marginTop="15dp"
                    android:text="Push Notifications"

                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                    android:textColor="@color/grey_90"
                    android:textStyle="bold" />



                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="center_vertical"
                    android:minHeight="50dp"
                    android:orientation="horizontal"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Occasional promo"

                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_40" />

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                    <androidx.appcompat.widget.SwitchCompat
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        />
                    <!--   app:thumbTint="@color/switch_color_primary"-->

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="center_vertical"
                    android:minHeight="50dp"
                    android:orientation="horizontal"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Event &amp; Match"

                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_40" />

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                    <androidx.appcompat.widget.SwitchCompat
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        />
                    <!--   app:thumbTint="@color/switch_color_primary" -->

                    <View
                        android:layout_width="10dp"
                        android:layout_height="wrap_content" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="10dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingTop="10dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="10dp"
                    android:layout_marginLeft="15dp"
                    android:layout_marginStart="15dp"
                    android:layout_marginTop="15dp"
                    android:text="More"

                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                    android:textColor="@color/grey_90"
                    android:textStyle="bold" />


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="center_vertical"
                    android:minHeight="50dp"
                    android:orientation="horizontal"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="F A Q"

                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="center_vertical"
                    android:minHeight="50dp"
                    android:orientation="horizontal"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Privacy Policy"

                        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                        android:textColor="@color/grey_40" />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/grey_10" />

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="10dp" />

        </LinearLayout>
    </LinearLayout>
</androidx.core.widget.NestedScrollView>

..


Comments