Develop Reference

How to make AppBarLayout Drawable background to be spread over the status bar?

I'm trying to achieve AppbarLayout with background, inside the AppbarLayout to have a static Toolbar, under the the Toolbar i'm using a CollpasingToolBar that now contains a Toolbar and later supposed to include also a Custom View that it's content will be scaled according to scrolling position, and in the bottom of the AppBarLayout i'm using a TabLayout.
The issue i can't resolve is: i want that the AppbarLayout Drawable will be also be spread over the status bar, currently i failed to achieve this.
I'm attaching the xml layout and also a screen shot:
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:windowDrawsSystemBarBackgrounds = "true"
android:statusBarColor="#android:color/transparent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/winterscenery"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="180dp"
app:statusBarScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:fitsSystemWindows="true"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_one" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_button" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/content_text_two" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
After editing Manifest file :
<activity android:name=".ExitUntilCollapsedActivity" android:theme="#style/JustTryStyle" />
And creating the JustTryStyle style:
<style name="JustTryStyle" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
</style>
I got the following apperance:

In your theme you need to add
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
Edit:
Add these two to the theme your activity uses as defined in the AndroidManifest.
If other activities also use use this theme but should not have the transparent navigationbar then you need to extend it and update your AndroidManifest accordingly.
Edit 2: try adding <item name="android:windowTranslucentStatus">true</item> instead or additionally
Edit 3: also add fitSystemWindow=true to constraintlayout and appbar

Translucent Status bar makes the layout out of bounds(showing view behind)

