Want to overload Button style - android

I want to overload how an android Button looks, except I want to overload only one attribute i.e. the android:background. I know I could write something like:
<style name="App_TextButtonStyle" parent="???">
<item name="android:background">#drawable/filled_roundededges_nostroke</item>
</style>
Where parent="???" specifies which style I inherit from. My question is which style should I inherit from do that I get everything from the android default style for buttons and just define a new background.

I have used style for buttons without specifying "parent" attribute
<style name="BigButtonStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:background">#drawable/backbutton</item>
<item name="android:textColor">#FFFFFF</item>
<item name="android:textSize">8pt</item>
<item name="android:textStyle">bold</item>
<item name="android:layout_margin">10pt</item>
</style>
I think it could be enough for you to define your style without "parent".

This is mostly for future visitors, I found a solution to the problem:
<style name="App_TextButtonStyle" parent="#android:style/Widget.Button">
<item name="android:background">#drawable/filled_roundededges_nostroke</item>
</style>
#android:style/Widget.Button references the default style of the button in the currently selected theme. You could also use the holo widget button style #android:style/Widget.Holo.Button (available since api 11).
You might want to look in <android-sdk-install-folder>/platforms/android-XX/data/res/values for the files styles.xml and themes.xml to check out all styles android uses for a given platform version.

Related

ListPreference text color

I'm having a hard time trying to style a ListPreference.
I've applied a main theme which declares a preferenceTheme and both of them link to a dialogTheme (and alertDialogTheme respectively). It works except that the text color of the items doesn't change - but the color of all other texts does. I cannot rely on a workaround because I'm using the v7 preferences and thus cannot override the dialog methods in a custom class.
For me it looks like the rows ignore the text color value, but maybe someone else has a solution for this. Otherwise this might be a bug?
Main style:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- [...] -->
<!-- Some color values -->
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="dialogTheme">#style/DialogTheme</item>
<item name="alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
PreferenceTheme:
<style name="PreferenceTheme" parent="PreferenceThemeOverlay.v14.Material">
<!-- [...] -->
<!-- Some color values -->
<item name="android:textColor">#color/preference_primary_color</item>
<item name="android:textColorPrimary">#color/preference_primary_color</item>
<item name="android:textColorSecondary">#color/preference_primary_color</item>
<item name="android:textColorHighlight">#color/preference_primary_color</item>
<item name="android:editTextColor">#color/preference_primary_color</item>
<item name="android:dialogTheme">#style/DialogTheme</item>
<item name="android:alertDialogTheme">#style/DialogTheme</item>
<item name="preferenceTheme">#style/PreferenceTheme</item>
</style>
DialogTheme:
<style name="DialogTheme" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:textColor">#EEEEEE</item>
<item name="android:textColorPrimary">#EEEEEE</item>
<item name="android:textColorSecondary">#EEEEEE</item>
<item name="android:textColorHighlight">#EEEEEE</item>
<item name="android:textColorTertiary">#EEEEEE</item>
<item name="android:textColorAlertDialogListItem">#EEEEEE</item>
<item name="android:editTextColor">#EEEEEE</item>
<item name="color">#EEEEEE</item>
</style>
This is how it looks.The text should be #EEEEEE. I've snipped it but the text colors are applied in each of the given styles.
You did everything right, except one thing: do not use the android prefix when overriding textColorAlertDialogListItem because this is not the framework version of AlertDialog.
This statement is generally true for almost all attributes that belong to the support widgets / views. The reason is pretty straightforward: not all attributes are available on the older platforms. Such example is android:colorControlActivated which was introduced in API 21. The AppCompat lib declares its own colorControlActivated so it's available on older API levels, too. In this case the developer should not use the android prefix when defining the style in the theme as that would point to the platform version of the attribute instead of the AppCompat one.
TL;DR: Do not use the android prefix for support widgets unless you have to (i.e. you get compilation error).
P.S.: I have created a fix / extension to the support preferences-v7 lib's annoying things that you might want to check out.
Also for radio buttons color add <item name="colorAccent">#000000</item> to your style.
Be careful, it's not android:colorAccent but colorAccent

