How to give the user the ability to switch between different colors in your application

Question

I want to give the user the opportunity to choose which color skin the application will have. For example, I sell black skin with black colors with different tones, as well as white skin with tonalities.

What is the best approach to achieve this?

For example, I know that in Android there is a colors.xml file that should contain the colors of your application. How can I have two color files or something like that and use them depending on the user's choice? Maybe a styles.xml file?

Please tell me your opinion on what is the best way to achieve this.

thanks

MY LAYOUT:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- The main content view --> <RelativeLayout android:id="@+id/main_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.PagerTitleStrip android:id="@+id/pager_title_strip" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" android:paddingTop="4dp" android:paddingBottom="4dp" style="@style/CustomPagerTitleStrip"/> </android.support.v4.view.ViewPager> </RelativeLayout> <!-- The navigation drawer --> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/drawer_header" app:menu="@menu/drawer_menu" style="@style/NavigationDrawerStyle"/> </android.support.v4.widget.DrawerLayout> 

My styles.xml file:

 <resources> <style name="AppTheme" parent="Theme.AppCompat"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="actionBarTheme">@style/CustomActionBar</item> <item name="android:textColor">@color/colorFontMenus</item> <item name="itemTextColor">@color/colorFontMenus</item> <item name="itemIconTint">@color/colorFontMenus</item> </style> <style name="CustomActionBar"> <!-- title text color --> <item name="android:textColorPrimary">@color/colorFontMenus</item> <!-- subtitle text color --> <item name="android:textColorSecondary">?android:textColorPrimary</item> <!-- action menu item text color --> <item name="actionMenuTextColor">?android:textColorPrimary</item> <!-- action menu item icon color - only applies to appcompat-v7 icons :( --> <item name="colorControlNormal">?android:textColorPrimary</item> </style> <style name="CustomPagerTitleStrip"> <item name="android:background">@color/mainColorWithAlpha</item> </style> <style name="CustomTextView"> <item name="android:textColor">@color/colorFontContent</item> </style> <style name="CustomScrollBar"> <item name="android:scrollbarThumbVertical">@drawable/scrollbar_green</item> </style> <style name="CustomDrawerHeader"> <item name="android:background">@drawable/drawer_header_background_green</item> </style> <style name="NavigationDrawerStyle"> <item name="android:background">@color/colorPrimaryDark</item> </style> </resources> 

Answer 1

Regarding @Joaquim Ley's answer, we can change the theme to super.onCreate() .

In my application (at work) my styles.xml :

This is my default theme.

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="android:colorAccent">@color/colorPrimary</item> <item name="android:statusBarColor">@color/colorPrimaryDark</item> <item name="android:colorFocusedHighlight">@color/colorPrimary</item> <item name="android:colorControlNormal">@color/amber_300</item> <item name="android:colorControlActivated">@color/amber_300</item> <item name="android:colorControlHighlight">@color/colorControlHighlight</item> <item name="drawerArrowStyle">@style/DrawerArrowStyle</item> <item name="android:windowTranslucentStatus">false</item> <item name="actionBarItemBackground">?attr/selectableItemBackground</item> <item name="colorControlHighlight">@color/colorControlHighlight</item> <item name="android:windowContentTransitions">true</item> <!-- Customize your theme here. --> </style> 

And this is my green topic:

 <style name="AppTheme.Green" parent="AppTheme"> <item name="colorPrimary">@color/green_500</item> <item name="colorPrimaryDark">@color/green_700</item> <item name="android:colorAccent">@color/green_300</item> <item name="android:statusBarColor">@color/green_700</item> <item name="android:colorFocusedHighlight">@color/green_500</item> <item name="android:colorControlNormal">@color/green_300</item> <item name="android:colorControlActivated">@color/green_300</item> </style> 

When changing the topic:

 @Override protected void onCreate(Bundle savedInstanceState) { mPrefs=getSharedPreferences(getResources().getString(R.string.preference_name),MODE_PRIVATE); mEditor=mPrefs.edit(); mEditor.apply(); defaultColor=mPrefs.getInt(getResources().getString(R.string.default_color),0); //you can do some switch case or if else of defaultColor and change theme setTheme(R.style.AppTheme_Green); super.onCreate(savedInstanceState); setContentView(R.layout.activity_add_voice_record); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } 

This is my first application to work, but in my personal application I created BaseActivity and created the handleColor(int color,int darkcolor) . But this will not change the whole theme of only the Toolbar , StatusBar , NavigationBar and EditText marker and underline colors:

 public class BaseActivity extends AppCompatActivity { public void handleColor(int color,int darkcolor){ //changing toolbar color if(getSupportActionBar()!=null){ getSupportActionBar().setBackgroundDrawable(new ColorDrawable(color)); } //if bigger than Api 21 change status bar color if(isLolipop()){ Window window = getWindow(); window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); window.setStatusBarColor(darkcolor); } } public boolean isLolipop(){ return Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP; } } 

When changing color, I use Color Dialer. Apk example: sample.apk and Github : material-dialogs . If you want to see how it looks, I can give you a video of my application.

Colors: Material color palette

Anyway, I know 2 different approaches, if you like one of them, I can explain more.

@Edit : Good news for you, I found this rehearsing Github: app-theme-engine and its work is good. You can try the sample apk. If you cannot import it through gradle, try this: compile 'com.github.naman14:app-theme-engine: 0.5.1@aar '

Answer 2

This should be done in the styles /AppTheme.xml

It can only be changed by the Activity theme in the onCreate() method, and only before super() been called. Changing the theme is pretty straight forward, something like below should do it:

setTheme(someBooleanFlag ? R.style.AppThemeOne : R.style.AppThemeTwo);

More details here:

Ali Muzaffar The average entry in this

Styles and Themes

Material Theme