Transition instead of simple Animation in Android
There is no need for animation effects on views in Android, no need for fast hardware for smooth transitions with these Transition features between activities giving your application stylish entrance.
We need two separate Activities and their layout, let say StartActivity and EndActivity. The first one will show only the app logo, and the second one will be Login form.
NOTE: We are going to use ButterKnife Library also for binding the Views from the XML, like buttons, text views, edit text etc.
ButterKnife by Jake Wharton Library with examples
StartActivity:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class StartActivity extends AppCompatActivity { @BindView(R.id.centerLogo) ImageView centerLogo; @BindView(R.id.appName) TextView appName; public static void start(Context context, ActivityOptions options) { context.startActivity(new Intent(context, StartActivity.class), options.toBundle()); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_start); ButterKnife.bind(this); } @OnClick(R.id.centerLogo) public void onLogoClick(View view) { Pair[] pairs = new Pair[2]; pairs[0] = new Pair<View, String>(centerLogo, "logo"); pairs[1] = new Pair<View, String>(appName, "appName"); ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, pairs); EndActivity.start(this, options); } } |
We have center logo ImageView and application name as TextView which will be translated into the EndActivity when user clicks on the Logo. (This may also be used as a SplashScreen).
There is one public static start method in both activities for starting each other.
Before starting next activity, a array of Pairs must be created. In our example there is two pairs that needs to be bonded, logo and app name. After binding the views, using (i strongly recommend) ButterKnife.bind method in onCreate, this views must be bonded with some king of keyword in the java code and in the xml views code. In this example we use “logo” and “app” keyword” in both the class and the layout, like android:transitionName=”appName” & android:transitionName=”logo”. The system knows how to make bond between this two views with the views in the SecondActivity also transition named after this two.
Then the Pairs are added in ActivityOptions object that we create to .makeSceneTransitionAnimation(), and the ActivityOptions object is used in the creation of the intent for starting next activitu, also with public static start method where it gets as parameters the context of the first activity and the ActivityOptions object for further processing of the transition.
EndActivity:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
public class EndActivity extends AppCompatActivity { @BindView(R.id.topLogo) ImageView topLogo; @BindView(R.id.appName) TextView appName; public static void start(Context context, ActivityOptions options) { context.startActivity(new Intent(context, EndActivity.class), options.toBundle()); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_end); ButterKnife.bind(this); } @OnClick(R.id.topLogo) public void onLogoClick(View view) { Pair[] pairs = new Pair[2]; pairs[0] = new Pair<View, String>(topLogo, "logo"); pairs[1] = new Pair<View, String>(appName, "appName"); ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, pairs); StartActivity.start(this, options); } } |
And in the end the layouts for the activities:
StartActivity layout:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context=".StartActivity"> <ImageView android:id="@+id/centerLogo" android:layout_width="150dp" android:layout_height="150dp" android:layout_centerInParent="true" android:src="@drawable/ic_logo_viktor" android:transitionName="logo" /> <TextView android:id="@+id/appName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/translation_example" android:layout_marginTop="-40dp" android:textSize="15sp" android:layout_below="@id/centerLogo" android:layout_centerHorizontal="true" android:transitionName="appName" /> </RelativeLayout> |
EndActivity layout:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context=".StartActivity"> <ImageView android:id="@+id/topLogo" android:layout_width="300dp" android:layout_height="300dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="20dp" android:src="@drawable/ic_logo_viktor" android:transitionName="logo" /> <TextView android:id="@+id/appName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/topLogo" android:layout_centerHorizontal="true" android:layout_marginTop="-50dp" android:text="@string/translation_example" android:textColor="@color/colorPrimaryDark" android:textSize="15sp" android:transitionName="appName" /> <EditText android:id="@+id/editTextOne" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@id/editTextTwo" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:hint="Username" /> <EditText android:id="@+id/editTextTwo" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@id/button" android:layout_marginBottom="30dp" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:hint="Password" /> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp" android:layout_marginEnd="16dp" android:layout_marginStart="16dp" android:text="Login" android:background="@drawable/bg_button" android:textColor="@color/white" /> </RelativeLayout> |