Android TimePickerDialog styling guide/docs?

I'm trying to style a TimePickerDialog for sdk 21+ (Lollipop). So far I've figured out how to change the default colorscheme in XML:
<style name="TimePickerTheme" parent="#style/Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#ff2d6073</item> <!-- no effect -->
<item name="colorPrimaryDark">#ff2d6073</item> <!-- no effect -->
<item name="colorAccent">#ff2d6073</item>
<item name="android:textColor">#ffD0D102</item>
<item name="android:textColorPrimary">#ffD0D102</item>
</style>
This works but I'm looking for a guide or documentation for all the properties I can change.
AccentColor does the basic color scheme
TextColorPrimary does the text color
But what property, for example, do I need to change the big text in the 'header' of the dialog (where the current selected time is displayed)?
Is there some documentation that lists all the possible things you can change?
After digging through the AOSP theme and style xml files and a lot of googling I made some progress. I am now able to style most(!) things.
So this is a partial answer, not all the way there yet. But here's how far I got:
You can see that I'm now able to theme the header, the un(!)selected time part (minutes in this case), the circle, the numbers in that circle and the 'hand' (or selector). Oh, and the buttons are styled, too.
Let me explain how I got things working, first: the important thing is that you can't override things directly from you app's theme OR from a (alert)dialog theme/style. You have to go from one to the next, so to speak.
Example:
AndroidManifest.xml: Set custom theme for app and/or activity
<activity>
android:theme="#style/Theme.MyTheme"
</activity>
values-v21/styles.xml: (where your custom theme resides): set the timePickerDialogTheme
<style name="Theme.MyTheme" parent="#style/Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">#style/TimePickerDialogTheme</item>
</style>
Then below that, define the timePickerDialogTheme and set the timePickerStyle:
<style name="TimePickerDialogTheme" parent="#style/Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->
<item name="android:timePickerStyle">#style/TimePickerDialogStyle</item>
</style>
Now you can define most of the styling here..
<style name="TimePickerDialogStyle" parent="#android:style/Widget.Material.Light.TimePicker">
<item name="colorAccent">#ff2d6073</item> <!-- colorAccent here seems to work just fine? -->
<item name="android:timePickerMode">clock</item>
<item name="android:headerBackground">#ff2d6073</item>
<item name="android:headerTimeTextAppearance">#style/TextAppearance.TimePickerDialogStyle.TimeLabel</item> <!-- TimePicker Time *TextAppearance* -->
<item name="android:numbersTextColor">#ff000000</item>
<item name="android:numbersSelectorColor">#ff2d6073</item>
<item name="android:numbersBackgroundColor">#ffdddddd</item>
</style>
The important line in the above is:
<item name="android:headerTimeTextAppearance">#style/TextAppearance.TimePickerDialogStyle.TimeLabel</item>
Because if you want to style the text (well, time, actually) in the header you need to define the headerTimeTextAppearance:
<style name="TextAppearance.TimePickerDialogStyle.TimeLabel" parent="#android:style/TextAppearance.Material">
<item name="android:textSize">60sp</item> <!-- from -->
<item name="android:textColor">#ffD0D102</item>
</style>
Now, if you take a look at the Widget.Material.TimePicker in AOSP styles.xml (ctrl-f 'timepicker' until you find it) you'll notice a bunch of other properties that you should be able to modify:
headerTimeTextAppearance
headerAmPmTextAppearance
headerSelectedTextColor
headerBackground
numbersTextColor
numbersBackgroundColor
amPmTextColor
amPmBackgroundColor
amPmSelectedBackgroundColor
numbersSelectorColor
Most of these work (as long as you prepend 'android:' for each of them) BUT I could not get 'headerSelectedTextColor' to work. I got a compile error saying something like "could not match property bla bla". Also, if you look at my example above, I hardcoded the textSize for the 'headerTimeTextAppearance' property because the '#dimen/timepicker_ampm_label_size' value threw errors.
In short: most of the things are listed above and how to get them working. But not all is clear. So I'd still see that complete documentation/guide :)
Android TimePicker material style with custom colors below, you can see http://www.zoftino.com/android-timepicker-example for TimePicker usage and styles.
<style name="MyAppThemeFour" parent="Theme.AppCompat.Light">
<item name="android:timePickerDialogTheme">#style/MyTimePickerDialogStyle</item>
</style>
<style name="MyTimePickerDialogStyle" parent="#style/ThemeOverlay.AppCompat.Dialog.Alert">
<item name="showTitle">false</item>
<item name="colorControlActivated">#ffd600</item>
<item name="colorAccent">#b71c1c</item>
<item name="android:textColorPrimary">#43a047</item>
<item name="android:textColorSecondary">#f44336</item>
</style>
When using version 1.5.0 of the Material Design Library for Android, I've found that I can get most of the theming with using this particular style:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTimePickerTheme" parent="ThemeOverlay.MaterialComponents.TimePicker">
<item name="android:textColor">#FF121212</item>
<item name="android:textColorPrimary">#FF121212</item>
<item name="android:textColorSecondary">#FFF9F9F9</item>
<item name="colorAccent">#FF121212</item>
<item name="colorControlNormal">#FF121212</item>
<item name="colorPrimary">#FF121212</item>
<item name="colorSurface">#FFF9F9F9</item>
</style>
</resources>
This will yield in a generic - non colored - Dialog which works for white theme. For dark theme, simply invert the colors.
I've also asked here to have dynamic theming supported for this component.
Example screenshot using the above style:

