UI Tutorial Google Phone App V29 UI Cloning Full source Code and Tutorial With dark and light mode part 2


In the last part we create the UI with just the light mode but in this part, we are going to add dark and light mode which can be same as the phone app have so let's do that...



Watch this video if you want the visual experience 





Open the project and now create a new activity call as Settings where we ate adding a Switch to change mode.

Open the XML file of the settings activity and paste this code.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:background="?attr/backgroundColorApp"
    android:layout_height="match_parent"
    tools:context=".Settings">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:text="Turn on dark mode"
        android:textColor="?attr/toolbarTextColor"
        app:layout_constraintBottom_toTopOf="@+id/switchButton"
        app:layout_constraintEnd_toEndOf="@+id/switchButton"
        app:layout_constraintHorizontal_bias="0.506"
        app:layout_constraintStart_toStartOf="@+id/switchButton" />

    <android.support.v7.widget.SwitchCompat
        android:id="@+id/switchButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
Now create a new java file and name it as SaveTheamSatate.java and paste this code below.

import android.content.Context;
import android.content.SharedPreferences;

public class SaveTheamSatate {

    SharedPreferences mySharedPref;

    public  SaveTheamSatate(Context context){
        mySharedPref = context.getSharedPreferences("filename",Context.MODE_PRIVATE);
    }

    public void setNightModeState(Boolean state){
        SharedPreferences.Editor editor = mySharedPref.edit();
        editor.putBoolean("Nightmode",state);
        editor.apply();
    }

    public Boolean looadNightModeState(){
        Boolean state = mySharedPref.getBoolean("Nightmode",false);
        return state;
    }
}
Now open the Settings.java file and add this code...

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.SwitchCompat;
import android.widget.CompoundButton;

public class Settings extends AppCompatActivity {

    private SwitchCompat changeSettings;
    private SaveTheamSatate saveTheamSatate;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        saveTheamSatate = new SaveTheamSatate(this);
        if(saveTheamSatate.looadNightModeState()){
            setTheme(R.style.NightMode);
        }else {
            setTheme(R.style.DayMode);
        }
        setContentView(R.layout.activity_settings);

        changeSettings = findViewById(R.id.switchButton);

        if(saveTheamSatate.looadNightModeState()){
            changeSettings.setChecked(true);
        }

        changeSettings.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked){
                    saveTheamSatate.setNightModeState(true);
                    restartApp();
                }else {
                    saveTheamSatate.setNightModeState(false);
                    restartApp();
                }
            }
        });
    }

    private void restartApp() {
        Intent i = new Intent(Settings.this,MainActivity.class);
        startActivity(i);
        finish();
    }
}
Ok now create a new XML file called as attrs.xml under the values folder. and paste this code...



<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ds">
        <attr name="backgroundColorApp" format="color"/>
        <attr name="toolbarColor" format="color"/>
        <attr name="toolbarTextColor" format="color"/>
        <attr name="bottomNavIconColor" format="color"/>
    </declare-styleable>
</resources>
Now open your styles.xml file and paste this styling codes...

 <!-- Day/light mode style -->
    <style name="DayMode" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#FFFFFF</item>
        <item name="colorPrimaryDark">#FFFFFF</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar" tools:targetApi="23">true</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="27">true</item>
        <item name="backgroundColorApp">#FFFFFF</item>
        <item name="toolbarColor">#FFFFFF</item>
        <item name="toolbarTextColor">#80868B</item>
        <item name="bottomNavIconColor">#5F6368</item>
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
        <item name="actionBarTheme">@style/ThemeOverlay.AppCompat.Light</item>
    </style>

    <!-- night/dark mode style -->
    <style name="NightMode" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#202124</item>
        <item name="colorPrimaryDark">#202124</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowLightStatusBar" tools:targetApi="23">false</item>
        <item name="android:windowLightNavigationBar" tools:targetApi="27">false</item>
        <item name="backgroundColorApp">#202124</item>
        <item name="toolbarColor">#313235</item>
        <item name="toolbarTextColor">#80868B</item>
        <item name="bottomNavIconColor">#BDC1C6</item>
        <item name="popupTheme">@style/ThemeOverlay.AppCompat.Dark</item>
        <item name="actionBarTheme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
    </style>


You need to change some other codes which important and I can not explain it here for that you need to watch the video so kindly watch that I hope you can understand if you can not then you can ask me in the comment... and all the codes are available on GitHub.




Watch this video if you want the visual experience 



Comments