How to add an ImageView with the title in collapsingtoolbarlayout in Android

Question

I am using CoordinatorLayout to get this effect

Here is the layout code.

    <?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:layout_width="match_parent"     android:layout_height="match_parent"     android:id="@+id/coordinatorRootLayout"     android:background="@android:color/background_light"     android:fitsSystemWindows="true"     >   <android.support.design.widget.AppBarLayout             android:id="@+id/android_appbar_layout"             android:layout_width="match_parent"             android:layout_height="220dp"             android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">              <android.support.design.widget.CollapsingToolbarLayout                 android:id="@+id/collapsingToolbarLayoutAndroidExample"                 android:layout_width="match_parent"                 android:background="#fff"                 app:collapsedTitleGravity="left"                 app:expandedTitleTextAppearance="@color/card_outline"                 android:layout_height="match_parent"                 app:layout_scrollFlags="scroll|exitUntilCollapsed"                 android:fitsSystemWindows="true"                 app:expandedTitleGravity="center_horizontal"                 app:contentScrim="?attr/colorPrimary"                 app:statusBarScrim="?attr/colorPrimary"                 app:expandedTitleMarginStart="32dp"                 app:expandedTitleMarginEnd="48dp">              <ImageView                     android:id="@+id/parallax_header_imageview"                     android:layout_width="match_parent"                     android:layout_height="match_parent"                     android:scaleType="fitXY"                     android:src="@drawable/orange_triangle"                     app:layout_collapseMode="parallax"                     app:layout_collapseParallaxMultiplier="0.8"/>                   <ImageView                     app:expandedTitleGravity="center_horizontal"                     android:id="@+id/someImage"                     android:layout_width="100dp"                     android:layout_height="100dp"                     android:src="@drawable/circle"                     android:layout_gravity="center_horizontal"                     app:layout_collapseMode="parallax"                     app:layout_collapseParallaxMultiplier="-1"                     />                 <android.support.v7.widget.Toolbar                     android:id="@+id/toolbar_android"                     android:layout_width="match_parent"                     android:layout_height="?attr/actionBarSize"                     app:layout_collapseMode="none"                     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"                     app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />              </android.support.design.widget.CollapsingToolbarLayout>           </android.support.design.widget.AppBarLayout>     <android.support.v4.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">              <LinearLayout                 android:id="@+id/linear_layout_android"                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:padding="15dp"                 android:background="@color/off_white"                 android:layout_gravity="center_horizontal"                 android:gravity="center_horizontal"                 android:orientation="vertical">                  <GridView                     android:id="@+id/gridview_parallax_header"                     android:layout_width="fill_parent"                     android:layout_height="fill_parent"                     android:columnWidth="100dp"                     android:gravity="center"                     android:numColumns="auto_fit"                     android:stretchMode="columnWidth" />              </LinearLayout>          </android.support.v4.widget.NestedScrollView>       </android.support.design.widget.CoordinatorLayout> 

and here is what i am getting as output How can use icon with the title text.

and in Java

 mRootLayout = (CoordinatorLayout) findViewById(R.id.coordinatorRootLayout);     mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingToolbarLayoutAndroidExample);     mCollapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.black));     mCollapsingToolbarLayout.setTitle("My App Title"); 

Answer 1

You can follow this link...

https://github.com/saulmm/CoordinatorBehaviorExample

MainActivity.java

