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.
Related
I would like to change the icon color from of the hamburger icon. I tried a lots things and nothing worked. Here my XML:
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:titleTextColor="#color/colorPrimaryDark"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
android:elevation="4dp"/>
In styles.xml I have
<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>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
Looks like you are using AppCompat. Please create this or similar style:
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#D81B60</item>
</style>
Then use it in your theme:
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
I was using Android Support Library version 27.0.2. With that version I had this configuration:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context="...Activity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ToolbarThemeBlack">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_..." />
</android.support.design.widget.CoordinatorLayout>
on v21 styles:
<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>
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item name="android:windowSharedElementEnterTransition">#android:transition/move</item>
<item name="android:windowSharedElementExitTransition">#android:transition/move</item>
</style>
on default theme:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="android:textColorSecondary">#android:color/darker_gray</item>
</style>
With that configuration everything worked as expected. The toolbar color was the desired, the only way it shows up is adding android:fitsSystemWindows="true". Today I updated the Android Support Library to 27.1.1, and now the toolbar color is white, it looks like fitsSystemWindows stops working.
Here you can see what I mean.
toolbar color changes before and after update
What am I doing wrong?
I discovered that replacing:
<item name="android:statusBarColor">#android:color/transparent</item>
by
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
solved the problem, where colorPrimaryDark is any color declared in the app.
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..
I'm trying to change my Toolbar's menu item text color here, but it doesn't work. Here's my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/AppTheme.ToolbarStyle</item>
<item name="buttonStyle">#style/AppTheme.ButtonStyle</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
<style name="AppTheme.ToolbarStyle" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/colorPrimary</item>
<item name="titleTextColor">#android:color/white</item>
<item name="titleTextAppearance">#style/TextAppearance.AppCompat.Widget.ActionBar.Title
</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
layout xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:titleMarginStart="#dimen/margin_l"
/>
I have tried to set the Toolbar theme directly in xml, but the menu item is still back. Is there a solution to this?
Add these lines in your AppTheme style
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>
Having a material toolbar you can play with styling modifying text title and menu texts as follows:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/white"
android:elevation="6dp"
android:theme="#style/App.ToolbarStyle"
app:titleTextAppearance="#style/App.ToolbarTitleTex"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/create_item_menu"
app:titleTextColor="#android:color/black" />
Where this style lets you change the color of the icon of the left:
<style name="App.ToolbarStyle" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/colorPrimary</item>
</style>
Also you can change the title text appearance with another style:
<style name="App.ToolbarTitleTex" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">18sp</item>
<item name="fontFamily">#font/roboto_bold</item>
</style>
And finally to change the menu item style you need to add this item property to the main style/theme of the app (the one you set in the AndroidManifest file:
<item name="actionMenuTextAppearance">#style/App.ToolbarMenuItem</item>
With:
<style name="App.ToolbarMenuItem" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">14sp</item>
<item name="fontFamily">#font/roboto_bold</item>
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
</style>
The final result would be something like this:
You need to declare a Theme like this
<style name="Theme.PopupOverlay.Menu" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:textColor">#android:color/white</item>
</style>
And then, in your Toolbar in layout view you must specify to use that theme
<androidx.appcompat.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"
app:popupTheme="#style/Theme.PopupOverlay.Menu" />
Modern way under Material3 theming.
<style name="AppTheme" parent="Theme.Material3.Dark">
<item name="toolbarStyle">#style/ToolBarStyle</item>
...
</style>
<style name="ToolBarStyle" parent="#style/Widget.Material3.Toolbar">
<item name="titleTextColor">#android:color/holo_green_light</item>
<item name="navigationIconTint">#android:color/holo_blue_light</item>
<item name="materialThemeOverlay">#style/ToolbarThemeOverlay</item>
</style>
<style name="ToolbarThemeOverlay" parent="">
<item name="actionMenuTextColor">#android:color/holo_red_light</item>
</style>
materialThemeOverlay - is the key to apply the colors to action menu items
In your theme file you have to put this :
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionMenuTextColor">#color/text_color</item>
...
</style>
and apply above theme to Toolbar view as like this android:theme="#style/AppTheme.ActionBar"
detailed example:
<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/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/AppTheme.ActionBar"/>
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"