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?

Android full screen dialog fragment and collapsing toolbar issue

I'm having trouble with showing a full screen dialog in an activity which contains a collapsing toolbar. When I show the full screen dialog, the toolbar goes under the status bar instead of being below the status bar as shown below:
If I take away the collapsing toolbar (like in other activities I have), I don't have this problem. The toolbar from the dialog shows perfectly below the status bar. Here is my xml to for the activity:
<?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.casillassportsapps.mytrackfieldteam.views.RosterDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/roster_details_app_bar_height"
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"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/photoImageView"
android:layout_width="#dimen/roster_details_image_size"
android:layout_height="#dimen/roster_details_image_size"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:adjustViewBounds="true"
android:importantForAccessibility="no"
android:src="#drawable/ic_account_circle_white"
app:layout_collapseMode="parallax" />
<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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/detailContainer"
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/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|right|end"
app:srcCompat="#drawable/ic_assessment_white_24dp" />
</android.support.design.widget.CoordinatorLayout>
Is there anything wrong with the way I have my collapsing toolbar set up?

Try this:
Add android:fitsSystemWindows="true" for both AppBarLayout and CollapsingToolbarLayout
Full Code:
<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:fitsSystemWindows="true"
tools:context="com.casillassportsapps.mytrackfieldteam.views.RosterDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/photoImageView"
android:layout_width="#dimen/roster_details_image_size"
android:layout_height="#dimen/roster_details_image_size"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:adjustViewBounds="true"
android:importantForAccessibility="no"
android:src="#drawable/ic_account_circle_white"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/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>
<FrameLayout
android:id="#+id/detailContainer"
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/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|right|end"
app:srcCompat="#drawable/ic_assessment_white_24dp" />
</android.support.design.widget.CoordinatorLayout>

Apply this style to your DialogFragment -
Style -
<style name="AppTheme.FullScreenDialogStyle" parent="AppTheme.YourParentTheme">
<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">false</item>
<item name="android:windowIsFloating">false</item>
</style>
DialogFragment Java -
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, R.style.AppTheme.AppTheme_FullScreenDialogStyle);
}
Refer here

You can use this method to show full screen with Navigation Bar or not
public static void makeActivityFullScreen(AppCompatActivity activity, boolean showNavigationBar) {
Window window = activity.getWindow();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
if (showNavigationBar)
window.setFlags(FLAG_LAYOUT_NO_LIMITS, FLAG_FULLSCREEN);
else
window.setFlags(FLAG_LAYOUT_NO_LIMITS, FLAG_LAYOUT_NO_LIMITS);
} else
window.setFlags(FLAG_FULLSCREEN, FLAG_FULLSCREEN);
}
and add this attr in your style
<item name="android:windowTranslucentStatus">true</item>

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

Android Collapsed Toolbar overflow menu has background

I'm using a collapsing toolbar layout in an activity which should have to items always shown in the overflow menu. the issue is that as you can see below (on the top right corner) both items has a background of the collapsed toolbar instead of being on top of the cover image directly like the back arrow.
All used drawables are vector drawables without background.
Activity XML 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=".ui.activities.WorkDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ToolbarTheme"
app:collapsedTitleGravity="start"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="48dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/expandedToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/toolbar_cover_container"
android:layout_width="match_parent"
android:layout_height="480dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/toolbar_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/down_dark_gradient" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
android:textAlignment="gravity"
android:theme="#style/ToolbarTheme"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_work" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/share_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_share_black"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view" />
Expanded Layout
Collapsed layout

Removing the theme from toolbar
android:theme="#style/ToolbarTheme" didn't solve the issue, applying a theme that overrides the parent with a transparent background did.
<item name="android:background">#color/transparent</item>

Scroll away picture and appbar title but leave tabs in Android

I use app support and CoordinatorLayout. I was able to implement CollapsingToolbarLayout with ImageView and Toolbar that hide when scrolling. I am struggled with tabs - TabLayout is not collapsed, which is good. The problem is that it does not look nice - I want it to use bottom part of the picture as background.
I moved TabLayout within CollapsingToolbarLayout and then it uses the picture as background but there are two problems - tabs are located at top of the screen and they are hidden when scrolling.
I want to achieve the effect that it will sit at bottom of picture
and it will stay at top of the screen when other parts are scrolled away
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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/digit1_hill"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/main.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.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>

You need to tell your Toolbar to app:layout_scrollFlags="scroll|enterAlways" and your CollapsingToolbarLayout to app:layout_scrollFlags="scroll|exitUntilCollapsed" while your TabLayout should have android:layout_gravity="bottom"
Try 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.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Fit the system windows for your CollapsingToolbarLayout
also set your height to wrap_content and give image a height-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="244dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/digit1_hill"
app:layout_collapseMode="parallax"/>
<!-- Tell your toolbar to scroll|enterAlways -->
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<!-- add layout_gravity="bottom" -->
<android.support.design.widget.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Update
Additionally, you should switch your theme or add a new theme:
<style name="NewAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Include all items from original theming -->
</style>
and to hide the title create a style:
<style name="Invisible" parent="AppTheme">
<item name="android:textColor">#android:color/transparent</item>
</style>
and then set this as your collapsedTitleTextAppearance:
app:collapsedTitleTextAppearance="#style/Invisible"