Sharedelement transition between textview and toolbar title

Question

I have an item that has a name in a recycler view and a details activity with a collapsing toolbar that displays the name of the item. I would like to add an sharedelement transition between the name of the item and the title of the toolbar/collapsing toolbar.

item_subject.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <FrameLayout
        android:id="@+id/frameLayoutSubjectColor"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minWidth="20dp" />

    <TextView
        android:id="@+id/textViewSubjectName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</LinearLayout>

activity_subject_detail.xml

<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.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:id="@+id/appBarLayout"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

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

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

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

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/subject_detail_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_horizontal_margin"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textViewSubjectShort"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewSubjectRoom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="32dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="@string/teacher"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/textViewTeacherName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacherPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />

        <TextView
            android:id="@+id/textViewTeacherEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="16dp"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEdit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|start"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_menu_edit"
    app:layout_anchor="@+id/subject_detail_container"
    app:layout_anchorGravity="top|end" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabPhone"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|start"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_menu_call"
    app:fabSize="normal" />

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabEmail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email"
    app:fabSize="normal" />

Answer 1

Hey there I've found a solution I am posting it in kotlin but I believe it's no big deal however it's shared fragment transition but the idea is somewhat the same

// from the start fragment init your end fragment whatever it is
val endFragment = EndFragment.newInstance(/*...*/)
val sharedView = view.findViewById<TextView>(R.id.mySharedTV)
val sharedTransitionName = "myTransition"

sharedView.transitionName = sharedTransitionName

// define your transition
val transition = TransitionInflater                
                     .from(context)
                     .inflateTransition(android.R.transition.move)
// define it as shared one
endFragment.sharedElementEnterTransition = transition

// pass the transition name to the endFragment
val bundle = endFragment.arguments ?: Bundle()
bundle.putString("sharedTransitionKey", sharedTransitionName)
endFragment.arguments = bundle

activity!!.supportFragmentManager
          .beginTransaction()
          .replace(R.id.myFragmentContainer, endFragment)          
          .addSharedElement(sharedView, sharedTransitionName)
          .addToBackStack(null) // or add it
          .commit()

On the other side in

override fun onCreateView(inflater: LayoutInflater, 
       container: ViewGroup?, savedInstanceState: Bundle?): View? {

    val inflatedView = inflater.inflate(R.layout.myEndFragment, container, false)
    /* here is the spot... */
    return inflatedView
}

you have the following options:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="@color/colorPrimary"        
        app:title="My Title" />

with this defined method somewhere

fun getToolbarTitleAsTextView(toolbar: Toolbar) : TextView? {
    (0..toolbar.childCount).forEach {
        val view = toolbar.getChildAt(it)
        if (view is TextView)
            return view
    }

    return null
}

...and use it

val toolbar = inflatedView.findViewById<Toolbar>(R.id.toolbar)
val toolbarTitle = getToolbarTitleAsTextView(toolbar)

or

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:titleTextColor="@android:color/white"
        android:background="@color/colorPrimary">

        <TextView
            android:id="@+id/toolbarTitleTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
            android:text="My Title"/>
</android.support.v7.widget.Toolbar>

...and

val toolbarTitle =  inflatedView.findViewById<Toolbar>(R.id.toolbarTitleTV)

finally when you have the toolbarTitle in both cases

// read the passed transitionName 
val bundle = endFragment.arguments ?: Bundle()
val sharedTransitionName = bundle.getString("sharedTransitionKey")
toolbarTitle.transitionName = sharedTransitionName

...and the magic happens