Search
Sunday 8 December 2019
  • :
  • :

How To Implement TransitionDrawable in Android? – Part 1

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.

Android App Development

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" >
<ImageView
      android: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.

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")
            @Override
            protected 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…



Vijay is a compulsive blogger who likes to educate like-minded people on various new technologies and trends. He works with Aegis SoftTech as a software developer and has been developing software for years. Stay Connected to him on Facebook and Google+.