Support multiple themes in an Android app
Published in
4 min readMar 16, 2021
Do you get bored with one color app?
Do you want to build an app with more than two colors mode?
If Yes, so you come to the right place.
Multi theme app makes your users love your app most as they may not like your chosen default color, so you give them a chance to use your app with their favorite color. It is a powerful feature. Let’s know how to apply it.
1- Create Custom Color Palette to make User choose a color from:
Create your color_palette.xml layout
<?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>
2- Create a button in the activity that you want to choose a color:
<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" />It is not essential to use a button. You can use your color palette in your menu or any view you want.
3- Add themes inside the styles.xml file.
<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>
4- Create Custom Dialog and link it to your Color Palette:
I have created an interface to encapsulate my in a separate class.
interface ColorDialogCallback {
void onChosen(String chosenColor);
}We will populate this interface inside our DialogManager class
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();
}
}
5- Create a method to handle multi-themes colors inside ThemeManager class
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;
}
}
}
Note: You can use Java Enums for hard-coded colors from HERE.
6- Store your chosen color theme in your preferences.
Create ThemeStorage class that will manage to store themes in preferences to not make the chosen color disappear after the app is closed.
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");
}}
7. Finally, pick up your favorite color and implement it through all your activities:
Let's make the magic works 😃
We will call showCustomAlertDialog() method inside our created button and implement ColorDialogCallback interface.
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();
}
});
}
To change the theme at runtime, use the following code in your ManiActivity’ onCreate() method and just before setContentView().
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setCustomizedThemes(this,getThemeColor(this));
setContentView(R.layout.activity_main);
}To make your chosen color applied in other activities, call this method setCustomizedThemes(this,getThemeColor(this)); in other activities’ onCreate() method and just before setContentView().
Congratulations, now you have an application with multi-themes 🤩. You can implement it in the way you wish in your app.
For Sample App on GitHub, click MultiColorThemes.
This feature is implemented in my app Weather Forecast.
Happy Coding!
For more Articles: Click Here
