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.GetCodes-> https://github.com/MonsterTechnoGit/Google-Phone-UI-Cloning/
