i am trying to get toolbar like this one as show in image below [Note: instead of imageview on the left side there will be drawer icon]
but i am getting this as a result as shown in image below
i dont know why its adding black layer on the top of toolbar
this my toolbar code
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.NoActionBar.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.NoActionBar.PopupOverlay"
app:theme="#style/ToolBarStyle"/>
</android.support.design.widget.AppBarLayout>
and this is ToobarStyle code
<style name="ToolBarStyle" parent="Theme.AppCompat">
<item name="android:textColorPrimary">#android:color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
<item name="actionOverflowButtonStyle">#style/ActionButtonOverflowStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="ActionButtonOverflowStyle">
</style>
<style name="DrawerArrowStyle"></style>
this are colors i used
<color name="colorPrimary">#ffffff</color>
<color name="colorPrimaryDark">#b2b2b2</color>
what i can do to achieve toolbar shown in first image
Related
I have tried to add a image to the ActionBar background using this theme/style
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
But although the background is being changed, it's creating a weird effect on the title and menu button. It's as thought they are separate child views within the ActionBar (maybe they are, I'm not sure) and the Drawable is being applied to them individually.
I was hoping for a seamless Drawable being applied across the ActionBar. Is this possible or should I just give up, and instead just change the background with a flat colour?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_activity_main"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="coordinatorLayoutStyle">#style/Widget.Support.CoordinatorLayout</item>
<item name="colorAccent">#android:color/black</item>
<item name="colorPrimary">#android:color/holo_blue_dark</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="android:windowBackground">#drawable/no_actionbar_background</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/black</item>
</style>
</resources>
When you set the android:theme attribute of a view, the style you pass is applied to that view and all of its children. In your case, the AppBarLayout does (internally) use separate views for the title and the overflow menu button.
However, since the only thing your style seems to be doing is setting the android:background attribute, you could just set that directly on the AppBarLayout. So, replace this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
with this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/actionbar_background">
"android:background"
in your style change the background to each component in your layouts.
You can change the color of your ActionBar with something like this.
<item name="android:navigationBarColor">#color/colorPrimary</item>
This is an example for the AppCompat-v7 Toolbar, the other Toolbar is a bit different when it comes to theme.
I can't really give you the answer that will suit you the most, and this code is only here to show you the way.
What changes is that the toolbar is using style instead of android:theme and it uses a new style AppTheme.Toolbar.
AppTheme.Toolbar groups your custom background, the theme for the views inside the toolbar (title, subtitle, etc) and the theme for the popup menu.
The theme for the children and the popup menu are separated so you can control each component separately.
Try to play with their parent attribute (from Dark to Light) and pick what is the best for you.
Into your styles.xml
<style name="AppTheme.Toolbar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="popupTheme">#style/AppTheme.PopupOverlay</item>
<item name="android:theme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Change attribute of the toolbar views-->
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
<!--Change attribute of the menu-->
</style>
Into your activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
style="#style/AppTheme.Toolbar"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
I can successful change the background color of the popupmenu to white as per the requirement but the list item does not follow. I'm using this code:
<style name="ToolbarTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/colorToolbar</item> <!-- green -->
<item name="android:textColorPrimary">#color/white</item>
<item name="android:itemBackground">#color/white</item>
</style>
and passing it directly to Toolbar using app:theme.
Unfortunately, this is what's happening:
How can I make the list item white and the text color as black?
You can use app:popupTheme to change color of the list items.
Toolbar layout:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.ToolbarOverlay"
app:popupTheme="#style/AppTheme.PopupOverlay" />
Themes:
<style name="AppTheme.ToolbarOverlay" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorPrimary">#android:color/holo_green_dark</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
Result:
Green toolbar with list with white background and black text
I am new to Android and working on my first android app. For my app I need a transparent Action Bar with a Navigation Drawer button. Everything is working fine except the color of the Action Bar. It is having blue color instead of transparent. I have tried various ways to make it transparent but its still blue. Can someone please help me out with my code:
custom_navigation_bar.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
styles.xml:
<resources>
<!-- Themes for Navigation Drawer -->
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay"
parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#00000000</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#00000000</item>
</style>
</resources>
Java Code Snippet:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Setting Transparent Color for Action Bar
ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#00000000")));
You can just set the toolbar background to transparent :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#00000000"/>
you have one item in base theme windowActionBarOverlay set it to true and set action bar color to transparent.
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/text_color</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
I use theme
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
And toolbar looks like this
But for CoordinatorLayour I need custom toolbar, not most-top-element (most top will be collapsing layout), so I use following style for Activity:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And toolbar in activity.xml
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
But it does not populated with colors from AppTheme. And looks like this
Why? I need my theme colors and dots at the center of toolbar.
After some research I found, that toolbar theme is not AppCompat theme and sould be ThemeOverlay.*
For dark action bar theme I should use
<style name="BarTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
not from parent="Theme.AppCompat.Light.DarkActionBar"
This fixes all color problems.
To fix title and 3 dots (put it in the middle of toolbar) - AppBarLayout height should be wrap_content (was fixed size before), and collapsing size in pixels should be moved to CollapsingToolbarLayout under AppBarLayout.
try to add android:background="#color/primary" to your toolbar definiton.
Like:
android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:background="#color/primary"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
Add following to your theme :
<!-- toolbar title and overflow menu color -->
<item name="android:textColorSecondary">#color/white</item>
And for the vertically center align you have to use height of toolbar as following :
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" <!-- Height change -->
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
First of all I have repeatedly read and applied everything posted here, but it does not solve my problem. It seems that every answer posted here is to apply style to theme attribute of the toolbar, i've tried it it got me nowhere, so let me explain what my problem is:
I want to have light theme everywhere except the toolbar. On Lollipop devices, it's not a problem, but on pre Lollipop devices toolbars Title and overflow button always adopts MyTheme parent style, so I get dark Title and dark overflow button (it's my only button there) it seems like theme attribute is malfunctioning in Toolbar.
I'm using AppCompatActivity for my base class, my minimum api is 15 and AppCompat version is 22.2.1.0
Here's my code:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/dark_primary_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="android:statusBarColor">#color/dark_primary_color</item>
<item name="selectableItemBackground">?android:attr/selectableItemBackground</item>
</style>
my hamburger item is white because I inflate image from resource
var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
SupportActionBar.Title = "Sport";
if (Build.VERSION.SdkInt >= BuildVersionCodes.Lollipop)
Window.AddFlags(WindowManagerFlags.DrawsSystemBarBackgrounds);
if (SupportActionBar != null){
SupportActionBar.SetHomeAsUpIndicator(Resource.Drawable.ic_menu_white_24dp);
SupportActionBar.SetDisplayHomeAsUpEnabled(true);
}
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
>
</android.support.v7.widget.Toolbar>
Try This combination in your toolbar code it should work just fine.
This is what worked for me in the end:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
local:titleTextColor="#android:color/white"
local:theme="#style/ToolbarTheme"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<style name="ToolbarTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#color/primary_color</item>
<!-- Used to for the title of the Toolbar -->
<item name="android:textColorPrimary">#fff</item>
<!-- Used to for the title of the Toolbar when parent is Theme.AppCompat.Light -->
<item name="android:textColorPrimaryInverse">#fff</item>
<!-- Used to color the text of the action menu icons -->
<item name="android:textColorSecondary">#fff</item>
<!-- Used to color the overflow menu icon -->
<item name="actionMenuTextColor">#fff</item>
</style>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/dark_primary_color</item>
<item name="colorAccent">#color/accent_color</item>
<item name="android:statusBarColor">#color/dark_primary_color</item>
<item name="colorControlNormal">#fff</item>
</style>
In this case ColorControlNormal colored overflow icon and titleTextColor colored Title. It seems that in my case ToolbarTheme doesn't work. I don't have a clue why is it, but now I don't care. This is not an optimal solution but it works.