I'm trying to change the background color of my ActionBar as well as the title color. I must say I am using the support library.
My styles are as follows.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="background">#color/red_300</item>
<item name="android:background">#color/red_300</item>
<item name="colorPrimary">#color/red_300</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Title</item>
</style>
<style name="AppTheme.ActionBar.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/red_700</item>
<item name="android:textColorPrimary">#00FF00</item>
</style>
And in styles-v21
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="background">#color/red_300</item>
<item name="android:background">#color/red_300</item>
<item name="colorPrimary">#color/red_300</item>
<item name="android:colorPrimary">#FF0000</item>
<item name="android:colorAccent">#FF0000</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Title</item>
</style>
<style name="AppTheme.ActionBar.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:colorPrimary">#FFFF00</item>
<item name="android:colorAccent">#FFFF00</item>
<item name="android:textColor">#color/red_700</item>
<item name="android:textColorPrimary">#00FF00</item>
</style>
As you guys might see by the amount of attemps to change it, I am already losing my mind. Any clues as to how I can change the ActionBar background and it's title color?
I must note that I am trying this on Android 6.
In the ToolBar creation (xml), setting the app:theme fixed it. Specifying a theme there with it's colorPrimary changed the background of the ActionBar without affecting the base theme.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
and the theme:
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
</style>
Related
We are not able to style the actionmenu items in our app, tried setting the style in different ways. We are using androidx libraries. Please let us know what we might be doing wrong. Appreciate your help.
<style name="MenuTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Menu">
<item name="android:textColor">#F0F</item>
<item name="android:textStyle">normal</item>
<item name="android:textSize">10sp</item>
</style>
<style name="AppThemeMm" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item> //This works
<item name="colorPrimaryDark">#color/colorPrimaryDark</item> //This works
<item name="colorAccent">#color/colorAccent</item> //This works
<item name="android:actionMenuTextAppearance">#style/MenuTextStyle</item> //This does not work
</style>
Try something like this
<!-- 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="android:dropDownListViewStyle">#style/actionMenuDropDown</item>
<item name="android:listPreferredItemHeightSmall">50dp</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="actionMenuDropDown" parent="#android:style/Widget.Holo.ListView.DropDown">
<item name="android:divider">#5A5252</item>
<item name="android:dividerHeight">1sp</item>
<item name="android:listSelector">#FFEA00</item>
<item name="android:background">#AC2299</item>
<item name="android:textColor">#443A43</item>
</style>
If you are using PopupOverlay text color will not change. But you can override the text color like this
<style name="AppTheme.MyPopupOverlay" parent="ThemeOverlay.AppCompat.Dark" >
<item name="android:textColor">#AC5532</item>
</style>
And use it like this
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.MyPopupOverlay" />
This is what worked for us. Added customisation directly to PopupOverlay.
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:textSize">14sp</item>
</style>
In the custom toolbar
app:popupTheme="#style/AppTheme.PopupOverlay"
I'm using a transparent ActionBar with a white title. Unfortunately the title has its own background.
This is my styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:colorPrimary">#color/app_color</item>
<item name="android:colorPrimaryDark">#ff077fb1</item>
<item name="android:colorAccent">#color/app_color</item>
<item name="android:windowActionModeOverlay">true</item>
<!-- Support library compatibility -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#color/app_color</item>
<item name="colorPrimaryDark">#ff077fb1</item>
<item name="colorAccent">#color/app_color</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="MyActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:background">#drawable/actionbar_background</item>
<item name="background">#drawable/actionbar_background</item>
</style>
Here is the toolbar used:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
sothree:theme="#style/MyActionBar">
How can I get rid of that blue title background?
I'm doing this when defining textAppearance in toolbar
sothree:titleTextAppearance="#style/MyToolbar.TextAppearance"
style
<style name="MyToolbar.TextAppearance">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/toolbar_title_text_color</item>
<item name="android:background">#color/mytransparentcolor</item>
</style>
I solved this by removing
<item name="android:background">#drawable/actionbar_background</item>
<item name="background">#drawable/actionbar_background</item>
from styles.xml and adding the background color programatically to the toolbar using
toolbar.setBackgroundColor(myColor);
I am building my first (material designed) app in Android Studio. I am following Slidnerd's Material design playlist, I'm up to #5. I wanted to know how I can have the menu popup to have dark text while have white primary and secondary text. Thanks!
If i undestood your question, you need this:
Set color of Toolbar in xml:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/my_awesome_toolbar"
android:layout_height="56dp"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/purple_800" <!--color-->
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
android:elevation="2dp"/>
And another in style:
<style name="NoActionBarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#fff</item>
<item name="android:windowAnimationStyle">#null</item>
</style>
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#color/gray_800</item>
<item name="colorControlHighlight">#color/gray_800</item>
<item name="android:textColor">#fff</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#fff</item>
</style>
and in values-v21 include this too
<item name="android:colorPrimary">#color/purple_900</item>
<item name="android:colorPrimaryDark">#color/purple_900</item>
I am using Theme.AppCompat.Light.NoActionBar theme. I am getting a white background for popup menu and also the color of menu item is white that makes it invisible. I tried many solutions with no success.
This is my styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionMenuTextColor">#000000</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:popupMenuStyle">#style/PopupMenu</item>
<item name="android:textAppearanceLargePopupMenu">#style/myPopupMenuTextAppearanceLarge</item>
<item name="android:textAppearanceSmallPopupMenu">#style/myPopupMenuTextAppearanceSmall</item>
<!-- Customize your theme here. -->
</style>
<style name="PopupMenu" parent="#android:style/Widget.PopupMenu">
<item name="android:popupBackground">#android:color/white</item>
<item name="android:textColor">#000000</item>
<item name="android:textSize">12sp</item>
</style>
<style name="myPopupMenuTextAppearanceSmall" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Small" tools:ignore="NewApi">
<item name="android:textColor">#000000</item>
<item name="android:textSize">15sp</item>
</style>
<style name="myPopupMenuTextAppearanceLarge" parent="#android:style/TextAppearance.DeviceDefault.Widget.PopupMenu.Large" tools:ignore="NewApi">
<item name="android:textColor">#000000</item>
<item name="android:textSize">25sp</item>
</style>
This is the toolbar
<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="wrap_content"
android:background="#color/toolbar"
android:elevation="8dp"
app:theme="#style/AppTheme"
app:title="Troll Cricket" />
Add these lines to your Toolbar.xml file.
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
This will allow you to have a dark toolbar and light-themed overflow menu.
I'm facing this weird problem with the bar that appears when you select a text
I'm using Appcompat v7 library the last version. This is my theme defenition:
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/material_blue_grey_800</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="vpiTabPageIndicatorStyle">#style/TabStyle</item>
<item name="android:textAppearanceButton">#style/AppTheme.ButtonTextAppearance</item>
<item name="android:textViewStyle">#style/MyTextViewStyle</item>
</style>
<style name="MyTextViewStyle" parent="android:Widget.TextView">
<item name="android:textColor">#color/text</item>
<item name="android:textColorLink">#color/colorPrimary</item>
</style>
<style name="AppTheme.ButtonTextAppearance" parent="#style/Base.TextAppearance.AppCompat.Button">
<item name="textAllCaps">false</item>
<item name="android:textAllCaps">false</item>
</style>
None of the colors are white, so I don't really know where it comes this white bar color and white icons.
Any clue?
In order to make the text selection actionMode background color, use the below in your style:
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#color/dodgerblue</item>
try using the following style
<style name="customToolbar" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/white</item>
<item name="android:textColorPrimary">#color/primary_dark</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
and in your toolbar add following attributes
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/primary"
app:popupTheme="#style/customToolbar"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
</android.support.v7.widget.Toolbar>