Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CollapsingToolbarLayout subtitle

Am I able to set the title of a CollapsingToolbarLayout via the setTitle method?

Is there also a way to set a subtitle?

like image 910
observer Avatar asked Jul 02 '15 20:07

observer


People also ask

What is CollapsingToolbarLayout?

Android CollapsingToolbarLayout is a wrapper for Toolbar which implements a collapsing app bar. It is designed to be used as a direct child of a AppBarLayout. This type of layout is commonly seen in the Profile Screen of the Whatsapp Application.

How to set title in Collapsing Toolbar?

By calling setTitleEnabled(false); , the title appeared in the toolbar. Save this answer. Show activity on this post. It is the same as setting title in a normal toolbar.


1 Answers

If you want the subtitle to go to Toolbar when the AppBar is fully collapsed you should create your custom CoordinatorLayout.Behaviour Like this: Github Guide

But if you just want a smaller text behind the title when the AppBar is expanded you can try this 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: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="300dp"         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:expandedTitleMarginBottom="160dp"             app:expandedTitleMarginEnd="64dp"             app:expandedTitleMarginStart="48dp"             app:layout_scrollFlags="scroll|exitUntilCollapsed">             <ImageView                 android:id="@+id/header"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:background="@drawable/quila2"                 android:fitsSystemWindows="true"                 android:scaleType="centerCrop"                 app:layout_collapseMode="parallax" />             <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:textSize="16sp"                 android:textColor="@android:color/white"                 android:layout_marginBottom="32dp"                 android:layout_marginEnd="64dp"                 android:layout_marginStart="48dp"                 app:layout_collapseMode="parallax"                 android:layout_gravity="bottom"                 android:text="Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran Lorem Ipsum Iran "/>             <android.support.v7.widget.Toolbar                 android:id="@+id/anim_toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:layout_collapseMode="pin"                 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"         android:scrollbars="none"         app:layout_behavior="@string/appbar_scrolling_view_behavior">          <TextView             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:layout_margin="16dp"             android:lineSpacingExtra="8dp"             android:text="@string/lorem"             android:textSize="18sp"/>      </android.support.v4.widget.NestedScrollView>      <android.support.design.widget.FloatingActionButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="10dp"         android:clickable="true"         android:src="@drawable/abc_ic_search_api_mtrl_alpha"         app:layout_anchor="@+id/appbar"         app:layout_anchorGravity="bottom|right|end" />  </android.support.design.widget.CoordinatorLayout> 

Notice that here I set the AppBar height as 300dp and the app:expandedTitleMarginBottom is 160dp so the title won't go down and conflict with the out subtitle. In this example you should set CollapsingToolbarTitle dynamically in the runtime with collapsingToolbarTitle.setTitle("My Title"); method.

The result will be something like this:

enter image description here

like image 164
Amin Avatar answered Oct 02 '22 01:10

Amin