How to make all action bar items white? - android

I cannot use Theme.AppCompat.Light.DarkActionBar because of this HTC bug.
So I've been trying to find a workaround. I attempted to remove the DarkActionBar and just use Theme.AppCompat.Light as a parent of my app theme; it fixed the bug, but some items in my action bar appear black:
Items that appear black: v7 ActionBarDrawerToggle, SearchView controls, SearchView text, overflow menu icon, menu item text.
Is there a way to make them all white?

Use Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:background="#color/blue"
android:layout_height="#dimen/actionbar_height"/>
And add this on style and manifest:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/white</item>
<item name="colorPrimaryDark">#color/light_gray</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="colorAccent">#color/white</item>
<item name="android:textColorPrimaryInverse">#color/white</item>
<item name="actionMenuTextColor">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowBackground">#color/white</item>
</style>

Related

Proper toolbar styling

I would like to avoid applying a style to the toolbars in all layouts, so I have a style I created for it:
<style name="DarkToolbar" >
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
And I added it to my theme as follows:
<style name="Theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="colorAccent">#color/blue</item>
<item name="android:toolbarStyle">#style/DarkToolbar</item>
</style>
This is the resulting toolbar:
As you can see, the title and subtitle have the wrong formatting. If I remove the style from the theme and apply it directly to the toolbar in the layout, I get the following result instead:
Both images use the same style. One is applied through the app theme with
<item name="android:toolbarStyle">#style/DarkToolbar</item>
and the second one is applied directly to the toolbar with
style="#style/DarkToolbar"
Does anyone know the reason for the difference?
Also, does anyone know why the
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
Are not being applied?
Thanks
Add parent="Widget.AppCompat.Toolbar" to your toolbar style. It is default style for toolbar.
For example:
<style name="DarkToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
I think this has to do with
< item name="android:theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar< /item>
in your style
I personally find styling toolbar text quite complicated, so mostly end up with my own TextView. How about using your own TextView inside toolbar. It would be easy, though a bit lengthy.
You are setting parent as no action bar in your theme, as this will give you the run time exception and null point exception as there is no action bar or tool bar to set the title/sub-title. Try adding parent in your theme with toolbar or action bar likes this.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="DarkToolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
<item name="android:background">#color/blue</item>
<item name="android:elevation">4dp</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="colorAccent">#color/blue</item>
<item name="android:toolbarStyle">#style/DarkToolbar</item>
</style>
</resources>

How to set the Actionbar action Overflow indicator (three dots) color and splitActionBar?

I am developing an app with the action bar And I wanted to make it split. in action bar I am using toolbar. let me first put some of my code here and let me tell you what I want.
I am setting my toolbar in to Actionbar and here is the xml of my toolbar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/header_actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/iv_header"
/>
</android.support.v7.widget.Toolbar>
and in main activity I am calling it as below after finding my id of toolbar:
if (toolbar != null) {
setSupportActionBar(toolbar);
}
**
What I want
**
1.Now every thing has set and looking great. but accept the one thing and that is I want to make the text color to white of three dots which shows action, currently they are in black color. How can I change them to white.
2. Secondly I want to show split action bar so I am trying this but it never shows up what could be the reason? All I want a below bar as used in viber app.
For explanation of my app action icon(three dots: which shows action) i have done so many changes to my style but nothing really help , what I have done in it so far is given below :
Style.xml :
<resources>
<style name="myAppTheme" parent="Base.Theme.AppCompat.Light">
<item name="colorPrimary">#color/primaryColor</item>
<item name="colorPrimaryDark">#color/primaryColorDark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="windowNoTitle">true</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="titleTextStyle">#style/MyTitleTextStyle</item>
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
<style name="MyTitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="actionMenuTextColor">#ffffff</item>
<item name="android:actionMenuTextColor">#ffffff</item>
</style>
</resources>
Note: My activity extends to appcompactactivity.
In your MyActionBar theme, have these attributes :
<item name="android:textColorSecondary">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
This worked for me. I hope it does for you too.

Toolbar ActionMode background pre Lollipop does not work

