I'm trying to realize a translucent statusbar (so that my navigation-view is BEHIND the statusbar) but still like to change the color of my actionbar dynamically. Because of this, the statusbar color needs to change to a darker version of my actionbar color.
If I set my statusbar to transparent, as many sources suggest, my primary_dark color is used as the background of my statusbar. However, as I will change the actionbar color during runtime, primary_dark must not necessarily be the dark color of my actionbar.
If I set my statusbar to the actionbar color, the transparency is gone. If I set my statusbar to the actionbar color and add transparency, the statusbar looks neither wrong nor right and my overlapping navigationview is still not very 'transparent' / 'colorful'.
Google Inbox has three separate colors: Inbox (blue), Snoozed (yellow) and Done (green).
What can I do to achieve this behaviour?
Actually, it's fairly easy to implement.
First step - is to change height of the Toolbar
:
height
to wrap_content
so for me it looks like this:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
Then you override resources for v19
:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Style properties -->
....
<!-- These properties are important:-->
<item name="android:windowTranslucentStatus">true</item>
<item name="windowActionBarOverlay">false</item>
<item name="android:windowActionBarOverlay">false</item>
<item name="android:fitsSystemWindows">false</item>
</style>
</resources>
Then, in the Activity
, setting padding
for the Toolbar
:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
......
......
public int getStatusBarHeight() {
int result = 0;
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
}
return result;
}
And actually, it's pretty much it. Now once I want to change colour of the Toolbar, I'm calling this:
if (getSupportActionBar() != null) {
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.GREEN));
}
The activity's layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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="false"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
NB! On pre-Kitkat OS-versions, status bar remained the same, non-translucent.
I've uploaded the source code of the test-application to my dropbox - feel free to check it out.
I hope, it helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With