Does anyone know how to make statusbar look like google maps?
I manage to get transparent status for my drawer layout
using android:fitsSystemWindows="true" and
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
layout -> activity_main.xml
<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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">...
<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_main_header" />
</android.support.v4.widget.DrawerLayout>
values-v21 -> styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
Thanks.
You may do it using themes:
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
Or programmatically:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
For more information you may read:
https://developer.android.com/about/versions/android-4.4.html#UI
https://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_TRANSLUCENT_NAVIGATION
Related
How to change menu background of android Navigation Drawer?
I tried many ways on stackoverflow but failed.
http://stackoverflow.com/questions/8167531/change-option-menu-background-dynamically
It did not work.
activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu 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"
tools:showIn="navigation_view">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home_white_24dp"
android:title="#string/menu_home"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:itemBackground="#drawable/homedr"
/>
</menu>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/cardview_dark_background</item>
<item name="colorPrimaryDark">#color/cardview_dark_background</item>
<item name="colorAccent">#color/cardview_dark_background</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"
You have to do this in the NavigationView
android:background="#color/color_navigation_view_background"
or with Java
mNavigationView.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
I'm assuming you're using AndroidX so here's it.
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/navigation_header"
android:background="#color/color_navigation_view_background"
app:itemIconTint="?colorAccent"
app:menu="#menu/drawer_menu">
</com.google.android.material.navigation.NavigationView>
I have the following layout:
<?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="com.skillberg.weather.ui.activity.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/weather_rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true" />
</android.support.design.widget.CoordinatorLayout>
And style:
<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="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
I want the first item in RecyclerView to be displayed under the status bar (like toolbar), but it's not being displayed there:
However, RecyclerView itself draws under status bar, but it seems that there is some top padding which height = status bar height:
How to fix it?
Expand your AppTheme with windowTranslucentStatus e.g.
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
// other stuff
</style>
This will allow the StatusBar to be transparent. You don't need to use android:fitsSystemWindows.
In you CoordinatorLayout change this android:fitsSystemWindows="true" to false
You're missing the behavior that works in pair with the CoordinatorLayout.
Simply add it to your RecyclerView as follow :
<android.support.v7.widget.RecyclerView
android:id="#+id/weather_rv"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fitsSystemWindows="true" />
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 am interested in having a uniform coloured toolbar and status bar. If I provide colorPrimary and colorPrimaryDark as the same colour this should be possible. I am getting the desired result using ActionBar but not with Toolbar. I will also be creating a navigation view so i need the status bar as transparent.
Code : Styles-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>
</style>
Code : Styles
<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/colorPrimary</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>
Steps to reproduce :
Create a new project in android studio with Navigation Drawer Activity
Set primary and primaryDark as same colours
Run on device or emulator
The only solution I could come up with was to remove android:fitsSystemWindows="True" from Coordinator Layout
edit : Another solution is to wrap coordinator layout in another coordinator layout.
<?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.CoordinatorLayout
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:theme="#style/AppTheme.AppBarOverlay"
app:layout_scrollFlags="scroll|enterAlways">
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>
Before
After
This shadow you are seeing is window content overlay, you could remove it:
Please add this line to your theme specification:
<item name="android:windowContentOverlay">#null</item>
I want to have appcompat v21 toolbar in my activity. But the toolbar I'm implementing is overlapping below status bar. How can I fix it?
Here is the activity layout xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Toolbar view:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
Theme style:
<style name="AppTheme" parent="MaterialNavigationDrawerTheme.Light.DarkActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
</style>
Use android:fitsSystemWindows="true" in the root view of your layout (LinearLayout in your case).
Just set this to v21/styles.xml file
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
and be sure
<item name="android:windowTranslucentStatus">false</item>
For me, the problem was that I copied something from an example and used
<item name="android:windowTranslucentStatus">true</item>
just removing this fixed my problem.
None of the answers worked for me, but this is what finally worked after I set:
android:fitsSystemWindows="false"
In parent activity layout file it's not suggested at many places but it's work for me and saves my day
None of the answers worked for me, but this is what finally worked after i set android:fitSystemWindows on the root view(I set these in styles v21):
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">false</item>
Make sure you don't have the following line as AS puts it by default:
<item name="android:statusBarColor">#android:color/transparent</item>
I removed all lines mentioned below from /res/values-v21/styles.xml and now it is working fine.
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="windowActionBar">false</item>
<item name="android:windowDisablePreview">true</item>
<item name="windowNoTitle">true</item>
<item name="android:fitsSystemWindows">true</item>
According google docs ,we should not use fitsSystemWindows attribute in app theme, it is intended to use in layout files. Using in themes can causes problem in toast messages .
Check Issue here & example of problem caused here
<item name="android:fitsSystemWindows">true</item>
Example of using correct way and which works fine with windowTranslucentStatus as well.
<?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:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</include>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#color/white"
android:animateLayoutChanges="true"
app:headerLayout="#layout/navigation_drawer_header"
app:menu="#menu/navigation_drawer_menu" />
</android.support.v4.widget.DrawerLayout>
Remove below lines from style or style(21)
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/colorPrimaryDark</item>
<item name="android:windowTranslucentStatus">false</item>
There are so many reason to happen this.. firstly you must check your them how it was going on..
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowBackground">#android:color/white</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorHint">#color/secondary_text</item>
</style>
if you use <item name="android:windowTranslucentStatus">true</item> this code in your theme it should be overlap your action bar. you can use it false for solving this problem.
<item name="android:windowTranslucentStatus">false</item>.
or if you want to keep it as true please use
<item name="android:fitsSystemWindows">true</item> as true. You have another option to use this. you can use android:fitsSystemWindows="true"
this inside the root view of particular xml file.
To prevent the Toolbar from overlapping the status bar, add these lines to your theme
<item name="android:fitsSystemWindows">true</item>
<item name="android:windowTranslucentStatus">true</item>
it worked for me