Application Themes, Change And Imageview Src Based On App Theme Name

i'm trying to find a solution for my problem, but i can't find anywhere, even googling for it. I'm writing an android application that uses themes, an user can switch them dinamica

Solution 1:

Recently, I had a requirement to change the ImageView picture to be changed based on the theme. I was using an ExpandableListView and using the ImageView as a group indicator rather than out of the box group indicator. Since my application supported both light and dark theme, I wanted to switch the group indicators, action bar icons to light and dark versions as well.

Here it is how:

Declare custom attributes in res/values/attrs.xml file for each of the ImageView or ActionBar icon to be changed based on theme:

<declare-styleablename="customAttrs"><attrname="actionSearchIcon"format="reference" /><attrname="actionAcceptIcon"format="reference" /><attrname="actionRefreshIcon"format="reference" /><attrname="groupIndicatorIcon"format="reference" /></declare-styleable>

In the theme file which would be res/values/styles.xml or the suitable one depending upon the version you are targetting, define the same attributes pointing to the appropriate drawables. For example below, the Black theme is pointing to drawables related to dark theme and Light theme is pointing to drawables related to light theme.

<stylename="Black"parent="@style/Theme.AppCompat"><itemname="actionSearchIcon">@drawable/ic_action_search</item><itemname="actionAcceptIcon">@drawable/ic_action_accept</item><itemname="actionRefreshIcon">@drawable/navigation_refresh</item><itemname="groupIndicatorIcon">@drawable/group_indicator</item></style><stylename="Light"parent="@style/Theme.AppCompat.Light"><itemname="actionSearchIcon">@drawable/ic_action_search_light</item><itemname="actionAcceptIcon">@drawable/ic_action_accept_light</item><itemname="actionRefreshIcon">@drawable/navigation_refresh_light</item><itemname="groupIndicatorIcon">@drawable/group_indicator_light</item></style>

Finally, coming to the actual layouts, point the relavant attributes to the attributes you have defined rather than directly to the drawables. For example in case of ActionBar icons:

<item
android:id="@+id/action_refresh"android:icon="?attr/actionRefreshIcon"android:orderInCategory="107"android:title="@string/action_refresh"app:showAsAction="always"/>

<item
android:id="@+id/action_accept"android:icon="?attr/actionAcceptIcon"android:orderInCategory="108"android:title="@string/action_accept"app:showAsAction="always"/>

<item
android:id="@+id/action_search"android:icon="?attr/actionSearchIcon"android:orderInCategory="50"android:title="@string/action_search"app:actionViewClass="android.support.v7.widget.SearchView"app:showAsAction="collapseActionView|always"/>

Or in case of ImageView:

<ImageView
android:id="@+id/group_indicator"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentLeft="true"android:contentDescription="@string/app_name"android:src="?attr/groupIndicatorIcon"/>

The exciting part is that this concept can be applied to any control or any attribute :)