Free android settings / profile design with dark mode (Source code included)

Published by Kapil Mohan on June 2, 2019June 2, 2019

Free Clean ui settings inspiration with android studio compatible source code for your next project. Uses easy to use memory efficient code.

Download Source Code

Download Sample App

Preview
Project Structure

settings ui thumbnail — Android settings app clean ui design with source code

The project includes all base design and resources. For better results, use icons from f laticon.com . It also includes Java code for switching dark and light theme.

we’ve used full filled images of dark icons and changed its color to white. Random background colors are given for circles.

Manifest.xml

Usually the settings page needs to be inside a fragment for using with bottom navigation, but we’ve used an empty activity for this illustration.

Start by adding an empty activity from new>activity > empty activity.
and set its theme to NoActionbar

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.appsnipp.mysettings">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".SettingsActivity"
            android:theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

gradle (Module:app)

Uses minsdk 17 and target sdk 28 (required for always displaying label in bottomnavigationbar).

included ‘de.hdodenhof:circleimageview:3.0.0’ library for user profile image

gradle (Module:app)

Uses minsdk 17 and target sdk 28 (required for always displaying label in bottomnavigationbar).

included ‘de.hdodenhof:circleimageview:3.0.0’ library for circular topics image

SettingsActivity.java

Create a function named setDarkModeSwitch() for setting toggle switch listener and changing dark mode theme. Currently we’ve not set Default dark mode, for using same mode as device.

    private void setDarkModeSwitch(){
        darkModeSwitch = findViewById(R.id.darkModeSwitch);
        darkModeSwitch.setChecked(new DarkModePrefManager(this).isNightMode());
        darkModeSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                DarkModePrefManager darkModePrefManager = new DarkModePrefManager(SettingsActivity.this);
                darkModePrefManager.setDarkMode(!darkModePrefManager.isNightMode());
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                recreate();
            }
        });
    }

Complete code for SettingsActivity.java

package com.appsnipp.mysettings;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.app.AppCompatDelegate;
import android.widget.CompoundButton;
import android.widget.Switch;

public class SettingsActivity extends AppCompatActivity {
    private Switch darkModeSwitch;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        if(new DarkModePrefManager(this).isNightMode()){
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
        }

        setContentView(R.layout.activity_settings);
        //function for enabling dark mode
        setDarkModeSwitch();
    }
    private void setDarkModeSwitch(){
        darkModeSwitch = findViewById(R.id.darkModeSwitch);
        darkModeSwitch.setChecked(new DarkModePrefManager(this).isNightMode());
        darkModeSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                DarkModePrefManager darkModePrefManager = new DarkModePrefManager(SettingsActivity.this);
                darkModePrefManager.setDarkMode(!darkModePrefManager.isNightMode());
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                recreate();
            }
        });
    }
}

DarkModePrefManager.java

sharedPreference for storing light and dark mode preference.

package com.appsnipp.mysettings;

/**
 * Created by kapil on 20/01/17.
 */
import android.content.Context;
import android.content.SharedPreferences;


public class DarkModePrefManager {
    SharedPreferences pref;
    SharedPreferences.Editor editor;
    Context _context;

    // shared pref mode
    int PRIVATE_MODE = 0;

    // Shared preferences file name
    private static final String PREF_NAME = "education-dark-mode";

    private static final String IS_NIGHT_MODE = "IsNightMode";


    public DarkModePrefManager(Context context) {
        this._context = context;
        pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
        editor = pref.edit();
    }

    public void setDarkMode(boolean isFirstTime) {
        editor.putBoolean(IS_NIGHT_MODE, isFirstTime);
        editor.commit();
    }

    public boolean isNightMode() {
        return pref.getBoolean(IS_NIGHT_MODE, true);
    }

}

res files

drawables

contains drawables and drawables-night . Copy the contents to their respective folder.

drawables Download

Layout

activity_settings.xml

