Midrib Tech

 How to implement Dark Theme and Light Theme in Android.

 

This functionality is amazing for night time user mobile phones. This Dark theme mostly people like it. And use it at night time. The theme is not dangerous for human eyes.

Now I am implementing you gays. How to implement Dark Theme in mobile application programmatically.

Add in res>value>color (Light)


<color name="colorPrimary">#005826</color>
    <color name="colorPrimaryDark">#005826</color>
    <color name="colorAccent">#D81B60</color>  <!--D81B60--><!--ffffff-->
    <color name="color_green">#00824d</color>
    <color name="colorBackground">#eceef3</color>
    <color name="colorWhite">#FFFFFF</color>
    <color name="colorLightGray">#E2E2E2</color>
   <color name="background">#EFEFEF</color>
    <color name="placeholder_grey">#AAADC4</color>
    <color name="placeholder_grey_20">#33AAADC4</color>
    <color name="colorDialogue_bg">#FF4081</color>
    <color name="colorDialogue_bg1">#FFA9A7A8</color>
    <color name="app_new_header_color_suggested">#005826</color> <!-- 003F1A-->
    <color name="app_main_color">@color/app_new_header_color_suggested</color>
     <!--005826-->
    <color name="greenLighter">#23d071</color>
    <!---dots active colors -->
    <color name="dot_active">#000000</color>

    <!--dots inactive colors -->
    <color name="dot_inactive">#cccccc</color>
    <color name="red">#ed1e26</color>
    <color name="green">#1B5E20</color>
    <color name="blue">#2196F3</color>
    <color name="light_black">#8F8F8F</color>
    <color name="correct_option_color">#005826</color>
    <color name="colorGreen_A400">#00E676</color>
    <color name="colorGreen_900">#1B5E20</color>

    <!--Progressbar color-->
    <color name="colorDarkRed">#FF5733</color>
    <color name="colorDarkBlue">#3633FF</color>
    <color name="colorDarkYellow">#FFFF33</color>
    <color name="colorDarkGreen">#49FF33</color>
    <color name="colorDarkPurple">#F933FF</color>
    <color name="white_transparent">#fafafa</color>



    <!-- green -->

    <color name="md_green_50">#E8F5E9</color>
    <color name="md_green_100">#C8E6C9</color>
    <color name="md_green_200">#A5D6A7</color>
    <color name="md_green_300">#81C784</color>
    <color name="md_green_400">#66BB6A</color>
    <color name="md_green_500">#4CAF50</color>
    <color name="md_green_600">#43A047</color>
    <color name="md_green_700">#388E3C</color>
    <color name="md_green_800">#2E7D32</color>
    <color name="md_green_900">#1B5E20</color>
    <color name="md_green_A100">#B9F6CA</color>
    <color name="md_green_A200">#69F0AE</color>
    <color name="md_green_A400">#00E676</color>
    <color name="md_green_A700">#00C853</color>


    <!--light green-->

    <color name="md_light_green_50">#F1F8E9</color>
    <color name="md_light_green_100">#C8EDC9</color>
    <color name="md_light_green_200">#C5E1A5</color>
   <color name="md_light_green_300">#AED581</color>
    <color name="md_light_green_400">#9CCC65</color>
    <color name="md_light_green_500">#8BC34A</color>
    <color name="md_light_green_600">#7CB342</color>
    <color name="md_light_green_700">#689F38</color>
    <color name="md_light_green_800">#558B2F</color>
    <color name="md_light_green_900">#33691E</color>
    <color name="md_light_green_A100">#CCFF90</color>
    <color name="md_light_green_A200">#B2FF59</color>
    <color name="md_light_green_A400">#76FF03</color>
   <color name="md_light_green_A700">#64DD17</color>
    <color name="fui_transparent">#00000000</color>
</resources>

Add in res>value>string (xml)

<string-array name="theme_options">

    <item>Light</item>
    <item>Dark</item>

</string-array>

Add in res>value>color (Night)

<resources xmlns:tools="http://schemas.android.com/tools">

   <color name="colorPrimary">#333333</color>
   <color name="colorPrimaryDark">#333333</color>
   <color name="colorAccent">#D81B60</color>
    <color name="titleTextColor" tools:ignore="MissingDefaultResource">#EFEFEF</color>
    <color name="iconTintDark" tools:ignore="MissingDefaultResource">#FFFFFF</color>

    <!--App Colors-->

    <color name="greyBackground" tools:ignore="MissingDefaultResource">#333333</color>
    <color name="bottomNavColor" tools:ignore="MissingDefaultResource">#333333</color>
    <color name="dividerColor">#666666</color>
    <color name="cardBackground" tools:ignore="MissingDefaultResource">#000000</color>
    <color name="windowBackground">#111111</color>



</resources>

Add in res>value>style (Light)