I want to achieve a translucent status bar, and I found this,
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
yes it made my status bar translucent when my collapsing toolbar/appbar is expanded
but the problem is the one of the views(imageView) became behind on one of the other views(seems like its parent layout went out of bounds, please see the attach image)
opaque status bar, please see the image at the bottom
before that I didnt have any issues at all like this
non-translucent status bar
this is my xml, i tried to remove as much as possible, please bear with me,
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light">
<android.support.design.widget.AppBarLayout
android:id="#+id/mHomeAppBar"
android:layout_width="match_parent"
android:layout_height="430dp"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="#+id/image_view_on_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:srcCompat="#drawable/ic_near_me_white_18dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mHomeToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/mHomeScrollView"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/mLayoutTabComponents"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:visibility="visible">
<android.support.design.widget.TabLayout
android:id="#+id/mHomeTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/mHomeViewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
and this is the style
<style name = "AppThemeNoActionBar" parent =
"Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimaryDark</item>
<item name="android:subtitle">#null</item>
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:background">#null</item>
<!-- Support library compatibility -->
<item name="background">#null</item>
</style>
Im trying everything around, I tried to put app:layout_behavior="#string/appbar_scrolling_view_behavior" in every parent container and layout, and I tried to remove the TabLayout's tabGravity from fill to nothing, but still no luck :(, can anyone help me figure whats wrong, I know Im missing something on the style, but please put me in the right direction, again, I apologise if the xml code is a bit long, thanks in advance!
Update: I removed all the unnecessary view contents on the layout xml. anyone? :(

I manage to solve my problem by setting
fitSystemWindows
to false
that resulted the status bar to remove the padding it generates, then I add a 25dp top padding on the next layout which is the AppBarLayout that contains all the child views, now it works perfectly as I wanted.
thanks to these posts, if everyone encounters the same, or related issue with translucent status bar, please have a look here
Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment
Using windowTranslucentStatus with CollapsingToolbarLayout

Floating Action Button overlaps Tab Title

Things that I tried but didn't work
Have a negative padding to move the FAB a bit down. But the padding didn't make any effect
Tab style to make the gravity and layout gravity = "top" , this made no effect.
Also tried to change the FAB with size mini, this one works but I would like to keep the button with the same size.
Any suggestions?
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_horizontal"
android:minHeight="?android:attr/actionBarSize"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:layout_gravity="top"
android:id="#+id/materialup.tabs"
style="#style/MyCustomTabLayout"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
android:fillViewport="false"/>
</LinearLayout>
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="8dp"
app:fabSize="normal"
android:src="#drawable/play"
app:layout_anchor="#id/materialup.tabs"
app:layout_anchorGravity="bottom|center|right"/>`
This is the tab style
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
<item name="android:textSize">14sp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="android:paddingBottom">10dp</item>
<item name="textAllCaps">true</item>
</style>
I am trying to achieve something like this

Use CoordinatorLayout it helps to manage your child views
<android.support.design.widget.CoordinatorLayout >
<android.support.design.widget.AppBarLayout >
<android.support.v7.widget.Toolbar />
<!-- The Tab rests directly below the Toolbar, attached below it -->
<android.support.design.widget.TabLayout />
</android.support.design.widget.AppBarLayout>
<!-- Helps handing the Fragments to load for each Tab -->
<android.support.v4.view.ViewPager />

Struggling with toolbar using android support design library

I am tying to get transparent toolbar over RecyclerView contains custom Relative Layout i called it customHeader . my layout in the main activity is like:
i use android support design library v.22.2.1 and other support libraries with the same version
things are fine except that, i am getting toolbar with my primary color rather than transparent toolbar even though, i have removed background color from toolbar layout.
this is the result i have got:
What i want is transparent toolbar but should get filled with primary color only when i scroll up
my activity_main layout is:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/btnCreate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/btn_fab_margins"
android:layout_marginRight="#dimen/btn_fab_margins"
android:src="#drawable/share"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/vNavigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/WHITE"
app:itemIconTint="#color/primary_text"
app:itemTextColor="#color/primary_text"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/drawer_menu"/>
</android.support.v4.widget.DrawerLayout>
then the layout in my fragment is:
<RelativeLayout 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">
<!-- Story list in main page -->
<com.creativeLabs.news.util.MySwipeRefreshLayout
android:id="#+id/swipe_refresh_story"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity$PlaceholderFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view_story_list"
android:overScrollMode="never"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</com.creativeLabs.news.util.MySwipeRefreshLayout>
</RelativeLayout>
my customHeader layout is:
<?xml version="1.0" encoding="utf-8"?>
<com.creativeLabs.news.ui.view.SlideTopStory
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_marginBottom="#dimen/story_list_item_margin_vertical"
android:layout_width="match_parent"
android:layout_height="#dimen/slide_image_height">
<ImageView
android:id="#+id/ivStoryimage"
android:contentDescription="#string/story_title"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<ProgressBar
android:id="#+id/loading_bar"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- A mask view -->
<View
android:background="#drawable/title_slide_background"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="70dip"/>
<View
android:background="#drawable/title_slide_background1"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="70dip"/>
<TextView
android:id="#+id/title"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_large"
android:gravity="center_vertical"
android:paddingLeft="#dimen/slide_image_title_padding"
android:paddingRight="#dimen/slide_image_title_padding"
android:paddingEnd="#dimen/slide_image_title_padding"
android:layout_marginBottom="#dimen/slide_image_title_margin"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.creativeLabs.news.ui.view.SlideTopStory>
My app thems.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
.......
.......
in the manifest -> application tag:
android:theme="#style/AppTheme.WithoutActionBar">
in my activities and fragments, i coded nothing regarding toolbar colors or any other treatments other than
setSupportActionBar(toolbar);
getSupportActionBar().setHomeButtonEnabled(true);
toolbar.setNavigationIcon(getActionBarIconResource());
so, why toolbar is getting the app primary color? how can i get a transparent toolbar ..any help please?
Thanks in advance

<android.support.v7.widget.Toolbar
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
Check how u style is applied
Where u set it to transparent (alpha?)
View.getBackground().setAlpha(..) ;

Status bar not transparent when using new support design library

I'm facing some issues when trying to set a transparent status bar in my app while using the new android support design library.
Specifically, I'm using the combination CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout + Toolbar with this hierarchical order.
I noticed that the status bar first come transparent then I can see the translation from transparent to full black.
I do this in values/styles:
<item name="android:windowTranslucentStatus">true</item>
And this in my layout:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:elevation="4dp"
android:background="?android:colorPrimary"
android:layout_width="match_parent"
android:layout_height="128dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="64dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:cardCornerRadius="4dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Latest Stories"/>
<TextView
android:id="#+id/latest_story_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Title Example"/>
<TextView
android:id="#+id/latest_story_preview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content Example, this should be around 250 chars"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_add_story"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
app:borderWidth="0dp"
android:layout_margin="16dp"/>
<View
android:id="#+id/ripple_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
android:elevation="10dp"
android:stateListAnimator="#null"
android:clickable="false"/>
(Sorry for terrible formatting, it seems like SO editor won't collaborate)
Will this be fixed in a future release or there is a way to bypass this?
Thanks everyone.

Try to set translucent flag - it was added in api level 19:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
http://developer.android.com/reference/android/view/WindowManager.LayoutParams.html#FLAG_TRANSLUCENT_STATUS
Edit: It's not working in api level lower than 19. (Minimum KitKat required)

Add this lines to values/styles.xml
 <style name="MyTheme" parent="Base.MyTheme"></style>
    <style name="Base.MyTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
<item name="colorPrimary">#color/primary_500</item>
<item name="colorPrimaryDark">#color/primary_700</item>
<item name="colorAccent">#color/accent_500</item>
<item name="windowActionBar">false</item>
<item name="windowActionBarOverlay">true</item>
<item name="windowNoTitle">true</item>
 <item name="android:windowBackground">#color/background_material_light</item>
    
Add below code to values-v21/styles.xml
<style name="MyTheme" parent="Base.MyTheme">
 <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
Note : You can only set translucent status with this method on Lollipop and above APIs
Set application level theme to MyTheme