Add icon with title in CollapsingToolbarLayout

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 an icon with the title text?

Check this blog with Custom Behaviors http://saulmm.github.io/mastering-coordinator — SANAT, Aug 22 '16 at 07:22
yes @SANAT i tried that too as i mentioned but how can i put an icon with the text. please — Devendra Singh, Aug 22 '16 at 07:24

score 12 · Accepted Answer · answered Sep 07 '16 at 05:38

You may try the following

Reference for Co-Ordinator Layout

Now inside your MainActivity.java

private void handleToolbarTitleVisibility(float percentage) {
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {

        if(!mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE);
            toolbar.setAlpha(0.9f);
            toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.Primary)));
            mIsTheTitleVisible = true;
        }
    } 
    else {
        if (mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE);
            toolbar.setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.transparent)));
            mIsTheTitleVisible = false;
        }
    }
}

Note: Keep the toolbars background transparent when expanded.

I done a long work-around and yes i got what i wanted. – Devendra Singh Sep 07 '16 at 05:39 — Devendra Singh, Sep 07 '16 at 05:39

score 1 · Answer 2 · answered Sep 01 '16 at 09:52

1

You can take reference from this example:-

android ParallaxHeaderViewPager

answered Sep 01 '16 at 09:52

Pawanpreet

355
1
4
13

no its not what i m looking for. its not working with gridview – Devendra Singh Sep 01 '16 at 10:37
https://github.com/saulmm/CoordinatorBehaviorExample try this one its working for me – Pawanpreet Sep 01 '16 at 10:57
@Pawantpreet this is also not. I've tried this as well. – Devendra Singh Sep 01 '16 at 11:27

Dipali Shah · Answer 3 · 2016-09-06T12:07:33.257

May be this solve your problem :

You can position the expanded title wherever you want by using these CollapsingToolbarLayout attributes:

app:expandedTitleGravity        default is bottom|left -or- bottom|start
app:expandedTitleMargin
app:expandedTitleMarginBottom
app:expandedTitleMarginStart
app:expandedTitleMarginEnd

Code for layout File :

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@+id/bgheader"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                android:background="@drawable/sunflowerpic"
                app:layout_collapseMode="pin" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/MyToolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="parallax" />

        </android.support.design.widget.CollapsingToolbarLayout>

Then in your java file SetTitle:

 CollapsingToolbarLayout collapsingToolbar =
                (CollapsingToolbarLayout) findViewById(R.id.collapse_toolbar);
        collapsingToolbar.setTitle("Title");

Add icon to Top corner : use app:layout_collapseMode="pin" with ImagView. For e.g.

<ImageView
            android:id="@+id/someImage"
            android:layout_width="56dp"
            android:layout_height="wrap_content"
            android:src="@drawable/someDrawable"
            android:padding="16dp"
            android:layout_gravity="top|end"
            app:layout_collapseMode="pin"
            />

Reference to this link Collapsing Toolbar Example

please read my question correctly i need an imageview with the title. — Devendra Singh, Sep 06 '16 at 11:27
and how i add an small icon that will animate with the title from centre to toolbar. as you can see the image. in the second image you can see the image added but its going to top when scrolling i just want image with the title. — Devendra Singh, Sep 06 '16 at 11:40
i've written this code if you can see. would you focus on adding an icon? please — Devendra Singh, Sep 06 '16 at 11:58

score 1 · Answer 4 · edited May 23 '17 at 12:32

1

I suggest you to try Childs and dependencies

      public boolean onDependentViewChanged(     
      CoordinatorLayout parent, 
      CircleImageView avatar, 
      View dependency) {     

      modifyAvatarDependingDependencyState(avatar, dependency);
   }

   private void modifyAvatarDependingDependencyState(
    CircleImageView avatar, View dependency) {
        //  avatar.setY(dependency.getY());
        //  avatar.setBlahBlat(dependency.blah / blah);
    }

http://www.devexchanges.info/2016/03/android-tip-custom-coordinatorlayout.html

CollapsingToolbarLayout with a custom view

edited May 23 '17 at 12:32

Community

1
1

answered Sep 06 '16 at 12:30

Aditya Vyas-Lakhan

13,409
16
61
96

i tried that code but in that the toolbar is in lower side. – Devendra Singh Sep 06 '16 at 12:43
see my edited answer,i suggest that try to follow that,and you need to change for toolbar – Aditya Vyas-Lakhan Sep 07 '16 at 03:58

score 1 · Answer 5 · answered Jan 25 '21 at 04:58

In Kotlin

    private fun handleToolbarTitleVisibility(percentage: Float) {
    if (percentage >= PERCENTAGE_TO_SHOW_TITLE_AT_TOOLBAR) {
        if (!mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.VISIBLE)
            toolbar.alpha = 0.9f
            toolbar.setBackgroundDrawable(ColorDrawable(resources.getColor(R.color.Primary)))
            mIsTheTitleVisible = true
        }
    } else {
        if (mIsTheTitleVisible) {
            startAlphaAnimation(textviewTitle, ALPHA_ANIMATIONS_DURATION, View.INVISIBLE)
            toolbar.setBackgroundDrawable(ColorDrawable(resources.getColor(android.R.color.transparent)))
            mIsTheTitleVisible = false
        }
    }
}

Add icon with title in CollapsingToolbarLayout

5 Answers5

Linked