we are using the drawableLeft and drawableRight property of textViews for setting the settings and more icon. Additionally drawablePadding property is used for setting spacing between all these elements and gravity as center for vertically centering content.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    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"
    tools:context="com.appsnipp.mysettings.SettingsActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/contentBodyColor">

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

        <TextView
            style="@style/viewParent.headerText"
            android:text="Settings" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/profileCircleImageView"
                android:layout_width="60dp"
                android:layout_height="60dp"
                app:civ_border_width="2dp"
                app:civ_border_color="@color/imageBorderColor"
                android:src="@drawable/user_dp"
                android:layout_marginTop="15dp"
                android:layout_marginRight="10dp"/>

            <TextView
                android:id="@+id/usernameTextView"
                style="@style/viewParent.headerText"
                android:text="Kapil Mohan"
                android:textSize="18sp"
                android:layout_toRightOf="@id/profileCircleImageView"
                android:layout_marginTop="20dp"/>

            <TextView
                style="@style/viewParent.headerText"
                android:text="Edit personal details"
                android:textSize="16sp"
                android:textColor="#5D5C5C"
                android:layout_below="@id/usernameTextView"
                android:layout_toRightOf="@id/profileCircleImageView"/>

            <ImageView
                style="@style/viewParent"
                android:src="@drawable/ic_more"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"/>

        </RelativeLayout>

        <Switch
            android:id="@+id/darkModeSwitch"
            style="@style/settingsText"
            android:drawableLeft="@drawable/ic_dark_mode"
            android:text="Dark Mode" />

        <TextView
            style="@style/viewParent.headerText.settingsMiniTitle"
            android:text="Profile"/>

        <TextView
            style="@style/viewParent.headerText.settingsTextIcon"
            android:drawableLeft="@drawable/ic_edit_profile"
            android:text="Edit Profile" />

        <TextView
            style="@style/viewParent.headerText.settingsTextIcon"
            android:drawableLeft="@drawable/ic_edit_password"
            android:layout_marginTop="10dp"
            android:text="Change Password" />

        <TextView
            style="@style/viewParent.headerText.settingsMiniTitle"
            android:text="Notifications"/>

        <Switch
            style="@style/settingsText"
            android:checked="true"
            android:drawableLeft="@drawable/ic_notifications"
            android:text="Notifications" />

        <TextView
            style="@style/viewParent.headerText.settingsMiniTitle"
            android:text="Regional"/>

        <TextView
            style="@style/viewParent.headerText.settingsTextIcon"
            android:drawableLeft="@drawable/ic_languages"
            android:text="Language" />

        <TextView
            style="@style/viewParent.headerText.settingsTextIcon"
            android:drawableLeft="@drawable/ic_logout"
            android:text="Logout" />


        <TextView
            style="@style/viewParent.headerText.settingsMiniTitle"
            android:text="App ver 2.0.1"
            android:textAlignment="center"/>

    </LinearLayout>
</ScrollView>

Values

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#11CFC5</color>
    <color name="colorPrimaryDark">#000</color>
    <color name="colorAccent">#FF402D</color>

    <!--colors for light mode-->
    <color name="contentBodyColor">#FCFCFC</color>
    <color name="contentTextColor">#020000</color>
    <color name="imageBorderColor">#E01E7A</color>
    <color name="miniTitle">#2A2E43</color>
</resources>

colors.xml(night)

right click on values folder > new > value resource file
give name as colors
select night qualifier followed by >> button and press ok

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--colors for dark mode-->
    <color name="contentBodyColor">#000</color>
    <color name="contentTextColor">#fff</color>
    <color name="miniTitle">#fff</color>
</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="headerTextSize">25sp</dimen>

</resources>

strings.xml

we’ve not extracted string resources.

<resources>
    <string name="app_name">My Settings</string>
</resources>

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <!--styles for education app-->
    <style name="viewParent">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="viewParent.headerText">
        <item name="android:textColor">@color/contentTextColor</item>
        <item name="android:textSize">@dimen/headerTextSize</item>
        <item name="android:textStyle">bold</item>
    </style>

    <style name="viewParent.headerText.settingsMiniTitle">
        <item name="android:textColor">#5D5C5C</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:textSize">15sp</item>
        <item name="android:layout_marginTop">20dp</item>
    </style>

    <style name="settingsText" parent="viewParent.headerText.settingsMiniTitle">
        <item name="android:textColor">@color/miniTitle</item>
        <item name="android:layout_gravity">center_vertical</item>
        <item name="android:gravity">center_vertical</item>
        <item name="android:drawablePadding">20dp</item>
    </style>
    <style name="viewParent.headerText.settingsTextIcon" parent="settingsText">
        <item name="android:drawableRight">@drawable/ic_more</item>
    </style>

</resources>

If you like this post, please leave your suggestions and comments below

Did you know?
your comments can motivate us to create wonders.

NOTE:- source code includes XD Resources also!

We are planning to start complete tutorial on designing, if you are interested please leave a comment. If we receive enough comments, we will start rolling out designing tutorials.

Download Source Code

Download Sample App