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?

How can I change the color of a CollapsibleToolbar title?

So, I'm struggling for a few days meddling with lots of different attributes, but still couldn't figure out how to change the text color of a Collapsing toolbar's title. Any takes on this? Here's a very simple layout I've been experimenting with. The app:titleTextColor="#color/colorPrimary" produces no effect.
<?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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="center|top"
app:title="#string/app_name"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:src="#drawable/zebra"
android:scaleType="centerCrop"
android:contentDescription="#string/zebras"
/>
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:titleTextColor="#color/colorPrimary"
/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Add styles in styles.xml
<style name="CollapsedAppBarText" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/blue</item>
<item name="android:textStyle">normal</item>
</style>
then Activity/ fragment use like this
collapsingToolbar = findViewById<View>(R.id.collapsing_toolbar) as CollapsingToolbarLayout
collapsingToolbar?.setCollapsedTitleTextAppearance(R.style.CollapsedAppBarText)

Recyclerview content goes behind navigation bar

I have a typically problem since Android Lollipop. But I already tried everything.
I have this layout:
<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"
tools:openDrawer="start"
android:fitsSystemWindows="true"
>
<include
layout="#layout/activity_main_content"
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"
app:headerLayout="#layout/nav_header_activity_main"
app:itemTextColor="#color/nav_selected"
app:itemIconTint="#color/nav_selected"
app:menu="#menu/activity_main_drawer"
>
</android.support.design.widget.NavigationView>
<android.support.design.widget.NavigationView
android:id="#+id/filter_nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
app:itemTextColor="#color/nav_selected"
app:itemIconTint="#color/nav_selected"
app:menu="#menu/activity_consoles_drawer"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
In the activity_main_content I have 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"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/rootlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.robinstrutz.gamereleases.Activities.Activity_Main">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary"
android:elevation="3dp"
>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<ProgressBar
android:id="#+id/loading_bar"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/progress_drawable"
android:indeterminate="true"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/settings_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_settings_white_24dp"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="10dp"
app:backgroundTint="#color/colorAccent"
android:tint="#color/colorPrimary"
app:borderWidth="0dp"
app:elevation="3dp"
android:transitionName="fab"
android:stateListAnimator="#animator/raise"
/>
</android.support.design.widget.CoordinatorLayout>
In my code I'm doing a typical initialization for a RecyclerView and nothing that changes the window settings/features or else. So now the content of my RecyclerView are going to the bottom of the screen behind the navigation bar. I already tried using fitSystemWindows, clipToPadding and clipToChildren.
I thought my style brings this fail but how it looks it doesn't:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/background</item>
<item name="android:fontFamily">sans-serif-medium</item>
<item name="android:textSize">14sp</item>
<item name="android:fontFeatureSettings">smcp, onum</item>
<item name="android:letterSpacing">0.02</item>
</style>
Any suggestions how to fix this without adding layout_marginBottom to RecyclerView? Because of the height difference from the navigation bar on different devices.

This could be the result of using app:layout_scrollFlags="scroll|enterAlways" when setting up the Toolbar.
With this setting on, the layout height below the Toolbar is larger than what is visible on your device. It includes some extra to allow smooth scrolling when the Toolbar is scrolled up.
If your Activity/Fragment does not need to scroll the content, a fix would be to simply remove the 'scroll' flag (app:layout_scrollFlags="enterAlways").

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>

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(..) ;