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");

Ipsambul

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>  

Rack

I tried this library but it is not what i am looking for, see the iOS gif. and compare this library, not matching. would you make changes in my code to achieve the output. And in this library the toolbar exists just before the cardview and goes up side on scroll. i do not want that. plus there was issue to implement gridview in this. – Ipsambul

i just have the xml code. and initialise the layout in java. i updated code – Ipsambul

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

Stilwell