App Settings - Android Material UI/UX

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

Usage 

Settings should be well-organized, predictable, and contain a manageable number of options.

In the layout UI:

<?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"
    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"
                android:paddingTop="10dp">


                <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="Recommended trips"
                        
                        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="true"
                       />
<!--  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="New Deals &amp; Rewards"
                        
                        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="true"
                        />
<!-- 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="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="Ask a Question"
                        
                        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="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