android themes - defining colours in custom themes

Question

I am sure there is a simple answer to that yet I just cant find it so I throw it into stackoverflow ... ;-)

I will just put it into an example. I have an android app where the user can choose the theme in the preferences - dark or light theme. Depending on the chosen theme I have to adjust 20 colors in my app. So I have the hope that I can define colours in the theme and then use the names of this so defined colours in the my TextViews etc. Yet so far I cant figure out how to do that and can't find any solution here and there. I really dont want to define an extra dark and light style for each of these 20 colours yet so far that seems the only solution I can find.

Big thanks for any hint

martin:

UPDATE:

In pseudo syntax is that is what I am looking for. Is it possible?

<style name="AppTheme.MyDark" parent="android:Theme">
  -?-> titleColor = "#ffffff"
  -?-> introColor = "#ffaaaa"  
</style>

<style name="AppTheme.MyLight" parent="android:Theme.Light">
  -?-> titleColor = "#000000"
  -?-> introColor = "#004444"  
</style>


<TextView
        android:id="@+id/quoteTitle"
        android:textColor=@titleColor
        ...
</TextView>

<TextView
        android:id="@+id/quoteIntro"
        android:textColor=@introColor
        ...
</TextView>

Preinstruct

You can use styles and themes in your app to do the same. Here is a great tutorial on doing so. mobileorchard.com/… – Tayib

Thanks but then in my example I have to define 20 x 2 styles to cover the 20 colors which are theme dependent. Right? This solution I found as mentioned or can you give me an example to do it more elegant. – Preinstruct

Well, this works just like CSS. You can have a parent style that abstracts away the properties that all your child styles share. After that, for each child style, you can change just the color and the element-specific attribute (such as, maybe height, width etc). THen you can enclose these in a theme and do the same for another theme. This is as elegant as it gets, since it was designed so that it mimics CSS style formatting so that it would be easy for web developers and designers to switch over to android. – Tayib

thanks a lot - I just put a pseudo code to my question to explain what I am looking for. How would this translate to correct code in android styles syntax with staying compact as the pseudo code? – Preinstruct

Answer 1

I found a solution which seems to work. First you need to define the custom color fields in attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<attr name="titleColor" format="reference|color" />
<attr name="introColor" format="reference|color" />

</resources>

Next you define your themes

<style name="AppTheme.MyDark" parent="android:Theme">
   <item name="titleColor">#FFFFFF</item>
   <item name="introColor">#FFFFFF</item>
</style>


<style name="AppTheme.MyLight" parent="android:Theme">
   <item name="titleColor">#000000</item>
   <item name="introColor">#004444</item>
</style>

and finally in your layout

<TextView
    android:id="@+id/quoteTitle"
    android:textColor="?titleColor"
    ...
</TextView>

<TextView
    android:id="@+id/quoteIntro"
    android:textColor="?introColor"
    ...
</TextView>

i found the solution mainly here

There seems to be no explanation in the official android documentation about using attributes. Best resource I found is here

Preinstruct

just i was looking for, +1 for the "?" (i didn't know we can abreviate "?attr/" with just "?". – Alex

Thanks!! I just wanted to use the primary/primaryDark/accent colors. So from your answer I worked out I just use ?colorPrimary/?colorPrimaryDark/?colorAccent – Footlocker