I am trying to make toolbar transparent with navigation drawer. It is working fine til api<21, But above api 21 toolbar is not transparent. I have already added theme to v-21 style folder as well. Adding theme as well as image.
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/colorPrimary</item>
</style>
Moreover, i have created a background selector for toolbar as well in which colors are transparent
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"
tools:context="com.mayank.tracar.activties.MainActivity">
<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="#drawable/toolbar_background"
/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
Finally i solved it by changing these things in my code. Hope it will help someone else as well.
<?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"
tools:context="com.mayank.tracar.activties.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_background"
/>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
If remove AppBarLayout then your toolbar goes behind the include layout, so to solve this i just call toolbar.bringtoFront() on my oncreate And everything works fine now.
Related
I have an app with a DrawerLayout that contains a NavigationView:
activity_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:fitsSystemWindows="true">
<android.support.constraint.ConstraintLayout
android:id="#+id/activity_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.exmaple.appname.activityname">
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/Theme.AppCompat"/>
[…]
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/nav_drawer"
android:fitsSystemWindows="true"/>
</android.support.v4.widget.DrawerLayout>
I have added the following styles as well:
styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
[…]
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
values-21/styles.xml:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
All of this code is based on the Google I/O Schedule App, however the DrawerLayout still does not render behind the status bar. Any ideas as to why this combination of solutions isn't working and what solutions might? I've found that drawing behind the status bar is never a one-size-fits-all solution, but after trying every combination of solutions on Stack Overflow that I can think of, I still can't get it.
Current drawer image:
Just add <item name="android:windowTranslucentStatus">true</item> in values-21/styles.xml and remove this <item name="android:statusBarColor">#android:color/transparent</item>
add android:fitsSystemWindows="true" to your NavigationView in xml
Working example!
<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="android:windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Result
Edited (main 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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" <--This is mandatory
tools:context=".ui.activities.MainActivity">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true" /><--This is mandatory
</android.support.v4.widget.DrawerLayout>
Current Result
Update: I lookup your style-v21 and found below
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
</resources>
Please replace it with this
<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="android:windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
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 the layout forms everything is fine, as in image is formed from status bar and status bar color is transparent. But whenever i scroll up and then scroll down the recycler view the image is scrolled till under status bar. But when i click on the image, it takes the original position.
Code for style/v21
<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:windowIsTranslucent">true</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- 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:windowContentTransitions">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" >
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
</style>
Code for collapsing toolbar layout.
<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"
tools:context="com.ashish.swipemusic.GenreDetails">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">
<ImageView
android:id="#+id/headerArtist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/album_details1"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_genre_details" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_play_arrow_black_24dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end" />
<android.support.v7.widget.RecyclerView
android:id="#+id/genre_songs_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
</android.support.v7.widget.RecyclerView>
before scroll
after scroll down status bar appears
Did you try removing app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed" inside your Toolbar? I've tried this way and it works pretty well
In Lollipop, The background color of toolbar was shown normally, but in KitKat, it was shown as white color.
I don't know why.
activity_main.xml
<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"
tools:context=".MainActivity">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
</android.support.design.widget.CoordinatorLayout>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<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="AppTheme.AppBarOverlay"
parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
styles.xml-v21
<resources>
<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>
Try putting your AppBarLayout at the end of you code. Apparently your included layout is overlapping the ToolBar. That happened to me and I fixed it doing that, it just came to my mind. Like this:
<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"
tools:context=".MainActivity">
<include layout="#layout/content_main"/>
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Create a base theme in styles.xml with primary colors and other colors colors then set it as parent in styles.xml-v21 for your style name="AppTheme.NoActionBar".
Below is my example :
in styles.xml
<style name="AppBase" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary_color</item>
<item name="colorPrimaryDark">#color/primary_color_dark</item>
<item name="colorAccent">#color/primary_yellow_bright</item>
<item name="colorControlNormal">#color/primary_yellow</item>
<item name="colorControlHighlight">#color/primary_color_light_100</item>
<item name="colorControlActivated">#color/primary_yellow_bright</item>
<item name="colorButtonNormal">#color/primary_yellow_bright</item>
<item name="android:windowBackground">#color/primary_white</item>
<item name="android:textColorPrimary">#color/primary_color</item>
<item name="android:textColorSecondary">#color/primary_color_light</item>
<item name="android:textColor">#color/primary_white</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="AppTheme" parent="AppBase" />
in styles.xml-v21
<style name="AppTheme" parent="AppBase">
<item name="android:navigationBarColor">#color/primary_light_gray</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>
in AndroidManifest.xml
android:theme="#style/AppTheme"
should work.
I just updated android.support:appcompat lib to 22.1.1.
Toolbar is visible on a Lollipop device but not on a 4.X device.
I have even tried extending AppCompatActivity, but still no luck. If anything else is required please let me know.
Here is my project styles and base activity xml file.
styles.xml
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primarydark</item>
<item name="colorAccent">#color/primary</item>
<item name="colorControlHighlight">#color/primary</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="windowActionModeOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">#color/activity_bg</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
activity_base.xml
<RelativeLayout 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/fulllayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/toolbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="#color/primary">
</android.support.v7.widget.Toolbar>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container">
</FrameLayout>
</RelativeLayout>
Update :
Issue is with layout inflated in container part. it is overlapping toolbar so i have removed all views and it worked.
Thanks all...