I have one app theme and many custom styles for different View.
For example, snippet of code:
<!-- styles.xml -->
<style name="AppBaseTheme" parent="#style/Theme.AppCompat.Light" />
<style name="title">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">22sp</item>
<item name="android:padding">10sp</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:textColor">#color/black</item>
<item name="android:background">#color/background_all_screen</item>
</style>
<style name="label">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textColor">#color/black</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_alignParentLeft">true</item>
<item name="android:layout_marginLeft">5dp</item>
</style>
<style name="button">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_margin">2dp</item>
<item name="android:textSize">18sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:background">#color/blue</item>
</style>
And now I want make many color themes for application. This is mean, that in different color themes custom View was in different colors.
For example, in one color theme button is blue, in another - red.
How can I implement this resources for easy change of theme?
There is a useful tutorial, but what about the custom styles for elements?
UPDATE:
I try it, but this is nor work:
<style name="Button.MyButton" parent="android:style/Widget.Button">
<item name="android:background">#drawable/shape</item>
</style>
<style name ="Button.MyButton.Theme1">
<item name="android:textColor">#000000</item>
</style>
<style name ="Button.MyButton.Theme2">
<item name="android:textColor">#FFFFFF</item>
</style>
<Button
android:id="#+id/save_button"
android:layout_width="0px"
style="#style/Button.MyButton"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/save"/>
This is answer. I just use attributes and after that I can use different colors in different themes.
<!-- values/attributes.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="myCoolColor" format="color" />
</resources>
<!-- styles.xml, define myCoolColor for each theme -->
<style name="Theme.MyApp" parent="#style/Theme.Light">
<item name="myCoolColor">#123456</item>
</style>
<style name="Theme.MyApp.Dark" parent="#style/Theme.Dark">
<item name="myCoolColor">#654321</item>
</style>
Related
I found many solutions for button styling, but I have a small problem about defining multiple button styles. I am coding a calculator and I want to have different button styles for operation buttons and number buttons. So I had to define 2 different button styles. In my styles.xml file, I added following codes:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="buttonStyle">#style/OperationButtons</item>
<item name="buttonStyle">#style/NumberButtons</item>
</style>
<style name="OperationButtons" parent="android:Widget.Button">
<item name="android:background">#263238</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
<style name="NumberButtons" parent="android:Widget.Button">
<item name="android:background">#607D8B</item>
<item name="android:paddingTop">15dp</item>
<item name="android:paddingBottom">15dp</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">.2</item>
<item name="android:textColor">#fff</item>
<item name="android:layout_margin">10dp</item>
<item name="android:textSize">18sp</item>
</style>
</resources>
However, it seems that I'm defining two different button styles and I am getting an error like "Resource entry AppTheme already has bag item buttonStyle."
How can I solve this problem?
The buttonSyle that you define in your AppTheme is the default (so you can have only one).
But you can use the second style in your layouts doing this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/NumberButtons"/>
Don't forget to remove:
<item name="buttonStyle">#style/NumberButtons</item>
How can I customize rate my app dialog of Zendesk. In sample app a style is added in style.xml file and it is working. But I don't know how to apply that style for Rating dialog. Please help me. Thanks in advance.
style.xml:
<!-- +++++++++++++++++++++++++++++++++ -->
<!-- Start rate my app dialogue styles -->
<!-- +++++++++++++++++++++++++++++++++ -->
<style name="rma_button">
<item name="android:background">#color/light_background</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_weight">1</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_title" parent="rma_button">
<item name="android:textSize">22sp</item>
<item name="android:background">#android:color/white</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_divider">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">#color/divider</item>
</style>
<!-- +++++++++++++++++++++++++++++++ -->
<!-- End rate my app dialogue styles -->
<!-- +++++++++++++++++++++++++++++++ -->
<!-- ++++++++++++++++++++++++++++++++++++++++++ -->
<!-- Start rate my app dialogue feedback styles -->
<!-- ++++++++++++++++++++++++++++++++++++++++++ -->
<style name="rma_feedback_issue_cancel_button" parent="_rma_feedback_issue_cancel_button">
<item name="android:background">#drawable/white_gradient_btn</item>
<item name="android:textColor">#color/grey_text</item>
</style>
<!--
This style overrides the parent style to change the background colour of the button
depending on the state
-->
<style name="rma_feedback_issue_send_button" parent="_rma_feedback_issue_send_button">
<item name="android:layout_marginLeft">8dp</item>
<item name="android:background">#drawable/green_gray_btn_selector</item> <!-- Button colour will change -->
<item name="android:textColor">#color/green_gray_txt_selector</item>
</style>
<style name="rma_feedback_message_title" parent="_rma_feedback_message_title">
<item name="android:textColor">#color/grey_text</item>
</style>
<style name="rma_feedback_message_subtitle" parent="_rma_feedback_message_subtitle">
<item name="android:textColor">#color/grey_text</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<!--
In this example we are overriding the parent style using a selector to control the colour
of the text differently whether the edittext is enabled or disabled.
-->
<style name="rma_feedback_issue_edittext" parent="_rma_feedback_issue_edittext">
<item name="android:textColor">#color/enabled_disabled_grey_selector</item>
<item name="android:textColorHint">#color/text_hint</item>
</style>
<style name="rma_feedback_divider" parent="_rma_feedback_divider">
<item name="android:background">#color/divider</item>
</style>
<style name="rma_feedback_progress" parent="_rma_feedback_progress">
<item name="android:indeterminateDrawable">#drawable/progress_green_small_holo</item>
</style>
<!-- ++++++++++++++++++++++++++++++++++++++++ -->
<!-- End rate my app dialogue feedback styles -->
<!-- ++++++++++++++++++++++++++++++++++++++++ -->
Issue resolved by creating a separate theme for the activity that is using RateMyApp dialog and applied styles for button, title and divider of dialog as below
<style name="CustomTheme" parent="Theme.AppCompat">
<item name="RateMyAppPaddingTop">#dimen/rma_padding_top</item>
<item name="RateMyAppPaddingBottom">#dimen/rma_padding_bottom</item>
<item name="RateMyAppButtonStyle">#style/rma_button_style</item>
<item name="RateMyAppTitleStyle">#style/rma_title_style</item>
<item name="RateMyAppDividerStyle">#style/rma_divider_style</item>
<item name="RateMyAppDividerHeight">#dimen/rma_divider_height</item>
</style>
<dimen name="rma_padding_top">24dp</dimen>
<dimen name="rma_padding_bottom">24dp</dimen>
<style name="rma_button_style">
<item name="android:background">#color/light_background</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
<item name="android:layout_weight">1</item>
<item name="android:textColor">#color/black</item>
<item name="android:lineSpacingMultiplier">1.25</item>
</style>
<style name="rma_divider_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">1px</item>
<item name="android:background">#color/divider</item>
</style>
<style name="rma_title_style" parent="rma_button">
<item name="android:textSize">22sp</item>
<item name="android:background">#android:color/white</item>
<item name="android:lineSpacingMultiplier">1.25</item>
<item name="android:textColor">#color/black</item>
</style>
I am working on porting an existing app to a new setup and I got almost everything working, but when I tried to build the project, I got the error that some of the elements in the debug/AndroidManifest.xml are not recognized. Here are some screenshots:
Any idea why that might be happening and how to fix that?
This is my styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#color/white</item>
<item name="android:colorBackground">#color/white</item>
</style>
<style name="home_page_buttons">
<item name="android:layout_marginLeft">10dp</item>
<item name="android:layout_marginRight">10dp</item>
<item name="android:textStyle">bold</item>
<item name="android:color">#color/white</item>
<item name="android:layout_height">45dip</item>
<!-- <item name="android:background">#drawable/white_button</item> -->
</style>
<style name="home_page_two_buttons">
<item name="android:textStyle">bold</item>
<item name="android:color">#color/white</item>
<item name="android:layout_height">45dip</item>
<!-- <item name="android:background">#drawable/white_button</item> -->
</style>
<!-- Information Pages -->
<style name="instruction_text">
<item name="android:padding">10px</item>
<item name="android:textSize">16sp</item>
</style>
<style name="instruction_quote">
<item name="android:padding">10px</item>
<item name="android:textSize">12sp</item>
</style>
<style name="instruction_heading">
<item name="android:padding">10px</item>
<item name="android:textSize">17sp</item>
<item name="android:textColor">#color/light_best_blue</item>
</style>
</resources>
You mentioned the android:theme as "AppBaseTheme" but i do not see that style in your style.xml file.
I am trying to make all buttons in my app have default color using colorButtonNormal in my style.
It works nice on API 21 and above but under API 21 it only changes the background of some buttons and i dont know what is going wrong.
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
<item name="colorAccent">#color/btn_login</item>
<item name="colorButtonNormal">#color/btn_login</item>
</style>
</resources>
v21/styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
<item name="android:colorButtonNormal">#color/btn_login</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
<item name="colorAccent">#color/btn_login</item>
</style>
<style name="AlertDialogCustom" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="android:colorPrimary">#color/btn_login</item>
<item name="android:colorAccent">#color/btn_login</item>
<item name="colorAccent">#color/btn_login</item>
<item name="colorPrimary">#color/btn_login</item>
<item name="colorPrimaryDark">#color/bg_login</item>
</style>
<style name="Preference" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/black</item>
<item name="android:colorPrimary">#color/btn_login</item>
<item name="android:colorAccent">#color/btn_login</item>
<item name="android:editTextColor">#color/black</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:alertDialogTheme">#style/AlertDialogCustom</item>
<item name="colorAccent">#color/btn_login</item>
</style>
<style name="EditTextThemeCustom" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="android:editTextColor">#color/black</item>
<item name="android:textColor">#color/black</item>
<item name="colorAccent">#color/btn_login</item>
</style>
</resources>
Result:
Lollipop
and
Kitkat
Any suggestions?
Add to your styles.xml
<style name="ColoredButton" parent="Widget.AppCompat.Button">
<item name="colorButtonNormal">#color/btn_login</item>
</style>
and then use
android:theme="#style/ColoredButton"
as one of your buttons' attributes
The buttons you inflate will get automatically translated to AppCompatButton.
Wherever you have new Button(context) you need to use new AppCompatButton(context) instead for Material theme colors to apply.
I was getting this issue in old devices(<21) because, my activity was extending just activity when I make in it extend AppCompatActivity, in old devices also it is working perfect.
I want to customize the up button, I am using appcompat library for my actionbar. I don't want the default up button which android provides. Because I am using actionbar that has produced by style generator. So that up button looks pale with the color of actionbar that I selected. Can someone please suggest me how to achieve it? I have searched lot but couldn't find.
I have prepared my own image for it. So I want to replace that with my image. I believe it is possible. Because googleplay displays the actionbar with up button in different color in the apps section.
Below is the styles.xml:
<style name="Theme.Customab" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarItemBackground">#drawable/selectable_background_customab</item>
<item name="popupMenuStyle">#style/PopupMenu.Customab</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Customab</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Customab</item>
<item name="actionDropDownStyle">#style/DropDownNav.Customab</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Customab</item>
<item name="actionModeBackground">#drawable/cab_background_top_customab</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_customab</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Customab</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">#style/Theme.Customab.Widget</item>
**<item name="android:homeAsUpIndicator">#drawable/customup</item>**
</style>
<style name="ActionBar.Solid.Customab" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/ab_solid_customab</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_customab</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_customab</item>
<item name="progressBarStyle">#style/ProgressBar.Customab</item>
</style>
<style name="ActionBar.Transparent.Customab" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/ab_transparent_customab</item>
<item name="progressBarStyle">#style/ProgressBar.Customab</item>
</style>
<style name="PopupMenu.Customab" parent="#style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_customab</item>
</style>
<style name="DropDownListView.Customab" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_customab</item>
</style>
<style name="ActionBarTabStyle.Customab" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_customab</item>
</style>
<style name="DropDownNav.Customab" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_customab</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_customab</item>
<item name="android:dropDownSelector">#drawable/selectable_background_customab</item>
</style>
<style name="ProgressBar.Customab" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_customab</item>
</style>
<style name="ActionButton.CloseMode.Customab" parent="#style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_customab</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Customab.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Customab</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Customab</item>
</style>
Adding this item to your custom theme that is related with pre-Honeycomb will give an error because that attribute does not exist in the Android framework on older devices.
<item name="android:homeAsUpIndicator">#drawable/action_up_caret</item>
Instead of "android:homeAsUpIndicator" you should override "homeAsUpIndicator" attribute in your custom theme if you are using AppCompat library.
<item name="homeAsUpIndicator">#drawable/action_up_caret</item>
Note: Here's the AppCompat source if you're interested. https://github.com/android/platform_frameworks_support/tree/master/v7/appcompat or https://android.googlesource.com/platform/frameworks/support/+/master/v7/appcompat/
Here is some of the files of the my test project:
values\styles_example.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Example" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="popupMenuStyle">#style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Example</item>
<item name="actionBarTabStyle">#style/ActionBarTabStyle.Example</item>
<item name="actionDropDownStyle">#style/DropDownNav.Example</item>
<item name="actionBarStyle">#style/ActionBar.Solid.Example</item>
<item name="actionModeBackground">#drawable/cab_background_top_example</item>
<item name="actionModeSplitBackground">#drawable/cab_background_bottom_example</item>
<item name="actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Example</item>
<!-- Light.DarkActionBar specific -->
<item name="actionBarWidgetTheme">#style/Theme.Example.Widget</item>
<item name="homeAsUpIndicator">#drawable/ic_launcher</item>
</style>
<style name="ActionBar.Solid.Example" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/ab_solid_example</item>
<item name="backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="backgroundSplit">#drawable/ab_bottom_solid_example</item>
<item name="progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="ActionBar.Transparent.Example" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#drawable/ab_transparent_example</item>
<item name="progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="PopupMenu.Example" parent="#style/Widget.AppCompat.PopupMenu">
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
</style>
<style name="DropDownListView.Example" parent="#style/Widget.AppCompat.ListView.DropDown">
<item name="android:listSelector">#drawable/selectable_background_example</item>
</style>
<style name="ActionBarTabStyle.Example" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator_ab_example</item>
</style>
<style name="DropDownNav.Example" parent="#style/Widget.AppCompat.Spinner.DropDown.ActionBar">
<item name="android:background">#drawable/spinner_background_ab_example</item>
<item name="android:popupBackground">#drawable/menu_dropdown_panel_example</item>
<item name="android:dropDownSelector">#drawable/selectable_background_example</item>
</style>
<style name="ProgressBar.Example" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:progressDrawable">#drawable/progress_horizontal_example</item>
</style>
<style name="ActionButton.CloseMode.Example" parent="#style/Widget.AppCompat.ActionButton.CloseMode">
<item name="android:background">#drawable/btn_cab_done_example</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Example.Widget" parent="#style/Theme.AppCompat">
<item name="popupMenuStyle">#style/PopupMenu.Example</item>
<item name="dropDownListViewStyle">#style/DropDownListView.Example</item>
</style>
</resources>
values-v14\styles_example.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.Example" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarItemBackground">#drawable/selectable_background_example</item>
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.Example</item>
<item name="android:actionDropDownStyle">#style/DropDownNav.Example</item>
<item name="android:actionBarStyle">#style/ActionBar.Solid.Example</item>
<item name="android:actionModeBackground">#drawable/cab_background_top_example</item>
<item name="android:actionModeSplitBackground">#drawable/cab_background_bottom_example</item>
<item name="android:actionModeCloseButtonStyle">#style/ActionButton.CloseMode.Example</item>
<!-- Light.DarkActionBar specific -->
<item name="android:actionBarWidgetTheme">#style/Theme.Example.Widget</item>
<item name="android:homeAsUpIndicator">#drawable/ic_launcher</item>
</style>
<style name="ActionBar.Solid.Example" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/ab_solid_example</item>
<item name="android:backgroundStacked">#drawable/ab_stacked_solid_example</item>
<item name="android:backgroundSplit">#drawable/ab_bottom_solid_example</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example</item>
</style>
<style name="ActionBar.Transparent.Example" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#drawable/ab_transparent_example</item>
<item name="android:progressBarStyle">#style/ProgressBar.Example</item>
</style>
<!-- this style is only referenced in a Light.DarkActionBar based theme -->
<style name="Theme.Example.Widget" parent="#style/Theme.AppCompat">
<item name="android:popupMenuStyle">#style/PopupMenu.Example</item>
<item name="android:dropDownListViewStyle">#style/DropDownListView.Example</item>
</style>
</resources>
This way should able to able to get a look like this in your activity.
Keep your image in drawable folder
specify attribute .
android:logo
Because ActionBar will use the android:logo attribute of your manifest, if one is provided. That lets you use separate drawable resources for the icon (Launcher) and the logo (ActionBar, among other things).
I've not used AppCompat, but it's pretty simple(but hard to find out) on Android 4.0.
You need to add the following item to your Application theme XML.
<item name="android:homeAsUpIndicator">#drawable/action_up_caret</item>