Develop Reference

How to set custom toolbar background in android

Hey guys I am using custom toolbar in my project. When I try to scroll view it goes behind the toolbar and see all item. I made a short video please have a look.
toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:focusable="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:fitsSystemWindows="true"
android:gravity="bottom"
app:elevation="0dp"
tools:layout_height="170dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<androidx.appcompat.widget.SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:fitsSystemWindows="true"
android:theme="#style/SearchViewTheme"
app:closeIcon="#drawable/ic_cancel"
app:layout_collapseMode="pin"
app:searchIcon="#drawable/ic_search" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/consultationsToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_marginTop="20dp"
app:layout_collapseMode="pin"
app:theme="#style/ActionBarTheme">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_details" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
/// more item
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I tried to put white background on toolbar, it solve the problem when scroll but another occur. When my searchview collapse its invisible. I think it's goes behind white background. I also made a short video for that.
<androidx.appcompat.widget.Toolbar
android:id="#+id/consultationsToolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_marginTop="20dp"
app:layout_collapseMode="pin"
android:background="#color/white"
app:theme="#style/ActionBarTheme">
styles.xml
<style name="ActionBarTheme" parent="Theme.AppCompat.Light">
<item name="colorControlNormal">#color/aqua</item>
<item name="color">#color/aqua</item>
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
<item name="actionBarStyle">#style/ActionBarStyle</item>
<item name="actionMenuTextAppearance">#style/MenuItemTextAppearance</item>
<item name="android:textColorPrimary">#color/aqua</item>
</style>
Any idea How can I fix this problem?

transparent status bar with fitsSystemwindows toolbar pushed up

Android Studio 2.3 RC 1
I have created an app that uses a transparent status bar that works ok as the status bar is transparent. The problem is with my toolbar as it seems to get pushed up. I have been trying to solve this issue using fitsSystemWindows to true. However, this has not worked.
Just wondering if there is something I am doing wrong.
The 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="me.androidbox.busbymovies.movielist.MovieListViewImp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/primary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvMovieList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tool_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/pbMovieList"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
My styles:
<style name="AppTheme" parent="BaseTheme">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
And in my onCreate(..) in the main activity
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
final Window window = getWindow();
window.setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

I would suggest, since you have this element:
app:layout_collapseMode="parallax"
that you do actually want some kind of parallax when scrolling. So this tells me that what you really meant to do is use a CoordinatorLayout. So this isn't a direct answer to your question but it will work if you use this method and you can fix both problems. I'm taking into account the image I can see in your screenshot.
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
https://android-developers.googleblog.com/2015/05/android-design-support-library.html

How to make a transparent toolbar with its content visible

im trying to make a transparent toolbar inside a AppBarLayout so the navigation drawer icon and Title appear like this
Toolbar i wish to make like
this is what i achieved but i would like to remove the borders around the tool bar. i tried removing the elevation and sitting the windowContentOverlay with #null but was not successful
my current achieved toolbar

Try following
<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
<item name="android:windowContentOverlay">#null</item>
<item name="windowActionBarOverlay">true</item>
<item name="colorPrimary">#android:color/transparent</item>
</style>

Try my below 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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_400sdp"
android:background="#color/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/iv_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/_400sdp"
android:background="#drawable/gradient_bg" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/_140sdp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
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/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_20sdp"
android:clickable="true"
android:src="#drawable/ic_attach_money"
app:backgroundTint="#color/kleen_green"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="#string/bottom_sheet_behavior"
app:layout_collapseMode="pin" />
<!--app:layout_behavior="#string/bottom_sheet_behavior"-->
</android.support.design.widget.CoordinatorLayout>

Cannot have a transparent status bar when CollapsingToolbarLayout is in a fragment

I have a simple CollapsingToolbarLayout. Everything works fine and the statusbar is transparent before scrolling the page, as expected here(transparent):
The problem shows up when I transfer CoordinatorLayout tag and its content which includes CollapsingToolbarLayout, from activity_main.xml to a fragment, the statusbar isn't transparent anymore! why?! I didn't change any part of code, just copied piece of code and pasted it in the fragment here(not transparent anymore):
Here is the code:
MainActivity.java
public class MainActivity extends AppCompatActivity implements TestFragment.OnFragmentInteractionListener {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.main_fragment, new TestFragment())
.commit();
}
}
}
activity_main.xml
<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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/main_fragment"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
fragment_test.xml
<android.support.design.widget.CoordinatorLayout 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".TestFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/toolbar_bg" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:popupTheme="#style/AppTheme.PopupOverlay"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:behavior_overlapTop="32dp"
android:background="#color/main_bg">
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
app:fabSize="normal"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right"
app:srcCompat="#drawable/ic_add_black_24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="FABTouched"
android:tint="#color/main_bg"
/>
</android.support.design.widget.CoordinatorLayout>
styles.xml
<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:statusBarColor">#android:color/transparent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

Change FrameLayout to a CoordinatorLayout.

Toolbar behind status bar with API 21

I've a fragment with a CoordinatorLayout
When i run the app with API 19 the behavior is right :
The toolbar is below the status bar and the FAB button of the main_activity go away :
But with the API 21 and + :
The toolbar is behind the status bar and the FAB button of the main_activity don't go away :
Layout file:
<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/caves_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/caves_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/caves_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimaryDark"
app:expandedTitleMarginStart="78dp"
app:expandedTitleMarginEnd="124dp">
<ImageView
android:id="#+id/caves_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/drawer_header_bg"
app:layout_collapseMode="parallax"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/caves_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/caves_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/caves_fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/caves_appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
I've add a specify style-v21 xml file
<resources>
<style name="AppTheme" parent="Base.Theme.Design">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
</style>
</resources>
I'dont find and understand the problem.

add android:fitsSystemWindows="false"to the CoordinatorLayout

Had a similar problem (exemplified here)
How I made it work was to add android:fitsSystemWindows="false" to the AppBarLayout and have it on true on the CoordinatorLayout

take off this line:
<item name="android:windowTranslucentStatus">true</item>