Develop Reference

CollapsingToolbar with second toolbar instead of ImageView

I am trying to create an app with two toolbars on top and a specific collapsing/expanding behaviour on scrolling. See the mockup to get a deeper understanding of what I'm trying to achieve:
I already found this StackOverflow question that is trying to achieve for about the same, and the response is hinting towards using a CollapsingToolbarLayout and just using another <Toolbar /> instead of the usual <ImageView />, but I tried around and could not get any close to the desired result.
My current xml layout:
<androidx.coordinatorlayout.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/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="01/01/1999"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the corresponding activity code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
I am using a NoActionBar theme. If I run this configuration, there is just one Toolbar displayed, nothing can be seen from the second Toolbar or the CollapsingToolbarLayout.
Huge thanks to anyone who is trying to help.

You could wrap the CoordinatorLayout into a another ViewGroup and add the main Toolbar into this new root layout instead. This will avoid the confusion of the app:layout_collapseMode="pin" to the main toolbar.
So now the entire layout hierarchy would be:
<ConstraintLayout>
<AppBarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< main toolbar
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< second toolbar
<NestedScrollView>
<TextView>
Then to fix the collapsing behavior like you want you need to change the scrolling flags of the CollapsingToolbarLayout to "scroll|enterAlways" instead of "scroll|exitUntilCollapsed". This will make the toolBar always enter off the top screen.
And build the layout of the second Toolbar with a normal ViewGroup inside of it; here I'm using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.google.android.material.appbar.AppBarLayout xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:visibility="visible">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Title"
app:titleTextColor="#color/black" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appbar_layout">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F2ECF6"
android:paddingHorizontal="32dp"
app:layout_collapseMode="parallax">
<ImageButton
android:id="#+id/left_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_back_ios_24"
app:tint="#color/black" />
<ImageButton
android:id="#+id/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_forward_ios_24"
app:tint="#color/black" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="01/01/1999"
android:textColor="#color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right_arrow"
app:layout_constraintStart_toEndOf="#+id/left_arrow"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/placeholder"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Android Collapsing Toolbar does not collapse

I have the following layout that has a collapsing toolbar with a LinearLayout inside -
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".application_flow.group.GroupOverviewFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:elevation="10dp"
android:fitsSystemWindows="true"
android:stateListAnimator="#animator/show_toolbar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="center"
app:contentScrim="#color/colorPrimary"
app:expandedTitleGravity="top"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="Lohamei Galipoly 38"
app:titleEnabled="false"
app:toolbarId="#id/group_tasks_toolbar">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="14dp"
android:layout_marginEnd="14dp"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.6">
<androidx.appcompat.widget.Toolbar
android:id="#+id/group_tasks_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/left_arrow_white"
app:titleTextColor="#color/white" />
<Space
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:textColor="#color/white"
android:textSize="18sp"
tools:text="Total group tasks: 8" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/group_tasks_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/white"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white" />
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/group_tasks_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>
For some reason it does not collapse the entire content of the LinearLayout like it should and it is being left fixed in place.
This error seemed to start happening after I switched to work with the LinearLayout inside my CollapsingToolbarLayout
What is it that I am missing?

I think you are missing an actual toolbar inside the collapsing toolbar.
try adding a toolbar after the linear layout's closing tag.
example:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimaryLight"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar"
app:layout_collapseMode="pin"
app:title="Toolbar title" />
and another thing I noticed, you AppBarLayout has android:fitsSystemWindows="true" so check that as well.

Android setLogo isnt placed on the center of Action Bar

Hi I am using a toolbar and trying to set a logo to the center of action bar. But in the center there was title and (I think) thats why logo was starting from the left side of the action bar. Then I removed title to place the logo in center but it did no good. How can I solve this?
Here is the method I use to set the toolbar.
private void setToolBar(){
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setBackgroundColor(getResources().getColor(colorActionBar));
toolbar.setLogo(R.drawable.logoactionbar);
}
Here is the theme in my manifest
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
And here is the decleration of toolbar
<<?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:background="#color/colorActionBar"
android:fitsSystemWindows="true"
tools:context="com.anadolusigorta.rhextranet.com.anadolusigorta.rhextranet.HomeActivity">
<View
android:id="#+id/statusBarBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="#color/colorActionBar"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorActionBar"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/logoactionbar"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_home" />
</android.support.design.widget.CoordinatorLayout>

Try this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:src="#android:drawable/btn_star_big_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>

Try this way
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_logo"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Toolbar is just a ViewGroup, you can customize that as you want.
Try This:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/color_primary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
</android.support.v7.widget.Toolbar>

NestedScrollView size is not fit to CollapsingToolbarLayout

I am tring to apply CollapsingToolbarLayout in my app.
Below XML works fine.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.design.widget.TextInputLayout
android:id="#+id/tilTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:layout_marginStart="56dp"
android:layout_marginTop="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/Toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<ViewSwitcher
android:id="#+id/switcherTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/title"
android:textSize="36sp"/>
<EditText
android:id="#+id/etTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/title"
android:inputType="textMultiLine"
android:textSize="36sp"/>
</ViewSwitcher>
</android.support.design.widget.TextInputLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/Toolbar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</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">
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_save_confirm_action_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_done_white_36dp"
app:fabSize="normal"
app:layout_anchor="#id/collapsingToolbar"
app:layout_anchorGravity="bottom|right|end"/>
<com.google.android.gms.ads.AdView
android:id="#+id/adBannerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
ads:adSize="BANNER"
ads:adUnitId="ca-app-pub-5185146194441120/1301019297"/>
</android.support.design.widget.CoordinatorLayout>
But there is one issue.
NestedScrollView over the screen.
It is not fit in its parent height.
When I apply below code, it is helpful.
android:layout_marginBottom="?attr/actionBarSize"
This mean that should I control using "actionBarHeight"?
Is there any other smart way?

You need to call setSupportActionBar with your toolbar in the Activity onCreate method.
i.e.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}

Try setting minHeight attribute in your CollapsingToolbarLayout.
Similar issue and the answer here

Blank Toolbar when scrolling

My app has a Toolbar that hides when you scroll down the screen and appears when you start scrolling up.
In Lollipop it works perfectly, but in Kitkat a blank toolbar is sometimes shown when you scroll up. When you scroll a bit down again, the toolbar shows the correct content.
Am I missing something?
Here is part of my xml:
<android.support.design.widget.CoordinatorLayout android:id="#+id/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=".main.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card Name"
android:textColor="#fff"
android:textSize="18sp"
android:textStyle="bold"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>

Place a blank view below your Toolbar before the AppBarLayout closing statement.
<android.support.design.widget.CoordinatorLayout android:id="#+id/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=".main.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card Name"
android:textColor="#fff"
android:textSize="18sp"
android:textStyle="bold"/>
</android.support.v7.widget.Toolbar>
<View
android:id="#+id/appbar_bottom"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/transparent"
android:visibility="invisible" />
</android.support.design.widget.AppBarLayout>
...
</android.support.design.widget.CoordinatorLayout>