import android.os.Bundle; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CollapsingToolbarLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.View; import android.view.animation.AlphaAnimation; import android.widget.FrameLayout; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView;  public class MainActivity extends AppCompatActivity     implements AppBarLayout.OnOffsetChangedListener {      private static final float PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR  = 0.9f;     private static final float PERCENTAGE_TO_HIDE_TITLE_DETAILS     = 0.3f;     private static final int ALPHA_ANIMATIONS_DURATION              = 200;      private boolean mIsTheTitleVisible          = false;     private boolean mIsTheTitleContainerVisible = true;      private LinearLayout mTitleContainer;     private TextView mTitle;     private AppBarLayout mAppBarLayout;     private Toolbar mToolbar;       @Override     protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);      bindActivity();      mAppBarLayout.addOnOffsetChangedListener(this);      mToolbar.inflateMenu(R.menu.menu_main);     startAlphaAnimation(mTitle, 0, View.INVISIBLE);     }      private void bindActivity() {     mToolbar        = (Toolbar) findViewById(R.id.main_toolbar);     mTitle          = (TextView) findViewById(R.id.main_textview_title);     mTitleContainer = (LinearLayout) findViewById(R.id.main_linearlayout_title);     mAppBarLayout   = (AppBarLayout) findViewById(R.id.main_appbar);     }      @Override     public boolean onCreateOptionsMenu(Menu menu) {     getMenuInflater().inflate(R.menu.menu_main, menu);     return true;     }      @Override     public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {     int maxScroll = appBarLayout.getTotalScrollRange();     float percentage = (float) Math.abs(offset) / (float) maxScroll;      handleAlphaOnTitle(percentage);     handleToolbarTitleVisibility(percentage);     }      private void handleToolbarTitleVisibility(float percentage) {         if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {          if(!mIsTheTitleVisible) {             startAlphaAnimation(mTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);             mIsTheTitleVisible = true;         }          } else {          if (mIsTheTitleVisible) {             startAlphaAnimation(mTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);             mIsTheTitleVisible = false;         }         }     }      private void handleAlphaOnTitle(float percentage) {     if (percentage >= PERCENTAGE_TO_HIDE_TITLE_DETAILS) {         if(mIsTheTitleContainerVisible) {         startAlphaAnimation(mTitleContainer, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);         mIsTheTitleContainerVisible = false;         }      } else {          if (!mIsTheTitleContainerVisible) {         startAlphaAnimation(mTitleContainer, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);         mIsTheTitleContainerVisible = true;         }     }     }      public static void startAlphaAnimation (View v, long duration, int visibility) {     AlphaAnimation alphaAnimation = (visibility == View.VISIBLE)         ? new AlphaAnimation(0f, 1f)         : new AlphaAnimation(1f, 0f);      alphaAnimation.setDuration(duration);     alphaAnimation.setFillAfter(true);     v.startAnimation(alphaAnimation);     }     } 

activity_main.xml

<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"     tools:ignore="RtlHardcoded"     >      <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.support.design.widget.CollapsingToolbarLayout         android:id="@+id/main.collapsing"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"         >          <ImageView         android:id="@+id/main.imageview.placeholder"         android:layout_width="match_parent"         android:layout_height="300dp"         android:scaleType="centerCrop"         android:src="@drawable/quila2"         android:tint="#11000000"         app:layout_collapseMode="parallax"         app:layout_collapseParallaxMultiplier="0.9"         />          <FrameLayout         android:id="@+id/main.framelayout.title"         android:layout_width="match_parent"         android:layout_height="100dp"         android:layout_gravity="bottom|center_horizontal"         android:background="@color/primary"         android:orientation="vertical"         app:layout_collapseMode="parallax"         app:layout_collapseParallaxMultiplier="0.3"         >          <LinearLayout             android:id="@+id/main.linearlayout.title"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center"             android:orientation="vertical"             >              <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center_horizontal"             android:gravity="bottom|center"             android:text="@string/quila_name"             android:textColor="@android:color/white"             android:textSize="30sp"             />              <TextView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_gravity="center_horizontal"             android:layout_marginTop="4dp"             android:text="@string/quila_tagline"             android:textColor="@android:color/white"             />          </LinearLayout>         </FrameLayout>     </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:behavior_overlapTop="30dp"     app:layout_behavior="@string/appbar_scrolling_view_behavior"      >      <android.support.v7.widget.CardView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_margin="8dp"         app:cardElevation="8dp"         app:contentPadding="16dp"         >          <TextView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:lineSpacingExtra="8dp"         android:text="@string/lorem"         android:textSize="18sp"         />     </android.support.v7.widget.CardView>       </android.support.v4.widget.NestedScrollView>      <android.support.v7.widget.Toolbar     android:id="@+id/main.toolbar"     android:layout_width="match_parent"     android:layout_height="?attr/actionBarSize"     android:background="@color/primary"     app:layout_anchor="@id/main.framelayout.title"     app:theme="@style/ThemeOverlay.AppCompat.Dark"     app:title=""     >      <LinearLayout         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:orientation="horizontal"         >          <Space         android:layout_width="@dimen/image_final_width"         android:layout_height="@dimen/image_final_width"         />          <TextView         android:id="@+id/main.textview.title"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_marginLeft="8dp"         android:gravity="center_vertical"         android:text="@string/quila_name2"         android:textColor="@android:color/white"         android:textSize="20sp"         />      </LinearLayout>     </android.support.v7.widget.Toolbar>      <de.hdodenhof.circleimageview.CircleImageView     android:layout_width="@dimen/image_width"     android:layout_height="@dimen/image_width"     android:layout_gravity="center_horizontal"     android:src="@drawable/quila"     app:border_color="@android:color/white"     app:border_width="2dp"     app:finalHeight="@dimen/image_final_width"     app:finalYPosition="2dp"     app:layout_behavior="saulmm.myapplication.AvatarImageBehavior"     app:startHeight="2dp"     app:startToolbarPosition="2dp"     app:startXPosition="2dp"     /> </android.support.design.widget.CoordinatorLayout>   

