Code for Taylor Ling's UI ANIMATION IN PHOTOSHOP – TUTORIAL #1

README.md

It is a simple gist to realize the UI ANIMATION IN PHOTOSHOP – TUTORIAL #1 provided by Taylor Ling .

Due to shadow and Z-animation, this code can work only on L-devices.

activity_taylor.xml

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#F3F3F3">

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:orientation="vertical"

        tools:context=".TaylorActivity">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center_vertical"
            android:text="Move form one point to another point"
            android:textSize="@dimen/text_size"/>

        <ImageButton
            android:layout_marginTop="@dimen/top_margin"
            android:id="@+id/fab_move"
            style="@style/fabButton.Move"
            />

        <TextView
            android:layout_marginTop="@dimen/top_margin"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center_vertical"
            android:text="Move and fade out"
            android:textSize="@dimen/text_size"/>

        <ImageButton
            android:layout_marginTop="@dimen/top_margin"
            android:id="@+id/fab_movefade"
            style="@style/fabButton.Fade"
            />

        <TextView
            android:layout_marginTop="@dimen/top_margin"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center_vertical"
            android:text="Scale"
            android:textSize="@dimen/text_size"/>

        <ImageButton
            android:layout_marginTop="@dimen/top_margin"
            android:id="@+id/fab_scale"
            style="@style/fabButton.Scale"
            />

        <TextView
            android:layout_marginTop="@dimen/top_margin"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:gravity="center_vertical"
            android:text="Style Change"
            android:textSize="@dimen/text_size"/>

        <LinearLayout
            android:layout_marginTop="@dimen/top_margin"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            >

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageButton
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/fab1"
                    style="@style/fabButton.z"
                    android:elevation="1dp"
                    />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageButton
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/fab2"
                    style="@style/fabButton.z"
                    android:elevation="1dp"
                    />
            </FrameLayout>


            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageButton
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/fab3"
                    style="@style/fabButton.z"
                    android:elevation="1dp"
                    />
            </FrameLayout>


            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1">

                <ImageButton
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/fab4"
                    style="@style/fabButton.z"
                    android:elevation="1dp"
                    />
            </FrameLayout>



        </LinearLayout>


    </LinearLayout>

</ScrollView>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_size">48dp</dimen>

    <dimen name="top_margin">8dp</dimen>
    <dimen name="text_size">14sp</dimen>
</resources>

ripplefade.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white">
    <item>
        <shape android:shape="oval">
            <solid android:color="#2979FF" />
        </shape>
    </item>
</ripple>

ripplemove.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white">
    <item>
        <shape android:shape="oval">
            <solid android:color="#F50057" />
        </shape>
    </item>
</ripple>

ripplescale.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="@android:color/white">
    <item>
        <shape android:shape="oval">
            <solid android:color="#1DE9B6" />
        </shape>
    </item>
</ripple>

ripplez.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
</ripple>

styles.xml

<resources>

    <style name="fabButton">
        <item name="android:layout_width">@dimen/fab_size</item>
        <item name="android:layout_height">@dimen/fab_size</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="fabButton.Move">
        <item name="android:background">@drawable/ripplemove</item>
    </style>

    <style name="fabButton.Fade">
        <item name="android:background">@drawable/ripplefade</item>
    </style>

    <style name="fabButton.Scale">
        <item name="android:background">@drawable/ripplescale</item>
    </style>

    <style name="fabButton.z">
        <item name="android:background">@drawable/ripplez</item>
    </style>

</resources>

TaylorActivity1.java

public class TaylorActivity extends Activity {

    ImageButton b1;
    ImageButton b2;
    ImageButton b3;
    ImageButton b4;

    ImageButton move;
    ImageButton fade;
    ImageButton scale;

    private float width;
    private float move_x;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_taylor);

        //Get all ui elements
        final View view = findViewById(R.id.container);
        move = (ImageButton)findViewById(R.id.fab_move);
        fade = (ImageButton)findViewById(R.id.fab_movefade);
        scale = (ImageButton)findViewById(R.id.fab_scale);
        b1 = (ImageButton)findViewById(R.id.fab1);
        b2 = (ImageButton)findViewById(R.id.fab2);
        b3 = (ImageButton)findViewById(R.id.fab3);
        b4 = (ImageButton)findViewById(R.id.fab4);

        //set a layout listener to retrieve all dimensions
        final ViewTreeObserver obs = view.getViewTreeObserver();
        obs.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                width = view.getWidth() - view.getPaddingRight(); //container width - container right padding
                move_x = move.getX() + move.getWidth();  //button x.position + button width
            }
        });


        //Outline for elevation
        int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        Outline outline = new Outline();
        outline.setOval(0, 0, size, size);
        b1.setOutline(outline);
        b1.setClipToOutline(true);
        b2.setOutline(outline);
        b2.setClipToOutline(true);
        b3.setOutline(outline);
        b3.setClipToOutline(true);
        b4.setOutline(outline);
        b4.setClipToOutline(true);

    }

    /**
     * Provide the animations
     */
    private void startAnimation(){

        int duration = 2500; //animation duration

        //Move
        move.animate().setDuration(duration).translationX(width-move_x).start();

        //Move and fade out
        fade.animate().setDuration(duration).translationX(width-move_x).alpha(0).start();

        //Move and scale
        scale.animate().setDuration(duration).translationX(width-move_x).scaleX(0.2f).scaleY(0.2f).start();

        //Animate Z-values
        b2.animate().setDuration(duration/4*2).translationZ(4).start();
        b3.animate().setDuration(duration/4*3).translationZ(6).start();
        b4.animate().setDuration(duration).translationZ(8).start();

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.taylor, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_animate) {
            startAnimation();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

values-sw600dp-dimens.xml

<resources>
    <!-- Example customization of dimensions originally defined in res/values/dimens.xml
         (such as screen margins) for screens with more than 820dp of available width. This
         would include 7" and 10" devices in landscape (~960dp and ~1280dp respectively). -->
    <dimen name="activity_horizontal_margin">56dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="top_margin">16dp</dimen>
    <dimen name="text_size">20sp</dimen>

</resources>