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?

Distillery

Check this blog with Custom Behaviors saulmm.github.io/mastering-coordinator – Scopophilia

yes @Scopophilia i tried that too as i mentioned but how can i put an icon with the text. please – Distillery

Where is "My App Title" text set? – Bartel

Answer 1

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.

Kruter

I done a long work-around and yes i got what i wanted. – Distillery

Answer 2

You can take reference from this example:-

android ParallaxHeaderViewPager

Derna

no its not what i m looking for. its not working with gridview – Distillery

github.com/saulmm/CoordinatorBehaviorExample try this one its working for me – Derna

@Pawantpreet this is also not. I've tried this as well. – Distillery

Answer 3

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

Patentee

please read my question correctly i need an imageview with the title. – Distillery

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. – Distillery

i've written this code if you can see. would you focus on adding an icon? please – Distillery

Answer 4

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

Freehearted

i tried that code but in that the toolbar is in lower side. – Distillery

see my edited answer,i suggest that try to follow that,and you need to change for toolbar – Freehearted

Answer 5

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
        }
    }
}

Permission