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.
Related
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 could not find the source of some kind of mask laying over my transparent toolbar:
Does anybody know how to remove this?
When doing orientation change to landscape it's even more ugly.
Some code:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" <-- makes no difference
android:theme="#style/AppTheme.AppBarOverlay.Transparent">
<include layout="#layout/toolbar_transparent"/>
</android.support.design.widget.AppBarLayout>
toolbar_transparent:
<?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:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:elevation="4dp"
style="?attr/actionBarStyle"
android:background="#204CAF50"
android:theme="#style/AppTheme.NoActionBar.ColoredToolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
themes.xml (I admit it is a mess - much like try-and-error)
<style name="AppThemeBase" parent="Theme.AppCompat">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background</item>
</style>
<style name="AppTheme" parent="AppThemeBase"/>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:activatedBackgroundIndicator">#drawable/activated_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.AppBarOverlay.Transparent" parent="ThemeOverlay.AppCompat.ActionBar" >
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorPrimary">#00000000</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="AppTheme.ActionBar" parent="AppTheme.NoActionBar">
<item name="windowActionBar">true</item>
<item name="windowNoTitle">false</item>
</style>
<style name="AppTheme.NoActionBar.ColoredToolbar" parent="AppTheme.NoActionBar">
<item name="android:textColorSecondary">#color/colorPrimaryDark</item>
</style>
This comes from the android.support.design.widget.AppBarLayout wrapper.
When I remove it and just leave the Toolbar, the trapezoids are gone.
<!--<android.support.design.widget.AppBarLayout-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content"-->
<!--android:theme="#style/AppTheme.AppBarOverlay.Transparent">-->
<include layout="#layout/toolbar_transparent"/>
<!--</android.support.design.widget.AppBarLayout>-->
Works at least for Lollipop and Marshmallow. Kitkat and below not tested yet.
BTW I'm using com.android.support:design:24.2.1.
This works for me:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay.Transparent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:theme="#style/AppTheme.AppBarOverlay.Transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
in styles
<style name="AppTheme.AppBarOverlay.Transparent" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
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 referred to this question: Change Google Places picker Action bar color. But the solution suggested there does not seem to solve my problem and I'm starting to think that I might be doing something else wrong.
I am compiling appcompat-v7:23.0.+ and my current theme in styles.xml is
<style name = "AppTheme" parent="AppTheme.Base"></style>
<style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#color/black</item>
<item name="actionMenuTextColor">#color/black</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
I remembered to change the theme in the manifest file to use AppTheme as well.
My layout looks like
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background = "#color/backgroundGrey"
android:theme = "#style/AppTheme"
tools:context=".PlacePickerActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/AppTheme"
app:popupTheme="#style/AppTheme.NoActionBar"/>
I have no idea why the placepicker isn't picking up the same colors. Does anyone have any ideas? Any criticism is appreciated. Thank you
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.