Toolbar ActionMode seems to ignore my style on devices pre Lollipop.
Here is my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textColorPrimary">#DD000000</item>
<item name="android:textColorSecondary">#8A000000</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- colorPrimary is used for the default action bar background -->
<!-- Set AppCompat’s color theming attrs -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/secondary</item>
<item name="colorAccent">#color/accent</item>
<item name="android:actionModeStyle">#style/Widget.ActionMode</item>
<item name="android:actionModeBackground">#drawable/toolbar_action_background</item>
<item name="android:actionModeCloseDrawable">#drawable/ic_arrow_back_white_24dp</item>
</style>
<style name="Widget.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
</style>
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
</style>
And my toolbar xml
<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:elevation="4dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary" />
I've checked these questions:
How to specify dark action mode with my theme
Toolbar and Contextual ActionBar with AppCompat-v7
Unable to style action mode when using Toolbar
Expected behaviour, works fine on lollipop:
How it looks on kitkat:
Solved by specifying booth android namspace and without in my theme:
...
<item name="actionModeStyle">#style/ActionMode</item>
<item name="android:actionModeStyle">#style/ActionMode</item>
...
<style name="ActionMode" parent="Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="background">#drawable/toolbar_action_background</item>
</style>
Look at your Toolbar's theme:
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The first style, you didn't give a name. You missed some lines. Then, let's suppose the style which has no name, its name is ToolbarStyle which has a line of <item name="colorPrimary">#color/primary</item> which does matter. Then at your Toolbar layout, replace your app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" by app:theme="#style/ToolbarStyle". Then <item name="colorPrimary">#color/primary</item> will color your Toolbar's background. Are we clear now?

DrawerArrowStyle with windowActionBarOverlay color in Toolbar

I'm implementing Material Design into my app and I'm stuck on style of my DrawerToggle with windowActionBarOverlay.
I'm setting the DrawerArrowStyle in my styles.xml and when running on device I have a different color in whole ToolBar:
Transparent ToolBar:
With title and action:
This is only happening on pre-Lollipop devices. I suspect that it's some compatibility on my styles, but until now I couldn't figure out what it's.
In my other style (without windowActionBarOverlay) it works perfectly in any device.
Here's my styles:
<style name="StyleOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="ThemeWithoutOverlay" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowContentOverlay">#null</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
<item name="android:dialogTheme">#style/translucentDialog</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="drawableSize">40dp</item>
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
<style name="ThemeToolbar" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="colorPrimary">#color/dark_blue</item>
<item name="colorPrimaryDark">#color/primary_dark_blue</item>
<item name="colorAccent">#color/orange</item>
</style>
My layout toolbar:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res/android"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeToolbar" />
In my Activity:
...
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
...
Does anyone know whats happening?
Thanks!
According to the Google Android Docs, from the link
To avoid resizing your layout when the action bar hides and shows, you can enable overlay mode for the action bar. When in overlay mode, your activity layout uses all the space available as if the action bar is not there and the system draws the action bar in front of your layout. This obscures some of the layout at the top, but now when the action bar hides or appears, the system does not need to resize your layout and the transition is seamless.
Setting the windowactionbaroverlay to true will create a 60% transparent black gradient over the action bar. Hence you can see a color of BLUE + (60% TRANSPARENT BLACK) = BLUISH GREEN. Sorry about my color definitions.
You need to set an extra property here on your activity's parent layout i.e.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize">
...</RelativeLayout>
as mentioned in the docs. Please refer them.

ActionBar background is transparent?

I've set a custom background for my application, and it seems that doing so has caused the ordinarily black background of my ActionBar to become transparent. This makes it difficult to work with the search field I plan on adding to it.
I've tried overriding this with the following:
<style name="app_theme" parent="Theme.AppCompat">
<item name="android:windowBackground">#drawable/app_background</item>
<item name="android:listViewStyle">#style/TransparentListView</item>
<item name="android:expandableListViewStyle">#style/TransparentExpandableListView</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="Mytheme.ActionBarStyle" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
</style>
This does not seem to correct my issue. How can I ensure that my action bar is black like it should be?
You can set action bar color like below:
ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#3BB9FF")));
if you want transparent action bar then check this link:
http://cyrilmottier.com/2013/05/24/pushing-the-actionbar-to-the-next-level/
Also you can try xml style:
<style name="AppTheme" parent="android:Theme.Holo">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/action_bar_theme</item>
<item name="android:actionMenuTextColor">#fff</item>
</style>
<style name="action_bar_theme" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#b3000000</item>
<item name="android:titleTextStyle">#style/action_bar_text</item>
</style>
Hope this will help....

Categories

Resources