How to use custom parents in Android style.xml file?

In my android app I make use of styles in the style.xml. I have this one
<style name="EditText" parent="#android:style/Widget.EditText">
<item name="android:gravity">center</item>
<item name="android:textColor">#000000</item>
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/bg_edit_text</item>
</style>
But now I have another one, and I want the parent to be the code above. If I try
parent="#android:style/EditText"
it says it can't be found. Does anyone know how it's done?
Thanks
Your EditText style is a custom style so putting #android:style/ will not work. Based on the android documentation on style inheritance, you can directly specify the name
parent="EditText"
or specify it in the name attribute without using the parent attribute
name="EditText.YourNewStyleName
http://developer.android.com/guide/topics/ui/themes.html#Inheritance

Styling ActionBar dropdown menu

I'm using a custom theme that inherits from DarkActionBar and I want to customize dropdown menu to be white like when using Light Holo theme.
I've been able to change the background to white using:
<style name="MyTheme" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/MyDropDownNav</item>
</style>
<style name="MyDropDownNav">
<item name="android:background">#drawable/spinner_background_white</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_whyite</item>
<item name="android:dropDownSelector">#drawable/selectable_background_white</item>
</style>
But I haven't any clue of how to change the text color to black. Because after setting white drawable the problem is that text isn't visible because is white on white background.
I answer myself after some investigation.
In addition to question's styling you need to:
Customize android:spinnerDropDownItemStyle for actionBarWidgetTheme changing it's text appearance.
Also don't forget that dropdown list is managed by the adapter you use. Then if you used the standard one (simple_dropdown_item_1line) there's no problem. But if you used a custom one like me (to be able to add an icon) don't forget to apply style="?attr/spinnerDropDownItemStyle" in your layout TextView.
Then final custom style is:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="Theme.myapp" parent="#style/Theme.Light.DarkActionBar">
<item name="android:actionDropDownStyle">#style/myapp_DropDownNav</item>
<item name="android:actionBarWidgetTheme">#style/myapp.actionBarWidgetTheme</item>
</style>
<style name="myapp.actionBarWidgetTheme" parent="#style/Theme.">
<item name="android:spinnerDropDownItemStyle">#style/myapp.Widget.DropDownItem.Spinner</item>
</style>
<style name="myapp_DropDownNav" parent="#style/Widget.Spinner.DropDown.ActionBar">
<item name="background">#drawable/spinner_background_ab_myapp</item>
<item name="android:background">#drawable/spinner_background_ab_myapp</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_myapp</item>
<item name="android:dropDownSelector">#drawable/selectable_background_myapp</item>
</style>
<style name="myapp.Widget.DropDownItem.Spinner" parent="Widget.DropDownItem.Spinner">
<item name="android:textAppearance">#style/myapp.TextAppearance.Widget.DropDownItem</item>
</style>
<style name="myapp.TextAppearance.Widget.DropDownItem" parent="TextAppearance.Widget.DropDownItem">
<item name="android:textColor">#color/black</item>
</style>
Where drawables in myapp_DropDownNav are white background ones that you can generate with ActionBar Style generator in Android Asset Studio
Try setting itemTextAppearance. That should achieve what you want.
I have stumbled on what may be the simplest way to do this. I was working with the AppCompat library.
<style name="ApplicationTheme" parent="#style/Theme.AppCompat">
<item name="android:actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
<item name="actionBarWidgetTheme">#style/Theme.AppCompat.Light</item>
</style>
My advice is to simply inherit from the Sherlock.Light theme and change the applicable fields to the Dark values. For my app, we wanted a white "up" icon, and white text for the action labels. I don't provide dark versions of my actionbar icons, so they are all white anyway. So after several hours messing around with it and following different people's suggestions, I finally found what I was looking for in the ABS themes file.
I inherit from Sherlock.Light (well, technically HoloEverywhereLight.Sherlock but...) and change:
<item name="android:actionMenuTextColor">#color/White</item>
<item name="actionMenuTextColor">#color/White</item>
<item name="android:homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="homeAsUpIndicator">#drawable/abs__ic_ab_back_holo_dark</item>
<item name="android:dividerVertical">#drawable/abs__list_divider_holo_dark</item>
<item name="dividerVertical">#drawable/abs__list_divider_holo_dark</item>
That's it. It's way simpler and easier than trying to extend classes, restyle things in code, etc.

