I tried to change the colour of actionbar by making few changes in default theme.
But the problem is when the colour changes, it hides the settings button.please suggest me the changes.
Heres the xml file for styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorWhite</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
You can add the android:textColorSecondary attribute to your theme.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
.....
<!-- color of the menu overflow icon -->
<item name="android:textColorSecondary">#color/my_color</item>
</style>
Otherwise, since you are using a white Toolbar, you can use override the theme with:
<android.support.v7.widget.Toolbar
app:theme="#style/ThemeToolbar" />
with:
<style name="ThemeToolbar" parent="Theme.AppCompat.Light">
<!-- navigation icon color -->
<item name="colorControlNormal">#color/my_color</item>
<!-- color of the menu overflow icon -->
<item name="android:textColorSecondary">#color/my_color</item>
</style>
Related
I am trying to change option menu background , but there is white space top and bottom
my toolbar style
app:popupTheme="#style/ThemeOverlay.MyTheme"
<style name="ThemeOverlay.MyTheme" parent="ThemeOverlay.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- To change the popup menu and app text color -->
<item name="android:textColor">#color/white</item>
<!-- To change the background of options menu-->
<item name="android:itemBackground">#color/black</item>
</style>
Example:
Are you searching for this?
Create style for menu in your app style and add that entry in theme of your app
don't forgot to add that theme in you menifest's Application tag
android:theme="#style/AppTheme"
There problem with the material theme
<style name="Theme.MyApplication" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="android:itemBackground">#color/bluish_green</item>
</style>
<style name="ThemeOverlay.MyTheme" parent="Theme.MyApplication">
<!-- To change the popup menu and app text color -->
<item name="android:textColor">#color/white</item>
<!-- To change the background of options menu-->
<item name="android:itemBackground">#color/black</item>
<item name="android:popupBackground">#color/black</item>
<item name="android:drawablePadding">0dp</item>
<item name="android:dividerHeight">1dp</item>
</style>
Here is my styles code
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/lightGrey</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/grey</item>
<item name="colorControlNormal">#color/lightGrey</item>
</style>
<style name="TextAppearance.AppCompat.Widget.ActionBar.Title"
parent="#android:style/TextAppearance">
<item name="android:textColor">#color/mediumBlack</item>
</style>
and here is the navigation UI code
val myNavController = this.findNavController(R.id.myNavHostFragment)
NavigationUI.setupActionBarWithNavController(this, myNavController)
Text changing colour works fine at style name "TextAppearance.AppCompat.Widget.ActionBar.Title"
but I want to change the colour of the upButton.
Its showing white by default, I want to change it to black.
In your app theme add the actionBarTheme attribute:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
.....
<item name="actionBarTheme">#style/MyActionBarTheme</item>
</style>
with:
<style name="MyActionBarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="colorControlNormal">#color/....</item>
</style>
I'm trying to make the action bar color in blue but always is black, I'm using to files for styles : styles.xml and styles-21.xml.
This the code in styles-21.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="android:colorPrimary">#color/blue_color_500</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="android:colorPrimaryDark">#color/blue_color_900</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="android:colorAccent">#color/purple_color_200</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="#android:background">#color/blue_color_500</item>
<item name="background">#color/blue_color_500</item>
</style>
and this is the style for styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<!-- Customize your theme here. -->
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/blue_color_500</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/blue_color_900</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#color/purple_color_200</item>
<item name="android:windowBackground">#color/blue_color_50</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/blue_color_500</item>
<item name="background">#color/blue_color_500</item>
</style>
My class inheritance from AppCompatActivity...
Any help with that?
Thank you in advance.
Check this link from official android docs. You should use not only android:actionBarStyle but actionBarStyle too while using compatibility lib.
Here is a way to change the color of your Action Bar :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/mainColor</item>
<item name="colorPrimaryDark">#color/mainColorDark</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarWidgetTheme">#style/ActionBarWidget</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="AppTheme">
<item name="theme">#style/ThemeOverlay.MyApp.ActionBar</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
</style>
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/white</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/mainColor</item>
</style>
<style name="ActionBarWidget" parent="Theme.AppCompat.Light.DarkActionBar"/>
<color name="mainColor">#E41F26</color>
The Action Bar will be colored with mainColor defined at the end ! I Hope it will help
Thank you very much, you were right this is the code fix it:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<!-- Customize your theme here. -->
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/blue_color_500</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/blue_color_900</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#color/purple_color_200</item>
<item name="android:windowBackground">#color/blue_color_50</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/blue_color_500</item>
<item name="background">#color/blue_color_500</item>
</style>
I had previously set the colour of my window background to white and now I am trying to change the colour of just the action bar to green. This is my xml code:
<style name = "CustomAppTheme2" parent = "android:Widget.Holo.Light">
<item name="android:windowBackground">#color/white</item>
<item name="android:background">#color/green</item>
<item name="android:icon">#android:color/transparent</item>
</style>
The problem is that using android:background to change the colour of the action bar, it overflows and changes the colour of the whole screen to green. I want a clear-cut green action bar and a white window below it. Thanks in advance!
<!-- Base application theme. -->
<style name="AppTheme" parent="#style/CustomActionBarTheme">
<!-- Customize your theme here. -->
</style>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- Support library compatibility -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#drawable/top_bar_blue</item>
<!-- Support library compatibility -->
<item name="background">#drawable/top_bar_blue</item>
<item name="titleTextStyle">#style/myTheme.ActionBar.Text</item>
</style>
<!-- ActionBar Text -->
<style name="myTheme.ActionBar.Text" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:fontFamily">sans-serif-bold</item>
</style>
<!-- In Manifest -->
android:theme="#style/AppTheme"
You could extend ActionBarActivity from one of your classes and do something like this:
ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);
actionBar.setDisplayShowTitleEnabled(true);
actionBar.setTitle(mTitle);
//Change the color of the actionbar by changing the value in the next line
actionBar.setBackgroundDrawable(new ColorDrawable(#FFFFFF));
How do I make the ActionBar title uppercase? Some answers suggest putting <item name="android:textAllCaps">true</item> but this has no effect when I put it in the actionBar style or actionBar's titleTextStyle. It only has an effect when I put in in the AppTheme style but that makes a bunch of things in my app also in all caps which I don't want.
My styles:
<style name="AppTheme" parent="AppBaseTheme">
<!-- snip snip -->
<item name="android:actionBarStyle">#style/NewActionBar</item>
</style>
<style name="NewActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="android:background">#color/text_pink</item> <!-- no effect -->
<item name="android:titleTextStyle">#style/NewActionBarTitle</item>
<item name="android:displayOptions">showHome|showTitle</item>
<item name="android:textAllCaps">true</item> <!-- no effect -->
</style>
<style name="NewActionBarTitle">
<item name="android:textSize">#dimen/tiny_text_size</item> <!-- no effect -->
<item name="android:textAllCaps">true</item> <!-- no effect -->
</style>
And why do the NewActionBar and NewActionBarTitle styles appear to have no effect no matter what I put in them? Is there something wrong with my styles or my action bar or what?
Edit: I've just deleted entirely the styles NewActionBar and NewActionBarTitle (and the reference to them in the AppTheme style) and the action bar looks completely the same. So something is broken. What could it be?
You need to set android:textAllCaps="true" on the text appearance for the action bar's title, rather than the action bar style itself or on your base activity theme.
<style name="AppTheme" parent="AppBaseTheme">
...
<item name="actionBarStyle">#style/Widget.MyApp.ActionBar.Solid</item>
</style>
<style name="Widget.MyApp.ActionBar.Solid"
parent="Widget.AppCompat.ActionBar.Solid">
<item name="titleTextStyle">#style/TextAppearance.MyApp.Widget.ActionBar.Title</item>
</style>
<style name="TextAppearance.MyApp.Widget.ActionBar.Title"
parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textAllCaps">true</item>
</style>