Bdtjtk

I want do this but with Collapsing toolbar layout or display the logo and title in toolbar after scroll.

    <!-- Toolbars -->

<android.support.design.widget.AppBarLayout

    android:id="@+id/appbar"

    android:layout_width="match_parent"

    android:layout_height="@dimen/detail_backdrop_height"

    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

    android:fitsSystemWindows="true">



    <android.support.design.widget.CollapsingToolbarLayout

        android:id="@+id/collapsing_toolbar_layout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_scrollFlags="scroll|exitUntilCollapsed"

        app:contentScrim="?attr/colorPrimary"

        app:expandedTitleMarginStart="48dp"

        app:expandedTitleMarginEnd="64dp"

        android:fitsSystemWindows="true">



        <ImageView

            android:id="@+id/background_image"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:scaleType="centerCrop"

            android:src="@drawable/background_1"

            app:layout_collapseMode="parallax"

            android:fitsSystemWindows="true"/>



        <RelativeLayout

            android:orientation="vertical"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:fitsSystemWindows="true">



            <ImageView

                android:id="@+id/avatar_image"

                android:layout_width="@dimen/circular_image_avatar"

                android:layout_height="@dimen/circular_image_avatar"

                android:gravity="center"

                android:scaleType="centerCrop"

                android:src="@drawable/ic_placerholder"

                android:layout_centerVertical="true"

                android:layout_centerHorizontal="true"

                android:transitionName="image_toolbar"/>



            <TextView

                android:id="@+id/profile_title"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:text="Name title"

                android:textAlignment="center"

                android:layout_marginTop="@dimen/item_padding_top_bottom"

                android:gravity="center"

                style="@style/titleText_toolbar"

                android:layout_below="@+id/avatar_image"

                android:transitionName="title_toolbar"/>

            <TextView

                android:id="@+id/profile_subtitle"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:text="Subtitle"

                android:textAlignment="center"

                android:gravity="center"

                style="@style/captionText_toolbar"

                android:layout_below="@+id/profile_title" />



        </RelativeLayout>



        <android.support.v7.widget.Toolbar

            android:id="@+id/toolbar"

            android:layout_height="?attr/actionBarSize"

            android:layout_width="match_parent"

            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

            app:layout_collapseMode="pin">



            <!-- avatar image and title, subtitle -->



        </android.support.v7.widget.Toolbar>



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



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

Please help me

smooth-app-bar-layout

see Example

Installation

compile "me.henrytao:smooth-app-bar-layout:<latest-version>"

You can also view my example with animated avatar and animated text

CollapsingAvatarToolbarSample

Read my post on Medium

So lets me to explaine how it works. I created custom view implemented AppBarLayout.OnOffsetChangedListener. Inside HeadCollapsing Custom View i founded text and image view in AppBarLayout.

class HeadCollapsing(context: Context, attrs: AttributeSet?) : 

 FrameLayout(context, attrs), AppBarLayout.OnOffsetChangedListener {



  private fun findViews() {

            appBarLayout = findParentAppBarLayout()



            avatarContainerView = findViewById(R.id.imgb_avatar_wrap)



            titleToolbarText =  findViewById<AppCompatTextView>(id)



        }



  private fun findParentAppBarLayout(): AppBarLayout {

    val parent = this.parent

    return parent as? AppBarLayout ?: if (parent.parent is AppBarLayout) {

        parent.parent as AppBarLayout

    } else {

        throw IllegalStateException("Must be inside an AppBarLayout")

    }

}



  ...



     override fun onOffsetChanged(appBarLayout: AppBarLayout, offset:Int) {

           ...

           //Calculate expanded percentage

           val expandedPercentage = 1 - -offset / maxOffset

           updateViews(expandedPercentage)

     }

}

Then change views via calculated percentage. For example, how text
view changing:

         when {

                inversePercentage < ABROAD -> {

                    titleToolbarText?.visibility = View.VISIBLE

                    titleTolbarTextSingle?.visibility = View.INVISIBLE

                }



                inversePercentage > ABROAD -> {

                    titleToolbarText?.visibility = View.INVISIBLE

                    titleTolbarTextSingle?.visibility = View.VISIBLE

                    titleTolbarTextSingle?.let {

                        animateShowText(it)

                    }

                }

            }

To detect when need image collapse animate created Pair object

private var cashCollapseState: kotlin.Pair<Int, Int>? = null

with states: TO_EXPANDED_STATE, TO_COLLAPSED_STATE, WAIT_FOR_SWITCH, SWITCHED

  companion object {

        const val ABROAD = 0.95f

        const val TO_EXPANDED_STATE = 0

        const val TO_COLLAPSED_STATE = 1

        const val WAIT_FOR_SWITCH = 0

        const val SWITCHED = 1

    }

then cretaed animation for avatar swith state:

 when {

                cashCollapseState != null && cashCollapseState != state -> {

                    when (state.first) {

                        TO_EXPANDED_STATE -> {

                          // do calculates

                        }

                        TO_COLLAPSED_STATE -> {



                    ValueAnimator.ofFloat(avatarContainerView.translationX, translationX).apply {

                        addUpdateListener {

                            avatarContainerView.translationX = it.animatedValue as Float

                        }



                        duration = 350

                        (state.first == TO_COLLAPSED_STATE).apply {

                            if (this) interpolator = LinearInterpolator()

                        }

                        start()

                    }

                //SWITCH STATE CASE

                cashCollapseState = kotlin.Pair(state.first, SWITCHED)

            }



            else -> {

                cashCollapseState = kotlin.Pair(state.first, WAIT_FOR_SWITCH)

            }