Posted by on 13th December 2018

Transitions between activities and fragments in Android involved animating the entire view hierarchy. However, with Material Design, it is now easier to animate selected Views during a transition to emphasize continuity, and guide users to content in the target Activity/Fragment.

Shared elements in Activities

In the sample project, available on github, we implement two activities, StartActivity and EndActivity.
The StartActivity has an ImageView, a Button and a TextView

activity_start.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ic_logo_appsfeature"
        android:transitionName="@string/activity_logo_trans"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView"
        android:text="Simple TextView"
        android:textSize="20sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:text="Click Me"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:onClick="onClick"/>

</RelativeLayout>

The EndActivity has two ImageViews and an EditText

activity_end.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:src="@drawable/ic_logo_appsfeature"
        android:transitionName="@string/activity_logo_trans"/>

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:hint="An EditText"
        android:textSize="24sp"/>

    <ImageView
        android:id="@+id/smallerImageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/imageView"
        android:layout_alignBottom="@id/imageView"
        android:layout_alignParentStart="true"
        android:layout_alignParentLeft="true"
        android:tint="@color/colorPrimary"
        android:src="@drawable/ic_logo_appsfeature"/>

</RelativeLayout>
Please follow and like us:

Comments

Be the first to comment.

Leave a Reply


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*


Enjoy this blog? Please spread the word :)