Créer une application multi-thèmes sous Android

Vous ennuyez-vous avec une application couleur?

Voulez-vous créer une application avec plus de deux modes de couleurs ?

Si oui, alors vous êtes au bon endroit.

L'application multi-thèmes fait que vos utilisateurs aiment le plus votre application car ils n'aiment peut-être pas la couleur par défaut que vous avez choisie, vous leur donnez donc la possibilité d'utiliser votre application avec leur couleur préférée. C'est une fonctionnalité puissante. Sachons comment l'appliquer.

1- Créez une palette de couleurs personnalisée pour que l'utilisateur choisisse une couleur parmi :

Créez votre mise en page color_palette.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
<TextView
            android:id="@+id/blueColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#3F51B5"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="blue"/>
<TextView
            android:id="@+id/blackColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#000"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="black"/>
<TextView
            android:id="@+id/redColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#F10000"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="red"/>
<TextView
            android:id="@+id/purpleColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#79008E"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="purple"/>
    </LinearLayout>
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
<TextView
            android:id="@+id/greenColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#009688"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="green"/>
<TextView
            android:id="@+id/greyColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#777777"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="grey"/>
<TextView
            android:id="@+id/orangeColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#FF5722"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="orange"/>
<TextView
            android:id="@+id/pinkColor"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="5dp"
            android:background="#E91E63"
            android:textColor="#00000000"
            android:gravity="center"
            android:text="pink"/>
    </LinearLayout>
</LinearLayout>

      

       Color Palette
      

<Button
    android:id="@+id/chooseColor"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="chooseColor"
    android:text="@string/choosecolor"
    android:textColor="?colorAccent" />

3- Ajoutez des thèmes dans le fichier styles.xml .

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
        <item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/darker_gray</item>
    </style>
<style name="Theme1" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#212121</item>
        <item name="colorPrimaryDark">#000000</item>
        <item name="colorAccent">#30E57E</item>
    </style>
<style name="Theme2" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#F10000</item>
        <item name="colorPrimaryDark">#6E0000</item>
        <item name="colorAccent">#F10000</item>
    </style>
<style name="Theme3" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#79008E</item>
        <item name="colorPrimaryDark">#5C006C</item>
        <item name="colorAccent">#79008E</item>
    </style>
<style name="Theme4" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#009688</item>
        <item name="colorPrimaryDark">#00655C</item>
        <item name="colorAccent">#009688</item>
    </style>
<style name="Theme5" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#777777</item>
        <item name="colorPrimaryDark">#303030</item>
        <item name="colorAccent">#777777</item>
    </style>
<style name="Theme6" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#FF5722</item>
        <item name="colorPrimaryDark">#D53300</item>
        <item name="colorAccent">#FF784D</item>
    </style>
<style name="Theme7" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#E91E63</item>
        <item name="colorPrimaryDark">#C80145</item>
        <item name="colorAccent">#FF3C7F</item>
    </style>
</resources>

J'ai créé une interface pour encapsuler mon dans une classe distincte.

interface ColorDialogCallback {
    void onChosen(String chosenColor);
}

import android.app.Dialog;
import android.content.Context;
import android.view.View;
import android.view.Window;
import android.widget.TextView;
public class DialogManager {
public static void showCustomAlertDialog(Context context, final ColorDialogCallback callback) {
        final Dialog dialog = new Dialog(context);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setContentView(R.layout.color_pallete);
final TextView blueColor = dialog.findViewById(R.id.blueColor);
        blueColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(blueColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView blackColor = dialog.findViewById(R.id.blackColor);
        blackColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(blackColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView redColor = dialog.findViewById(R.id.redColor);
        redColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(redColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView purpleColor = dialog.findViewById(R.id.purpleColor);
        purpleColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(purpleColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView greenColor = dialog.findViewById(R.id.greenColor);
        greenColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(greenColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView greyColor = dialog.findViewById(R.id.greyColor);
        greyColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(greyColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView orangeColor = dialog.findViewById(R.id.orangeColor);
        orangeColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(orangeColor.getText().toString());
                dialog.cancel();
            }
        });
final TextView pinkColor = dialog.findViewById(R.id.pinkColor);
        pinkColor.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                callback.onChosen(pinkColor.getText().toString());
                dialog.cancel();
            }
        });
dialog.show();
    }
}

import android.content.Context;
public class ThemeManager {
public static void setCustomizedThemes(Context context, String theme){
        switch (theme){
            case "blue":
                context.setTheme(R.style.AppTheme);
                break;
            case "black":
                context.setTheme(R.style.Theme1);
                break;
            case "red":
                context.setTheme(R.style.Theme2);
                break;
            case "purple":
                context.setTheme(R.style.Theme3);
                break;
            case "green":
                context.setTheme(R.style.Theme4);
                break;
            case "grey":
                context.setTheme(R.style.Theme5);
                break;
            case "orange":
                context.setTheme(R.style.Theme6);
                break;
            case "pink":
                context.setTheme(R.style.Theme7);
                break;
        }
    }
}

6- Stockez votre thème de couleur choisi dans vos préférences.

Créez la classe ThemeStorage qui parviendra à stocker les thèmes dans les préférences pour ne pas faire disparaître la couleur choisie après la fermeture de l'application.

import android.content.Context;
import android.content.SharedPreferences;
public class ThemeStorage {
public static void setThemeColor(Context context, String themeColor){
        SharedPreferences sharedpreferences = context.getSharedPreferences("theme_data", Context.MODE_PRIVATE);
        SharedPreferences.Editor editor = sharedpreferences.edit();
        editor.putString("theme", themeColor);
        editor.apply();
    }
public static String getThemeColor(Context context){
        SharedPreferences sharedpreferences = context.getSharedPreferences("theme_data", Context.MODE_PRIVATE);
        return sharedpreferences.getString("theme", "grey");
    }
}

Faisons en sorte que la magie opère

Nous appellerons la méthode showCustomAlertDialog() dans notre bouton créé et implémenterons l'interface ColorDialogCallback.

public void chooseColor(View view) {
        showCustomAlertDialog(this ,new ColorDialogCallback() {
            @Override
            public void onChosen(String chosenColor) {
if(chosenColor.equals(getThemeColor(getApplicationContext()))){
                    Toast.makeText(MainActivity.this, "Theme has already chosen", Toast.LENGTH_SHORT).show();
                    return;
                }
                Log.d(TAG, chosenColor);
                setThemeColor(getApplicationContext(), chosenColor);
                setCustomizedThemes(getApplicationContext(), chosenColor);
                recreate();
            }
        });
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setCustomizedThemes(this,getThemeColor(this));
    setContentView(R.layout.activity_main);
}

Félicitations, vous avez maintenant une application multi-thèmes . Vous pouvez l'implémenter comme vous le souhaitez dans votre application.

Pour les développeurs Kotlin, cette fonctionnalité est implémentée dans mon application Weather Forecast .

Bon codage !

Suivez-moi sur GitHub et LinkedIn