Native Mobile App Development With Java

Dark Mode Light Mode Android Example Java

08-Oct-2024

Dark Mode Light Mode Android Example Java


Step 1/  For night mode Go to Values>Themes> themes.xml / Night and create styles



<style name="Screen_background">
<item name="android:background">#000000</item>
</style>

<style name="Screen_Text">
<item name="android:textColor">#FFFFFF</item>
</style>

<style name="Screen_button">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">@color/design_default_color_primary_dark</item>
</style>

<style name="Screen_surface">
<item name="android:background">#121212</item>
</style>


Step 2/  For Light Mode


<style name="Screen_background">
<item name="android:background">#FFFFFF</item>
</style>

<style name="Screen_Text">
<item name="android:textColor">#000000</item>
</style>

<style name="Screen_button">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">@color/design_default_color_primary</item>
</style>

<style name="Screen_surface">
<item name="android:background">#E7E6E6</item>
</style>


Step 3/  XML - Design


<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/main"
style="@style/Screen_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Switch
android:id="@+id/modeSwitcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />

<TextView
android:id="@+id/textView"
style="@style/Screen_Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Light &amp; Dark Mode"
android:textSize="24dp"
app:layout_constraintBottom_toTopOf="@+id/linearLayout"
app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
android:layout_marginBottom="70dp"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent">

<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />

<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />

<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />

<View
style="@style/Screen_surface"
android:layout_width="80dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />

</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>


Step 4/ MainActivity. Used SharedPreferances to save the mode for further 

package com.tutorialb.darkmodelightmode;

import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.widget.Switch;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.app.AppCompatDelegate;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;

public class MainActivity extends AppCompatActivity {

Switch aSwitch;
SharedPreferences sharedPreferences;
SharedPreferences.Editor editor;
boolean isNightMode;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

aSwitch = findViewById(R.id.modeSwitcher);
sharedPreferences = getSharedPreferences("MODE", Context.MODE_PRIVATE);
isNightMode = sharedPreferences.getBoolean("night", false);

if (isNightMode){
aSwitch.setChecked(true);
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}

aSwitch.setOnClickListener(v -> {
if (isNightMode){
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
editor = sharedPreferences.edit();
editor.putBoolean("night", false);
}

else {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
editor = sharedPreferences.edit();
editor.putBoolean("night", true);
}
editor.apply();
});


}
}


Step 5:  Output



Comments