<resources>

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
       <item name="textInputStyle">@style/DefaultTextField</item>
       <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="buttonBarButtonStyle">@style/ButtonColor</item>
        <item name="android:textColor">@color/app_new_header_color_suggested</item>


    </style>

    <style name="splashScreenTheme" parent="Theme.AppCompat.Light.NoActionBar"/>

    <style name="AppThemeButton" parent="Theme.MaterialComponents.Light.DarkActionBar">

        <!-- Customize your theme here. --></style>
    <style name="ButtonStlye123" parent="android:style/Widget.Button">

        <item name="android:textSize">19dp</item>
        <item name="android:layout_margin">8dp</item>
        <item name="android:padding">8dp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@color/accent</item>

    </style>

    <!-- Dark theme here. -->

    <style name="DarkTheme" parent="Theme.AppCompat.DayNight">
        <!-- Customize your theme here. -->
        <item name="colorAccent">@android:color/white</item>

    </style>

    <style name="DefaultTextField" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
        <item name="boxBackgroundColor">@android:color/white</item>
    </style>

    <style name="AlertDialogCustom" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
       <!-- Used for the buttons -->
        <item name="buttonBarNegativeButtonStyle">@style/DialogButtonStyle</item>
        <item name="buttonBarPositiveButtonStyle">@style/DialogButtonStyle</item>

    </style>

    <style name="DialogButtonStyle" parent="Widget.MaterialComponents.Button.TextButton.Dialog">

        <item name="android:textColor">#1976D2</item>
        <item name="background">@color/fui_transparent</item>
    </style>

</resources>

Add in res>value>style (Night)

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="textInputStyle">@style/DefaultTextField</item>
        <item name="android:windowTranslucentNavigation">false</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:fontFamily">sans-serif</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="buttonBarButtonStyle">@style/ButtonColor</item>
        <item name="android:textColor">@color/white</item>
        <item name="drawerArrowStyle">@style/DrawerIcon</item>

    </style>



    <style name="TextAppearance.App.TextInputLayout" parent="@android:style/TextAppearance">
        <!-- Customize your theme here. -->
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">20sp</item>

    </style>

    <style name="DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/iconTintDark</item>
    </style>

    <style name="ButtonColor" parent="Widget.MaterialComponents.Button">
        <item name="android:textColor">#FFFFFF</item>
        <item name="iconTint">#FFFFFF</item>
    </style>
    <style name="GreenText" parent="TextAppearance.AppCompat">
       <item name="android:textColor">#00FF00</item>
        <item name="android:fontFamily">sans-serif</item>
    </style>

    <style name="ButtonStlye123" parent="android:style/Widget.Button">

        <item name="android:textSize">19dp</item>
        <item name="android:layout_margin">8dp</item>
        <item name="android:padding">8dp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:background">@color/accent</item>

    </style>

</resources>

Create MysharePreferences Class

public class MysharePreferences  {

    Context context;
     public MysharePreferences() {
    }

    public MysharePreferences(Context context) {

        this.context = context;

    }

    public static String LOGIN_FLAG = "IsLogin";
    public static final String MyPREFERENCES = "KhanqaAzadai";
    public static SharedPreferences.Editor editor;
    private SharedPreferences sharedpreferences;

    public Boolean getStoragePermission(Context ctx){

        SharedPreferences prfs = ctx.getSharedPreferences(MyPREFERENCES, Context.MODE_MULTI_PROCESS);
        Boolean link=prfs.getBoolean("storageStatus",false);
        return link;

    }



    public void saveStoragePermission(Context context, boolean status){

        sharedpreferences = context.getSharedPreferences(MyPREFERENCES, Context.MODE_MULTI_PROCESS);
        editor = sharedpreferences.edit();
        editor.putBoolean("storageStatus", status);
        editor.commit();

    }

    public int getvalue(Context ctx){

        SharedPreferences prfs = ctx.getSharedPreferences(MyPREFERENCES, Context.MODE_MULTI_PROCESS);

        int link=prfs.getInt("value",0);

        return link;

    }

    public void save_value(Context context, int value){

        sharedpreferences = context.getSharedPreferences(MyPREFERENCES, Context.MODE_MULTI_PROCESS);
        editor = sharedpreferences.edit();
        editor.putInt("value", value);
        editor.commit();



    }

}

Now Create Setting Activity (Xml file code)

<RelativeLayout
    android:id="@+id/nightMode"
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:src="@drawable/theme_day_night"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:textSize="16dp"
            android:layout_marginStart="10dp"
            android:text="@string/theme_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

    </LinearLayout>
</RelativeLayout>

Now Open Setting Activity Java Class

public class SettingFragment extends Fragment {

MysharePreferences mysharePreferences;

private RelativeLayout nightMode;

@Override

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate ( savedInstanceState );
    setContentView (R.layout.setting_activity);

   nightMode = findViewById(R.id.nightMode);

   mysharePreferences = new MysharePreferences(settingFragment.this);

    nightMode.setOnClickListener(view -> {

    showNighModeDialog();

});

}

private void showNighModeDialog(){

        //int selected = sharedPreferences.getInt("dark_mode",0);

        int value = mysharePreferences.getvalue(getActivity());
        new AlertDialog.Builder(new ContextThemeWrapper(getActivity(),R.style.AlertDialogCustom))
                .setSingleChoiceItems(getResources().getStringArray(R.array.theme_options), value, null)
                .setPositiveButton(R.string.dialog_ok_btn, (dialog, whichButton) -> {

                    dialog.dismiss();
                    int selectedPosition = ((AlertDialog)dialog).getListView().getCheckedItemPosition();
                    switch (selectedPosition){
                        case 1:
                            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);

                            break;

                        case 2:
                            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);

                            break;

                        default:
                            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

                            break;
                    }

                    mysharePreferences.save_value(getActivity(),selectedPosition);
                    getActivity().recreate();

                })

                .show();
    }

}