Android has support for different Drawable resources. One of them is TransitionDrawable.
As name itself explains that it will transit between different images. TransitionDrawable is actually an extension of LayerDrawable, so rather to say it will transit between different images, we can say it will transit between layers.
TransitionDrawable supports transition between only two layers.
Start by creating new Android Project.
Add a layout named transition_layout.xml with one imageview for which we will set this TransitionDrawable.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/transition_root"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:gravity="center" ><ImageViewandroid:id="@+id/transition_img"android:layout_width="match_parent"android:layout_height="match_parent"android:src="@drawable/translate" /> </LinearLayout>
Add any two images, i have used ic_star_black_24dp.png and ic_star_border_black_24dp.png from material design icon library.
Why Mobile App Security is Important for Developers and Businesses?
However, some of the mobile apps even require you to add some other necessary details like information related to the ID proofs, banking data, house address etc.
Now for creating Transition Drawable create an transition_drawable.xml in /res/drawables folder
<?xml version="1.0" encoding="UTF-8"?><transition xmlns:android="http://schemas.android.com/apk/res/android" ><item android:drawable="@drawable/ic_star_black"/><item android:drawable="@drawable/ic_star_outline_black"/></transition>
Here each item tag in transition_drawable.xml represents one layer.
Inside your MainActivity.java set transition_layout.xml as your contentview and create instance of and initialize imageview
For setting up TransitionDrawable in onCreate() method,
Resources res = getApplicationContext().getResources();
TransitionDrawable transition;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
transition = (TransitionDrawable) res.getDrawable(R.drawable.translate, null);
}else{
transition = (TransitionDrawable) res.getDrawable(R.drawable.translate);
}
mImgView.setImageDrawable(transition);
transition.setCrossFadeEnabled(true);
transition.startTransition(5000);
So your complete MainActivity.java will look like
import android.annotation.SuppressLint;import android.app.Activity;import android.content.res.Resources;import android.graphics.drawable.TransitionDrawable;import android.os.Build;import android.os.Bundle;import android.widget.ImageView;import android.widget.LinearLayout;public class MainActivity extends Activity {ImageView mImgView;@SuppressWarnings("deprecation")@SuppressLint("NewApi")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.transition_layout);mImgView = (ImageView)findViewById(R.id.transition_img);Resources res = getApplicationContext().getResources();TransitionDrawable transition;if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){transition = (TransitionDrawable) res.getDrawable(R.drawable.transition_drawable, null);}else{transition = (TransitionDrawable) res.getDrawable(R.drawable.transition_drawable);}mImgView.setImageDrawable(transition);transition.setCrossFadeEnabled(true);transition.startTransition(5000);}}
Now run the code and see the fading.
If you want to implement color transition instead of using two png images you can create two shape drawables with different colors and in your transition_drawable.xml apply references to this two shape drawables.
This Android tutorial is the basic explanation of TransitionDrawables. All examples explained above is developed by highly experienced android app development team at Nex Mobility.
In our next article, you will learn about Continuous TransitionDrawables by android app development team.
Happy Coding…