Answer 2

use

<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"     tools:ignore="RtlHardcoded"     >      <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.support.design.widget.CollapsingToolbarLayout             android:id="@+id/main.collapsing"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"             >              <ImageView                 android:id="@+id/main.imageview.placeholder"                 android:layout_width="match_parent"                 android:layout_height="300dp"                 android:scaleType="centerCrop"                 android:src="@drawable/quila2"                 android:tint="#11000000"                 app:layout_collapseMode="parallax"                 app:layout_collapseParallaxMultiplier="0.9"                 />              <FrameLayout                 android:id="@+id/main.framelayout.title"                 android:layout_width="match_parent"                 android:layout_height="100dp"                 android:layout_gravity="bottom|center_horizontal"                 android:background="@color/primary"                 android:orientation="vertical"                 app:layout_collapseMode="parallax"                 app:layout_collapseParallaxMultiplier="0.3"                 >                  <LinearLayout                     android:id="@+id/main.linearlayout.title"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_gravity="center"                     android:orientation="vertical"                     >                      <TextView                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_gravity="center_horizontal"                         android:gravity="bottom|center"                         android:text="@string/quila_name"                         android:textColor="@android:color/white"                         android:textSize="30sp"                         />                      <TextView                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_gravity="center_horizontal"                         android:layout_marginTop="4dp"                         android:text="@string/quila_tagline"                         android:textColor="@android:color/white"                         />                  </LinearLayout>             </FrameLayout>         </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:behavior_overlapTop="30dp"         app:layout_behavior="@string/appbar_scrolling_view_behavior"          >          <android.support.v7.widget.CardView             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_margin="8dp"             app:cardElevation="8dp"             app:contentPadding="16dp"             >              <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:lineSpacingExtra="8dp"                 android:text="@string/lorem"                 android:textSize="18sp"                 />         </android.support.v7.widget.CardView>       </android.support.v4.widget.NestedScrollView>      <android.support.v7.widget.Toolbar         android:id="@+id/main.toolbar"         android:layout_width="match_parent"         android:layout_height="?attr/actionBarSize"         android:background="@color/primary"         app:layout_anchor="@id/main.framelayout.title"         app:theme="@style/ThemeOverlay.AppCompat.Dark"         app:title=""         >          <LinearLayout             android:layout_width="wrap_content"             android:layout_height="match_parent"             android:orientation="horizontal"             >              <Space                 android:layout_width="@dimen/image_final_width"                 android:layout_height="@dimen/image_final_width"                 />              <TextView                 android:id="@+id/main.textview.title"                 android:layout_width="wrap_content"                 android:layout_height="match_parent"                 android:layout_marginLeft="8dp"                 android:gravity="center_vertical"                 android:text="@string/quila_name2"                 android:textColor="@android:color/white"                 android:textSize="20sp"                 />          </LinearLayout>     </android.support.v7.widget.Toolbar>      <de.hdodenhof.circleimageview.CircleImageView         android:layout_width="@dimen/image_width"         android:layout_height="@dimen/image_width"         android:layout_gravity="center_horizontal"         android:src="@drawable/quila"         app:border_color="@android:color/white"         app:border_width="2dp"         app:finalHeight="@dimen/image_final_width"         app:finalYPosition="2dp"         app:layout_behavior="saulmm.myapplication.AvatarImageBehavior"         app:startHeight="2dp"         app:startToolbarPosition="2dp"         app:startXPosition="2dp"         /> </android.support.design.widget.CoordinatorLayout> 

for more info: https://github.com/saulmm/CoordinatorBehaviorExample