I've tried searching and using custom selectors other people have posted here, using the set colour filter and various other things. I think I'm getting it completely wrong because in complete honesty I'm not great with designing having just started developing, but I still don't imagine it can be as complex to do what I want as I have seen:
I've developed an app for froyo and up. I want the background colour of the button to be the holo green and holo orange as on the swatches on the Android developer website. That's all I want to be different. I want the standard blue highlight when pressing the button on holo or the standard button onpress etc. behaviour expected in froyo, gingerbread etc.
I would really appreciate any guidance on this. Thank you guys in advance!
EDIT :
There is a much easier way to change the colors of the holo theme. This website will do it for you :
http://android-holo-colors.com
The only way to customize the holo buttons is to edit the button drawables with an image editor like Photoshop. Here is how :
Open the platforms/android-17/data/res folder in your SDK directory and find the holo buttons in the drawable folders (they start with btn_default_holo_...).
Open them with your image editor and simply change their colors (hue/saturation) to match the color you want. There are 3 or 4 different drawables, one per button state.
Save them in the corresponding drawable folder of your app. You have to do this for each screen density you want to handle (mdpi, hdpi, xhdpi are usually enough).
I haven't tested, but it may be enough to just edit the xhdpi buttons. They will be scaled down to the lower densities.
Once you customized each drawable, you have to create a selector that you will use as your custom button. Here is an example of a selector I use in one of my apps to create a green holo button :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/__btn_green_normal_holo_light"/>
<item android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/__btn_default_disabled_holo_light"/>
<item android:state_pressed="true"
android:drawable="#drawable/__btn_default_pressed_holo_light"/>
<item android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/__btn_default_focused_holo_light"/>
<item android:state_enabled="true"
android:drawable="#drawable/__btn_green_normal_holo_light"/>
<item android:state_focused="true"
android:drawable="#drawable/__btn_default_disabled_focused_holo_light"/>
<item
android:drawable="#drawable/__btn_default_disabled_holo_light"/>
</selector>
Here is an example of a modified green holo button drawable. You can check the other drawables of my project if you are interested, I do exactly what you want to do (I also have a red button).
Related
The switch widget introduced in API 14 is styled by default with holo theme.
I want to style it slightly different, changing its colors and shape a bit for branding reasons. How does one go about this? I know it must be possible, as ive seen the difference between default ICS and Samsung's touchwiz theme
I assume I'll need some state drawables, and I've seen a few styles in http://developer.android.com/reference/android/R.styleable.html with Switch_thumb and Switch_track that look like what I might be after. I just don't know how to go about using them.
I'm using ActionbarSherlock if that makes a difference. Only devices running API v14 or above will be able to use a switch at all, of course.
You can define the drawables that are used for the background, and the switcher part like this:
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_bg" />
Now you need to create a selector that defines the different states for the switcher drawable.
Here the copies from the Android sources:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_thumb_disabled_holo_light" />
<item android:state_pressed="true" android:drawable="#drawable/switch_thumb_pressed_holo_light" />
<item android:state_checked="true" android:drawable="#drawable/switch_thumb_activated_holo_light" />
<item android:drawable="#drawable/switch_thumb_holo_light" />
</selector>
This defines the thumb drawable, the image that is moved over the background. There are four ninepatch images used for the slider:
The deactivated version (xhdpi version that Android is using)
The pressed slider:
The activated slider (on state):
The default version (off state):
There are also three different states for the background that are defined in the following selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_bg_disabled_holo_dark" />
<item android:state_focused="true" android:drawable="#drawable/switch_bg_focused_holo_dark" />
<item android:drawable="#drawable/switch_bg_holo_dark" />
</selector>
The deactivated version:
The focused version:
And the default version:
To have a styled switch just create this two selectors, set them to your Switch View and then change the seven images to your desired style.
It's an awesome detailed reply by Janusz. But just for the sake of people who are coming to this page for answers, the easier way is at http://android-holo-colors.com/ (dead link) linked from Android Asset Studio
A good description of all the tools are at AndroidOnRocks.com (site offline now)
However, I highly recommend everybody to read the reply from Janusz as it will make understanding clearer. Use the tool to do stuffs real quick
You can customize material styles by setting different color properties.
For example custom application theme
<style name="CustomAppTheme" parent="Theme.AppCompat">
<item name="android:textColorPrimaryDisableOnly">#00838f</item>
<item name="colorAccent">#e91e63</item>
</style>
Custom switch theme
<style name="MySwitch" parent="#style/Widget.AppCompat.CompoundButton.Switch">
<item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
<item name="android:colorControlActivated">#1b5e20</item>
<item name="android:colorForeground">#f57f17</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat</item>
</style>
You can customize switch track and switch thumb like below image by defining xml drawables. For more information http://www.zoftino.com/android-switch-button-and-custom-switch-examples
Alternative and much easier way is to use shapes instead of 9-patches.
It is already explained here:
https://stackoverflow.com/a/24725831/512011
I am building an application to show a dynamic picture and a dialog with a button. The thumbnail of that picture is then used as the background of the button. However, if the picture is with black pattern, it turns out showing as "holo" and transparent to the background. This makes the button ugly.
I am trying this on android 4.x.
I have tried using different themes for the dialog, Theme.Dialog, Theme.Holo and Theme.Light but no luck.
My problems are
(1) how to make a non-holo button with DiaglogFragment(even on a holo theme view/activity).
(2) is this related to android versions? or machines?
Thank you.
you need to create a selector with all the different states of a button and for each state you will need an image
for example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/blue_curve" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/blue_curve_pressed" android:state_pressed="true"/>
</selector>
then set the background to the selector in your xml
I want to have custom background for the menu items displayed in the ActionBar. I found out that I can do that by adding the following item to my app theme style definition:
<item name="android:actionBarItemBackground">#drawable/actionbar_button</item>
Where actionbar_button.xml contains:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" />
<item android:drawable="#drawable/action_btn_off" />
</selector>
However, this causes the background image to also render behind the custom app logo displayed on the left of the ActionBar. After several attempts at figuring out a selector that would include only the buttons, I came up with this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/action_btn_on" android:state_pressed="true" android:state_enabled="true" />
<item android:drawable="#drawable/action_btn_off" android:state_pressed="false" android:state_enabled="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Which sort of worked, and after the app loads fully the background behind the logo is transparent as I want it. But the problem is that while it's still loading it briefly shows the logo with the button background behind it and more annoyingly, it scales and crops the logo to fit inside the fill area of the 9-patch graphic that is the button background. When finished loading, the background is switched out, but the scaling and cropping remains, which looks quite ugly. How can I fix it?
Have not found a working solution to the general problem of setting image-based backgrounds to ActionBar buttons, but the scaling/cropping does not happen if I use entered XML based backgrounds, such as created with a layer-list of shapes. For some cases in may not be viable, but in my case it was entirely possible, and maybe even better than using a bitmap based resource.
The switch widget introduced in API 14 is styled by default with holo theme.
I want to style it slightly different, changing its colors and shape a bit for branding reasons. How does one go about this? I know it must be possible, as ive seen the difference between default ICS and Samsung's touchwiz theme
I assume I'll need some state drawables, and I've seen a few styles in http://developer.android.com/reference/android/R.styleable.html with Switch_thumb and Switch_track that look like what I might be after. I just don't know how to go about using them.
I'm using ActionbarSherlock if that makes a difference. Only devices running API v14 or above will be able to use a switch at all, of course.
You can define the drawables that are used for the background, and the switcher part like this:
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_bg" />
Now you need to create a selector that defines the different states for the switcher drawable.
Here the copies from the Android sources:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_thumb_disabled_holo_light" />
<item android:state_pressed="true" android:drawable="#drawable/switch_thumb_pressed_holo_light" />
<item android:state_checked="true" android:drawable="#drawable/switch_thumb_activated_holo_light" />
<item android:drawable="#drawable/switch_thumb_holo_light" />
</selector>
This defines the thumb drawable, the image that is moved over the background. There are four ninepatch images used for the slider:
The deactivated version (xhdpi version that Android is using)
The pressed slider:
The activated slider (on state):
The default version (off state):
There are also three different states for the background that are defined in the following selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false" android:drawable="#drawable/switch_bg_disabled_holo_dark" />
<item android:state_focused="true" android:drawable="#drawable/switch_bg_focused_holo_dark" />
<item android:drawable="#drawable/switch_bg_holo_dark" />
</selector>
The deactivated version:
The focused version:
And the default version:
To have a styled switch just create this two selectors, set them to your Switch View and then change the seven images to your desired style.
It's an awesome detailed reply by Janusz. But just for the sake of people who are coming to this page for answers, the easier way is at http://android-holo-colors.com/ (dead link) linked from Android Asset Studio
A good description of all the tools are at AndroidOnRocks.com (site offline now)
However, I highly recommend everybody to read the reply from Janusz as it will make understanding clearer. Use the tool to do stuffs real quick
You can customize material styles by setting different color properties.
For example custom application theme
<style name="CustomAppTheme" parent="Theme.AppCompat">
<item name="android:textColorPrimaryDisableOnly">#00838f</item>
<item name="colorAccent">#e91e63</item>
</style>
Custom switch theme
<style name="MySwitch" parent="#style/Widget.AppCompat.CompoundButton.Switch">
<item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
<item name="android:colorControlActivated">#1b5e20</item>
<item name="android:colorForeground">#f57f17</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat</item>
</style>
You can customize switch track and switch thumb like below image by defining xml drawables. For more information http://www.zoftino.com/android-switch-button-and-custom-switch-examples
Alternative and much easier way is to use shapes instead of 9-patches.
It is already explained here:
https://stackoverflow.com/a/24725831/512011
The color of my Spinner widgets change from phone to phone based on there settings,I would like to keep them the same between all phones and I would like to have it be the default eclipse uses in its emulators the color is silverish. Can you please let me know how to apply this specific theme to my Spinner in xml. Thanks in advance.
download the images used in for the spinner from the android source code: spinner_press.9.png, spinner_select.9.png, spinner_normal.9.png then create selector using those.
this is the default selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/spinner_press" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/spinner_select" />
<item android:drawable="#drawable/spinner_normal" />
</selector>
You don't need to create a theme. Just apply a background of your choice to the spinner, as with any other View.
If you want to have different backgrounds you can use a (See here for more info)
For an example of an implementation, nothing better than the android source: https://android.googlesource.com/platform/frameworks/base/+/froyo-release/core/res/res/drawable/spinner_background.xml
You can get the actual 9-patch files from there also (and choose which version you would like to use).