I want to create a custom shared element transition including a CollapsingToolbarLayout. As the toolbar collapses, I want the Activity's ActionBar to disappear at a rate defined by the rate of scrolling performed by the user before the CollapsingToolbarLayout starts to contract. More importantly, want there to be a shared element transition. Namely, there exist two CircularImageView objects defined in the XML (shown below), I want to create an animation that converts the large ImageView (id = profileImageview) into the smaller one (id = smallProfileImageview) as the toolbar collapses (and vice versa). The java and xml code used to create the start and end states of the animation.
the java:
binding.appBarLayout.addOnOffsetChangedListener(((appBarLayout, verticalOffset) -> {
if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
((AppCompatActivity) getActivity()).getSupportActionBar().hide();
binding.smallProfileImageview.setVisibility(View.VISIBLE);
} else if (verticalOffset == 0) {
((AppCompatActivity) getActivity()).getSupportActionBar().show();
} else {
binding.smallProfileImageview.setVisibility(View.GONE);
}
}));
the xml:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
app:elevation="4dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:contentScrim="@color/black"
app:expandedTitleMarginStart="12dp"
app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="56dp">
<TextView
android:id="@+id/tagline_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="0dp"
android:layout_marginTop="12dp"
android:text="TextView"
android:textColor="@color/green_8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/subscribe_button"
app:layout_constraintTop_toBottomOf="@+id/subscribe_button" />
<TextView
android:id="@+id/posts_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:drawableRight="@drawable/hilarity_mask_unlike_white"
android:textColor="@color/green_8"
app:layout_constraintLeft_toRightOf="@+id/profile_imageview"
app:layout_constraintTop_toTopOf="@+id/profile_imageview" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="@color/green_8"
app:civ_border_color="@color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/subscriptions_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:drawableRight="@drawable/ic_hilarity_following_icon"
android:focusable="auto"
android:textColor="@color/green_8"
app:layout_constraintEnd_toStartOf="@+id/subscribers_tv"
app:layout_constraintStart_toEndOf="@+id/posts_tv"
app:layout_constraintTop_toTopOf="@+id/posts_tv" />
<TextView
android:id="@+id/subscribers_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:clickable="true"
android:drawableRight="@drawable/ic_hilarity_follower_icon"
android:focusable="auto"
android:textAppearance="@android:style/TextAppearance.Material.Small"
android:textColor="@color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/subscriptions_tv" />
<Button
android:id="@+id/subscribe_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="@drawable/button_border"
android:text="Subscribe"
android:textColor="@color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/profile_imageview"
app:layout_constraintTop_toBottomOf="@+id/subscriptions_tv" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.8">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/small_profile_imageview"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_marginStart="8dp"
android:src="@color/green_8"
android:visibility="gone"
app:civ_border_color="@color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TabLayout
android:id="@+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:visibility="visible"
app:tabGravity="fill"
app:tabIndicatorColor="@color/green_8"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/green_8"
app:tabTextColor="@color/white" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
My current knowledge of how to do a shared element transition involves situations where there is an intent, I'm not sure how to handle anything outside of that. I haven't seen anything in the documentation or online that would enable me to perform a shared element transition between sibling ViewGroups.
