I'm trying to get a transparent Toolbar over the top of my Navigation Drawer. I had it working pretty nicely until I had to put a Toolbar in my layout so I had a reference to it, to pass to ActionBarToggle.
Styling the Toolbar is awful. I've played for hours and nearly got it right now, but there are a couple of things I cannot for the life of me fix.
1 I want the hamburger icon and the option menu icon to be white.
2 I want the Toolbar to be visible over the NavDrawer.
3 I don't want any shadow or elevation around the Toolbar.
These three things seem massively improbable.
Here is my Activity Layout.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/load_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".load.LoadActivity"
tools:openDrawer="start">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#color/md_transparent"
android:theme="#style/DefaultToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextColor="#color/md_white_1000"/>
</android.support.design.widget.AppBarLayout>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:menu="#menu/load_drawer_actions" />
the Styles.xml
<resources>
<style name="AppTheme" parent="Base.AppTheme" />
<style name="AppThemeNoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="SplashTheme" parent="AppThemeNoActionBar">
<item name="android:windowBackground">#drawable/splashscreen</item>
</style>
<style name="Base.AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBarOverlay">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/secondary_text</item>
<item name="colorControlActivated">#color/primary_text</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="progressBarStyle">#style/DefaultProgressBarStyle</item>
<item name="android:progressBarStyle">#style/DefaultProgressBarStyle</item>
<item name="buttonStyle">#style/DefaultButtonStyle</item>
<item name="android:buttonStyle">#style/DefaultButtonStyle</item>
<item name="actionBarStyle">#style/ClearActionBar</item>
<item name="android:actionBarStyle">#style/ClearActionBar</item>
</style>
<style name="DefaultToolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
<style name="DefaultAppbar" parent="Base.Widget.Design.AppBarLayout">
<item name="android:background">#android:color/transparent</item>
</style>
<style name="DefaultProgressBarStyle" parent="#style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="android:indeterminate">true</item>
</style>
<style name="DefaultButtonStyle" parent="#style/Widget.AppCompat.Button.Borderless">
<item name="android:padding">#dimen/defaultPadding</item>
</style>
<style name="ClearActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="background">#android:color/transparent</item>
<item name="elevation">0dp</item>
</style>
<style name="DefaultFABStyle">
<item name="elevation">#dimen/defaultElevation</item>
<item name="android:layout_marginRight">#dimen/defaultMargin</item>
</style>
</resources>
If anyone knows how to start to get what I need.. It seems impossible at the moment. I actually had it nearly perfect, until I had to declare a Toolbar in XML, since then, themeing it has been near impossible. All to get the hamburger animation..
Related
I've created a new activity and for some reason, when it is used, it uses a different color in the status bar. What's strange is that in the "design" preview it renders the correct color.
Below are two screen shots, the darker color is the correct color.
Incorrect
Correct
The themes are the same as the other .xml layouts, so I'm having trouble really figuring out where this error is coming from. Below is the code for the layout:
activity_menu.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"
tools:context="com.brewguide.android.coffeebrewguide.MenuActivity">
<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/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/myfragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm not sure what other code would be useful to include for diagnosing this.
Edit:
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<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="DescriptionTextView">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:background">#color/mainBackground</item>
</style>
<!--style for the start button in the clock view layout-->
<style name="AppTheme.Button.Start" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/complimentaryLeft</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the stop button in the clock view layout-->
<style name="AppTheme.Button.Stop" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the reset button in the clock view layout-->
<style name="AppTheme.Button.Reset" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorAccent</item>
<item name="android:textColor">#color/cardview_light_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
I had the same issue. For me it was an issue with a second styles.xml file (still not sure why I had two). The specific line that was causing the issue was:
<item name="android:statusBarColor">#android:color/transparent</item>
I don't see this in your posted styles.xml, but perhaps it will help someone else.
Check your colors.xml for color named primary_dark and change it to be the same to primary, because Android use that(primary_dark) color to colorize status bar.
Managed to programatically set the color using the following line:
getActivity().getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
I would prefer to have this done in the .xml however.
When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- 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:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.
As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.
Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>
I think I went all over SO for the answer. I think I am being trolled by Android L... Seems no matter what I do that actionbar's background still defaults to colorPrimary
the layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/dl_main"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.farmdog.farmdog.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--layout_behavior="TransparentScrollingViewBehavior"/>-->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
</android.support.design.widget.AppBarLayout>
........
and styles.xml (v21)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark wont work on API level < 21 -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/mainBkgndHard</item>
<item name="android:textColor">#color/appTextColor</item>
<item name="android:buttonStyle">#style/ButtonTheme</item>
<!--<item name="android:fitsSystemWindows">true</item> hmmm, primaryColor expands on the statusbar now...-->
<!-- attempt taking actionbar shadow away -->
<item name="elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
<!-- the following line breaks the build-->
<!--<item name="windowContentOverlay">#null</item>-->
<!-- attempt drawing underneath the actionbar - all fail as of 'com.android.support:appcompat-v7:23.1.1.'-->
<item name="windowActionBarOverlay">true</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!--<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">-->
<!--<item name="android:background">#color/colorActionBar</item>-->
<!--<item name="background">#color/colorActionBar</item>-->
<!--<item name="windowActionBarOverlay">true</item>-->
<!--<item name="android:windowActionBarOverlay">true</item>-->
<!--</style>-->
<style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:background">#color/colorActionBar</item>
<!--For compatibility-->
<item name="background">#color/colorActionBar</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
I think you are doing it in the wrong way.I mean, the following Toolbar Hasn't any PrimaryColor or even Background:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
So, this will works on (v21) versions only without any background or PrimaryColor.and as you can see, Toolbar is going to be like your Activity Theme which that has:
<item name="colorPrimary">#color/colorPrimary</item>
With:
Theme.AppCompat.Light.DarkActionBar
And, if you don't set any background color or PrimaryColor, because of:
Theme.AppCompat.Light.DarkActionBar
and your Toolbar, it has to be like that:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
Otherwise, it should crashed(i guess, not sure) because you have a Theme with DarkActionBar and one Toolbar with no background.
I think this is the problem!
Edit:
For completing the answer, since this code was simple anyway, i'll add it here:
Add this also in your AppBarLayout:
android:theme
Inspired from Mohsen answer, I did the following:
Defined a theme named AppTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
In AndroidManifest.xml, I assigned AppTheme as the android:theme
android:theme="#style/AppTheme"
Created another theme for AppBarLayout named CollapsingToolbarTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/transparent</item>
<item name="colorPrimaryDark">#color/dark</item>
<item name="colorAccent">#color/colorAccent</item>
Finally, I assigned the new CollapsingToolbarTheme as the theme of AppBarLayout
android:theme="#style/CollapsingToolbarTheme"
I'm using AppCompat for a backport of Material design on pre-Lollipop devices. Somehow, the support toolbar overlays the status bar and casts a shadow on it, as if the status bar is behind the toolbar. Tested on my Android 5.0.2 phone.
Here's the code:
Activity layout
<android.support.design.widget.CoordinatorLayout
android:id="#+id/base_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/base_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/PGTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/base_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/PGTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Theme-v21
<style name="PGTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/base_color_2</item>
<item name="colorPrimaryDark">#color/base_color_1</item>
<item name="colorAccent">#color/base_color_2</item>
<item name="android:colorButtonNormal">#color/base_color_2</item>
<item name="android:textViewStyle">#style/PGTheme.TextView</item>
<item name="android:editTextStyle">#style/PGTheme.EditText</item>
<item name="android:buttonStyle">#style/PGTheme.Button</item>
</style>
<style name="PGTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Any idea why this happens?
In your Style remove the statusBarColor:
<item name="android:statusBarColor">#android:color/transparent</item>
So your theme would be:
<style name="PGTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
Hope this helps.
I am implementing material design on my app, and I want to be able to change the color of the drawer icon to white, but I couldnt achieve what I am looking for..
This is my themes.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="AppTheme.Base" />
<style name="AppTheme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
<style name="HeaderBar" parent="AppTheme.Base">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
<style name="ActionBarPopupThemeOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/white</item>
<item name="android:textColor">#000</item>
</style>
<style name="ActionBarThemeOverlay" parent="">
<item name="android:textColorPrimary">#fff</item>
<item name="colorControlNormal">#fff</item>
<item name="colorControlHighlight">#3fff</item>
</style>
</resources>
And this is my toolbar.xml file
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/jpe.serviguide.commobile"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
app:theme="#style/HeaderBar" />
All the colors that I wanted are just fine, but the drawer icon is black instead of white..
I have tried a lot of thing but with no desire result
Thank you so much
Finally made it by doing this on my theme.xml file
<style name="AppTheme" parent="Theme.AppCompat.Light">
....
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>
You can do it like this:
<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/colorPrimaryDark"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" - is important part
I think your actionbar should have the following parent (ThemeAppCompat.Light):
<style name="HeaderBar" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:background">#color/primary</item>
<item name="actionMenuTextColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:actionMenuTextColor">#android:color/white</item>
</style>
Hi neteot always when I work with costume bars I create a custom layout as a bar, then in my case the bars button/burguer button is a ImageButton... Then you need to change color of the icon
If you want to create a perfect custom bar, u can see my last post:
https://stackoverflow.com/questions/27417923/android-add-custom-buttons-on-action-bar/27418306#27418306
Good luck and I wait than I helps you!!
PD: If you need more info or any doubt, advice me!