CODEWITHSUNDEEP
androidandroid-fragmentsmaterial-design
Diolor
Diolor

Reputation: 13450

Android Material design transitions

I want to replicate the transitions as explained in Material design by Google. This is the link for the preview, but basically the videos I care about are those two:

  1. http://material-design.storage.googleapis.com/videos/animations-meaningfultransitions-hierarchical_transitions_topLevel_large_xhdpi.webm
  2. http://material-design.storage.googleapis.com/videos/animation-meaningfultransitions-view_contact_large_xhdpi.webm

My question is what is the container of the UI? Is this a new Activity which onCreate has animations for each element or is it a fragment?

In particular on the second example there is some movement on the 1st Activity so inside the onClick is there an animation which also creates a 2nd activity? (note that the clicked name also moves, so this should not be a new activity)

In other words what the layout (+Activities, fragments) should be if I want to replicate this?

Upvotes: 29

Views: 24949

Answers (4)

Inoy
Inoy

Reputation: 1075

This one have transitions.

Hope you'll extract transitions from there.

Guide - http://antonioleiva.com/material-design-everywhere/
Code - https://github.com/antoniolg/MaterialEverywhere

Upvotes: 5

sagus_helgy
sagus_helgy

Reputation: 1437

Maybe too late but I have found support library contains ActivityOptionsCompat: https://developer.android.com/reference/android/support/v4/app/package-summary.html
It contains activity animations like scale up animations. Hope this helps.

Upvotes: 8

manju h
manju h

Reputation: 141

Step 1:Consider that you are moving from one activity to other.So define onclick method for button

   button= (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(getApplicationContext(), Animation.class);
               startActivity(intent, options.toBundle());
                    startActivity(intent);
               overridePendingTransition  (R.anim.right_slide_in, R.anim.right_slide_out);
            }
        });

Step 2:Now define the animation that you need for the second activity while launching

anim.right_slide_in

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0"
        android:duration="700"
        />
</set>

Upvotes: 0

matiash
matiash

Reputation: 55350

I guess they could be implemented with fragments but I might suspect they would be separate activities. Android L introduces Activity Transitions as part of the Animation framework. In particular, there transitions can contain shared UI elements, which indicate mappings between "corresponding" views in the caller and called activities. The transition is then included as part of the ActivityOptions object passed to startActivity().

The idea is to achieve the visual effect in those videos (i.e. of particular views changing positions or dimensions as part of an activity transition). The canonical example would be a Gallery app, when transitioning from the grid that shows all images to displaying a particular one.

This could be achieved before (please check this answer or this DevBytes video by Chet Haase) but it was rather complex/hacky so it was included as a standard resource in Android L.

Check the documentation for Activity Transitions in the L preview documentation, or the ActivitySceneTransitionBasic included as part of the android-L samples (also remember that you can download the L reference preview from here to get the documentation for the new methods).

Upvotes: 4

Related Questions