So, I have this weird issue: My app is very simple, main activity with just one button in it and custom theme for the activity set in the manifest.
I can confirm the theme works and is selected, as I can change activity background or font color e.g.
But when I try to style all Buttons on my activity, it does not work!
This is the styles.xml code I use:
<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="android:background">#0f0</item>
<item name="android:buttonStyle">#style/btxs</item>
</style>
<style name="btxs" parent="#android:style/Widget.Button">
<item name="android:textColor">#f00</item>
</style>
</resources>
Background of activity is green (so theme works), but button is still default.
Is android:buttonStyle correct way of setting button style in theme?
for reference I paste also my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_below="#+id/textView"
android:layout_toEndOf="#+id/textView"
android:layout_marginTop="25dp" />
</RelativeLayout>
An AppCompatActivity will use buttonStyle. I'm also assuming that you probably want to extend Base.Widget.AppCompat.Button.
<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="android:background">#0f0</item>
<item name="buttonStyle">#style/btxs</item>
</style>
<style name="btxs" parent="Base.Widget.AppCompat.Button">
<item name="android:textColor">#f00</item>
</style>
</resources>
Related
Hello I need help on changing the text color of the action Bar the following is my style.xml.I need to change the text color to white including the settings icon.
<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>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
The String.xml source codes are as follows.
<resources>
<string name="app_name">yebo</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="action_settings">Settings</string>
</resources>
try this
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/red</item>
</style>
</resources>
Change in your style.
<!-- 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>
Add underneath line:
<item name="actionMenuTextColor">Your Color Here</item>
<item name="textColorPrimary">Your Color Here</item>
</style>
Hope it helps.
You can simply put color to your strings like this:
<string name="app_name"><![CDATA[<b><font color=#FFFFFF>yebo</b>]]></string>
In your .axml put a RelativeLayout to add the actionbar. In here add a TextView with the property android:textColor="#FFFFFF". (#FFFFFF is white). As such:
<RelativeLayout
android:id="#+id/titleBarLinearLayoutFrontPage"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:background="#696969">
<TextView
android:textColor="#FFFFFF"
android:id="#+id/txtActionBarText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Action Bar"
android:layout_gravity="center"
android:clickable="true"
android:layout_centerVertical="true"
android:textSize="22dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="60dp"
android:layout_centerHorizontal="true" />
</RelativeLayout>
Valus/styles.xml uses colors.xml file. When you press "control" and click #color/colorPrimary it shows you where colorPrimary comes. Which is colors.xml. In your colors.xml file you can edit it.
When you click the colour on the left it opens color palette. And you can change it easily.
This is my layout.xml derives all view parameters from styles.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res /android"
android:layout_width="match_parent"
style="#style/DataContainer">
<ImageView
android:id="#id/df_flight_logo"
style="#style/FlightLOGO"
/>
<TextView
android:id="#id/flight_name"
style="#style/FlightName"
/>
<TextView
android:id="#id/flight_price"
style="#style/FlightPrice"
/>
</RelativeLayout>
This is my styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="DataContainer">
<item name="android:layout_height">125dp</item>
<item name="android:background">#ffffff</item>
</style>
<style name="FlightLOGO">
<item name="android:layout_height">25dp</item>
<item name="android:layout_weight">25dp</item>
<item name="android:background">#drawable/background</item>
</style>
<style name="FlightName">
<item name="android:layout_height">32dp</item>
<item name="android:background">#b2b2b2</item>
</style>
<style name="FlightPrice">
<item name="android:layout_height">12dp</item>
<item name="android:layout_marginLeft">18dp</item>
<item name="android:background">#b2b2b2</item>
</style>
</resources>
So Should i place all view attributes(width,height,margin,padding) to styles.xml? or properties for specific view(button styles, text styles) to styles.xml?
According to your comment explaining what you are trying to do, you should use dimens instead. They are resources like strings.
<resources>
<dimen name="title_size">32sp</dimen>
</resources>
And for example usage with TextView
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/title_size"/>
Now you have different dimens.xml files for different screen sizes, but layout stays the same!
An example is here
http://android4beginners.com/2013/07/appendix-c-everything-about-sizes-and-dimensions-in-android/
I have got the following action menu:
As you can see all of these action menu items are having a
background. i guess it is the same background like the parent.
How can i remove this background?
My style.xml is the following:
<resources xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorAccent">#color/accentColor</item>
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:actionModeBackground">#color/primaryColor</item>
<item name="android:windowActionModeOverlay">true</item>
<item name="android:activatedBackgroundIndicator">#drawable/custom_background_listview_item</item>
</style>
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColorPrimary">#color/textcolorsecundary</item>
<item name="actionMenuTextColor">#color/textcolorsecundary</item>
<item name="android:textColorSecondary">#color/textcolorsecundary</item>
<item name="android:showDividers">beginning</item>
<item name="android:divider">#color/primaryColorDark</item>
<item name="android:background">#drawable/custom_background_blue</item>
</style>
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#color/primaryColor</item>
</style>
</resources>
My Toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:elevation="2dp"
android:focusable="false"
app:popupTheme="#style/AppTheme.Toolbar.PopupMenu"
app:theme="#style/AppTheme.Toolbar" >
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="#null"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
The following line is the problem
<style name="AppTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/custom_background_blue</item>
</style>
Since the above is applied not as style but as a theme (presumably via popupTheme attribute on your Toolbar element), all the widgets inside the toolbar inherit these settings. What you want is android:popupBackground instead of android:background.
Edit: OP stated the above is not sufficient. For styling toolbar's popup menu (not the toolbar itself) use the app:popupTheme attribute. The theme is going to be similar to this:
<style name="AppTheme.Toolbar.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:popupBackground">#drawable/custom_background_blue</item>
</style>
You're setting the action background color explicitly in your style.xml same as the primary color.
<item name="android:actionModeBackground">#color/primaryColor</item>
Try removing this from your XML or changing it to a color that seems appropriate for your UI and it should work. If you don't choose to manually specify a color for the android:actionModeBackground, it will simple derive it's default value from the parent theme (in your case, Theme.AppCompat.Light.NoActionBar).
I would like to set my spinner drop down color to white, whilst keeping the other elements in my theme the default color. Here is the situation:
<android.support.v7.widget.Toolbar
android:layout_height="#dimen/action_bar_height"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarTheme.Base"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"/>
</android.support.v7.widget.Toolbar>
And the style is:
<!-- My base app theme -->
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/theme_tint</item>
<!-- <item name="colorControlNormal">#FFFFFF</item> -->
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:typeface">sans</item>
<item name="android:windowBackground">#color/background_primary</item>
</style>
<!-- My Toolbar theme -->
<style name="ToolbarTheme.Base" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="colorControlNormal">#FFFFFF</item>
</style>
If I was to put <item name="colorControlNormal">#FFFFFF</item> in the App theme (commented out above) then the spinner drop down will do to white BUT the checkbox will also turn white. So how can I get the spinner ONLY to go white?
Finally, I have found a solution on how to change arrow color of Spinner to white.
1) In styles.xml, add the following style:
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlHighlight">#ff33b5e5</item>
</style>
<style name="Widget.MyTheme.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:theme">#style/ActionBarThemeOverlay</item>
</style>
2) In the layout, where you use the Spinner (in your case with Toolbar), add the style to your spinner:
<Spinner
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/my_spinner"
style="#style/Widget.MyTheme.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Just stumbled across this questions. Even though it has been asked some time ago I just wanted to leave an answer that should work:
Toolbar *.xml
<android.support.v7.widget.Toolbar
<!-- leave the theme stuff out of here -->
style="#style/MyToolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
Styles / Themes
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your other attributes -->
<!-- following is used to tint the checkbox - purple for demo purpose -->
<item name="colorControlNormal">#2196F3</item>
</style>
<style name="MyToolbarStyle">
<item name="android:minHeight">?actionBarSize</item>
<item name="android:background">?colorPrimary</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme">
<!-- Used to tint the back arrow, menu and spinner arrow -->
<item name="colorControlNormal">#FFF</item>
</style>
Result
Note: I made the checkbox purple for demo purpose
I have a styles.xml where I have defined styles
<!-- =============================================================== -->
<!-- Dark styles -->
<!-- =============================================================== -->
<style name = "AppBgDark">
<item name="android:background">#333333</item>
</style>
<style name = "CardBgDark">
<item name="android:background">#drawable/rounded_corners_dark</item>
</style>
<style name="event_title_dark">
<item name="android:textColor">#fff</item>
</style>
<style name="event_date_dark">
<item name="android:textColor">#fff</item>
</style>
<style name="event_location_dark">
<item name="android:textColor">#aaa</item>
</style>
<style name="event_calendar_dark">
<item name="android:textColor">#aaa</item>
</style>
<style name="Actionbar_dark" parent= "Widget.Sherlock.Light.ActionBar">
<item name = "android:background">#333333</item>
the same way for a light theme as well.
Then i have created a themes.xml and a attrs.xml to refference these styles.
The problem is when i apply the references from the attrs.xml in the layout i can see no changes happening
For example:
<LinearLayout
android:id="#+id/cardlayout"
style="?card_background"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:orientation="vertical"
android:padding="7dp" >
where am I going wrong? Any suggestions? I am really confused!!!