Android Code Snippet theme colors for Material design

Hi all,

After reading this useful Material design tutorial by @corwin42, I've been playing with custom color themes for a Material design app (Android 5+), and have found (by searching the Android docs and B4A forums, and some trial and error) a few handy XML attributes for setting custom colors for certain Android UI UI elements.

Below is the content of a sample theme.xml file. You can replace the color values (e.g. #f44336) with your own desired values (e.g. using B4A's handy color picker).

The full list of attributes can be found here in the Android docs.

The attributes I've identified so far are included below. Most are self-explanatory, but a few are not, so I've commented these accordingly.

If you've figured out how other color attributes affect UI elements, feel free to add them to this thread.

Cheers!

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <style name="MyAppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
     <item name="android:colorPrimary">#f44336</item> <!-- action bar -->
     <item name="android:colorPrimaryDark">#b71c1c</item> <!-- status bar -->
     <item name="android:colorAccent">#ff1744</item> <!-- checkboxes,, switches. msgbox buttons in Android 6.x -->
     <item name="android:textColorPrimary">#00FF00</item> <!-- msgbox text in Android 6.x -->
     <item name="android:textColorSecondary">#FF00FF</item> <!-- inactive editText line,, scrollbar -->
     <item name="android:textColor">#000000</item> <!-- menu text,, msgbox title -->
     <item name="android:textColorLink">#b71c1c</item>
     <item name="android:textColorHighlight">#FF9F9F</item>
   </style>
</resources>

Dependencies: theme.xml, to be placed in \Objects\res\values-v21 and marked as read-only

Tags: color, Material design, theme, XML, custom

 

[Erel]

Dependencies: theme.xml, to be placed in \Objects\res\values-v21 and marked as read-only

Note that there is a simpler way.

Add this code to the manifest editor:

CreateResource(values-v21, theme.xml,
<resources>
  <style name="MyAppTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
  <item name="android:colorPrimary">#f44336</item> <!-- action bar -->
  <item name="android:colorPrimaryDark">#b71c1c</item> <!-- status bar -->
  <item name="android:colorAccent">#ff1744</item> <!-- checkboxes,, switches,, etc. -->
  <item name="android:textColorPrimary">#00FF00</item> <!-- ? -->
  <item name="android:textColorSecondary">#FF00FF</item> <!-- inactive editText line,, scrollbar -->
  <item name="android:textColor">#000000</item> <!-- menu text,, msgbox title -->
  <item name="android:textColorLink">#b71c1c</item>
  <item name="android:textColorHighlight">#FF9F9F</item>
  </style>
</resources>
)

This way you don't need to deal with the read-only files and you can modify it directly from the manifest editor.

 

[Dave O]

This way you don't need to deal with the read-only files and you can modify it directly from the manifest editor.

Ah, good idea, much easier to deal with.

BTW, when I added this to the manifest, it generated a parsing error at the "CreateResource line". When I removed the XML comments, it compiled fine. Are comments not allowed in this situation?

 

[Erel]

I've updated my previous post to fix the comments issue.

The parsing error is related to the commas. Commas must be escaped inside the text (,,).

 

[MarcoRome]

This is Great also for change color in one Activity and also Color SeekBar....
Example i have this code:

SetActivityAttribute(act_seek, android:theme, @style/CustomActTheme)
CreateResource(values, theme.xml,
<resources>
  <style name="CustomActTheme" parent="@android:style/Theme.Material">
  <item name="android:windowIsTranslucent">true</item>
  <item name="android:windowBackground">@android:color/transparent</item>
  <item name="android:windowContentOverlay">@null</item>
  <item name="android:windowNoTitle">true</item>
  <item name="android:backgroundDimEnabled">true</item>
  <item name="android:windowFullscreen">true</item>
  <item name="android:colorPrimary">#f44336</item> <!-- action bar -->
  <item name="android:colorPrimaryDark">#b71c1c</item> <!-- status bar -->
  <item name="android:colorAccent">#2DEA6A</item> <!-- Seekbar,, checkboxes,, switches,, etc. -->
  <item name="android:textColorPrimary">#00FF00</item> <!-- ? -->
  <item name="android:textColorSecondary">#FF00FF</item> <!-- inactive editText line,, scrollbar -->
  <item name="android:textColor">#000000</item> <!-- menu text,, msgbox title -->
  <item name="android:textColorLink">#b71c1c</item>
  <item name="android:textColorHighlight">#FF9F9F</item>
</style>
</resources>
)

i will be the follow result :

where:

<item name="android:colorAccent">#2DEA6A</item> <!-- Seekbar,, checkboxes,, switches,, etc. THIS IS COLOR SEEKBAR GREEN -->
....
<item name="android:textColorSecondary">#FF00FF</item> <!-- inactive editText line,, scrollbar --> THIS IS COLOR BACKGROUND SEEKBAR

 

[JohnC]

I just tried to use this theme, and for some reason I was now unable to set the seekbar foreground color for an ACSeekbar using this line:

<item name="android:colorAccent">#1E00FF</item> <!-- seekbar,, checkboxes,, switches,, etc. -->

But, when I examined my original theme that was able to set the color of the ACSeekbar fore color, it was this:

<item name="colorAccent">#1E90FF</item>

Does anyone know why having the "android:" prefix wont work, but removing it will?

Is the "android:" prefix needed anyway?

 

[corwin42]

In short words:

You need the android: prefixed attributes when using the default material design themes.

If you use AppCompat you have to use an AppCompat theme and there the attributes are defined without the android: prefix.

The theming in Android is sometimes very confusing (even for me).

 

[JohnC]

Thanks for the info, then is it ok to include both in the same theme?

<item name="android:colorPrimary">#1E90FF</item> <!-- action bar -->
<item name="colorPrimary">#1E90FF</item>
<item name="android:colorPrimaryDark">#007CF5</item> <!-- status bar -->
<item name="colorPrimaryDark">#007CF5</item>

 

[kisoft]

How to change the color of the bottom button bar