android – How to correctly theme an activity and identify what attributes are wrong?-ThrowExceptions

Exception or error:

I am working in supporting Dark/Night Mode for my app,
so I changed my activity to AppCompatActivity and
android:theme to a clean custom theme extending “Theme.AppCompat.DayNight”, but found many changes here and there.

I don’t know what is the right way to fix them and then support the Dark Mode.

  1. how to find out what attributes are affecting, for example, the navigation bar color, navigation icon color, up/back icon color on action bar, action bar background color and activity background color? (currently, I just try & error all attributes defined in “android” and “appcompat”)

  2. the activity I am working on is a settings activity, aka, PreferenceFragment in an AppCompatActivity, and each preference item is inflated from a custom layout with following ImageView for icon:

    <ImageView
      android:id="@android:id/icon"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center_horizontal|top"
      android:layout_marginTop="16dip"
      android:layout_marginStart="@dimen/settings_entry_left_margin"/>
    

As you can see I did not set any tint on it, but the color of icon still changed. How should I find out the reason (and fix it)?

PS. This question is more about
“what is the ‘right’ way to theme an activity?”
“how to know what can be themed by which attributes?”

Thanks.

How to solve:

A list of the App combat attributes can be seen here. In the past I tried to do something similar, but I didn’t necessarily override every one of them. I was going around my screen looking at what I wanted to change, and editing only that.

###

You have to define themes inside styles file in res folder. Below is the code to style the themes

<resources>

<style name="AppThemeLight" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="titleColor">@color/colorPrimary</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccentLight</item>
    <item name="secondBackground">#c2c2c2</item>
    <item name="roundButton">@drawable/round_button_light</item>
    <item name="alertDialogTheme">@style/AppThemeDialogLight</item>
    <item name="android:itemBackground">#ffffff</item>
    <item name="android:textColor">#000000</item>

</style>

<style name="AppThemeDialogLight" parent="@style/Theme.AppCompat.Light.Dialog.Alert">
    <item name="colorAccent">@color/colorAccentLight</item>
</style>

<style name="AppThemeLight.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:itemBackground">#ffffff</item>
    <item name="android:textColor">#000000</item>
</style>

<style name="AppThemeLight.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

<style name="AppThemeLight.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

<style name="AppThemeDark" parent="Theme.AppCompat">
    <item name="titleColor">@android:color/primary_text_dark</item>
    <item name="colorPrimaryDark">@color/primary_dark_material_dark</item>
    <item name="colorPrimary">@color/primary_material_dark</item>
    <item name="colorAccent">@color/colorAccentDark</item>
    <item name="secondBackground">#151515</item>
    <item name="roundButton">@drawable/round_button_dark</item>
    <item name="alertDialogTheme">@style/AppThemeDialogDark</item>
    <item name="android:itemBackground">@color/item_theme_dark</item>
    <item name="android:textColor">#ffffff</item>
</style>

<style name="AppThemeDialogDark" parent="@style/Theme.AppCompat.Dialog.Alert">
    <item name="colorAccent">@color/colorAccentDark</item>
</style>

<style name="AppThemeDark.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:itemBackground">@color/item_theme_dark</item>
    <item name="android:textColor">#ffffff</item>
</style>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#00897B</color>
    <color name="white">#fff</color>
    <color name="colorA">#D81B60</color>
    <color name="secondBackground">#33333333</color>
    <color name="colorAccentLight">#FF4081</color>
    <color name="colorAccentDark">#a4a4a4</color>
    <color name="dark_blue">#0d47a1</color>
    <color name="light_theme_dark_contextual_bar_background">@color/dark_blue</color>
    <color name="dark_theme_elapsed_time_paused_color">#4cffffff</color>
    <color name="tooltip_background_dark">#e6616161</color>
    <color name="tooltip_background_light">#e6ffffff</color>
    <color name="dark_theme_color_primary_dark">#040404</color>
    <color name="tab_background_selected_theme_dark">#232323</color>
    <color name="tab_background_unselected_theme_dark">#232323</color>
    <color name="item_theme_dark">#363636</color>
</resources>

Inside your activity’s onCreateMethod set the theme as

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setAppTheme(getTheme(this, R.style.AppThemeLight_NoActionBar, R.style.AppThemeDark_NoActionBar));
    setContentView(R.layout.activity_main);
}


public static int getTheme(Context context, int light, int dark) {
        final SharedPreferences shared = PreferenceManager.getDefaultSharedPreferences(context);
        String theme = shared.getString(PREFERENCE_THEME, "");  // upon selecting the theme from options just put the related string in the shared prefs. 
        if (theme.equals("Theme_Dark")) {
            return dark;
        } else {
            return light;
        }
    }

And the styles.xml v21

<resources>
<style name="AppThemeLight.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="AppThemeDark.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:itemBackground">@color/item_theme_dark</item>
    <item name="android:textColor">#ffffff</item>

</style>

Basically these two lines inside theme styles makes lot of changes

 <item name="android:itemBackground">#ffffff</item>
    <item name="android:textColor">#000000</item>

These two lines will make the background of every view as white and every text color will be changed to black

Leave a Reply

Your email address will not be published. Required fields are marked *