styles multiple inheritance

Is there any way to make a style inherit from multiple other styles, instead of just being limited to:
<style name="WidgetTextBase">
<item name="android:typeface">serif</item>
<item name="android:textSize">12dip</item>
<item name="android:gravity">center</item>
</style>
<style name="BOSText" parent="WidgetTextBase">
<item name="android:textColor">#051C43</item>
</style>
I would like BOSText to also inherit from:
<style name="WidgetTextHeader">
<item name="android:textStyle">bold</item>
<style>
Styles do not support multiple inheritance (at least not as of Android 3.2).
The official docs say:
If you use the dot notation to extend a style, and you also include
the parent attribute, then the parent styles override any styles
inheritted through the dot notation.
You can only inherit one style. However, you can also make the inherited style inherit from another style, and so on:
<style name="WidgetTextBase">
<item name="android:typeface">serif</item>
<item name="android:textSize">12dip</item>
<item name="android:gravity">center</item>
</style>
<style name="WidgetTextHeader" parent="WidgetTextBase">
<item name="android:textStyle">bold</item>
</style>
<style name="BOSText" parent="WidgetTextHeader">
<item name="android:textColor">#051C43</item>
</style>
You can't inherit more than one style, but you can set up an inheritance chain.
For those who was looking for solution to just merge multiple different styles into one, you can use
public void applyStyle (int resId, boolean force)
https://developer.android.com/reference/android/content/res/Resources.Theme#applyStyle(int,%20boolean).
And apply it that way
context.theme.applyStyle(R.style.MyAdditionalStyle, false)
Whenever you specify true as second argument, it overrides existing values in your theme, and when false it adds only non-overlapping values from R.style.MyAdditionalStyle
I haven't tested scenario with multiple styles yet, but according to docs you can achieve it. So that's how this approach can be used as an alternative to multiple inheritance.
There is a parent attribute on the style tag that should let you inherit from other styles...
i.e.
<style name="CodeFont" parent="#style/WidgetTextBase">
<item name="android:textStyle">bold</item>
</style>
http://developer.android.com/guide/topics/ui/themes.html

Categories

Resources