Tutorial details

Android beginner tutorial: Part 88 - TransitionDrawable | App Code for Sale | Preview

Android beginner tutorial: Part 88 - TransitionDrawable | Android Tutorial

How to use the TransitionDrawable class, which lets us display a smooth cross-fade effect between two pictures

Overview PAGE TOP

In this tutorial we will take a look at the TransitionDrawable class, which lets us display a smooth cross-fade effect between two pictures.

Firstly, we'll need to add 2 pictures to the drawable directory of the project. In my case, they are sample1.jpg and sample2.jpg, and I put both of them in res/drawable-hdpi/ directory.

Add an xml file in the same directory, call it transition.xml. Here we will add a transition node with 2 item nodes inside, each representing an image:

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/sample1"/>
    <item android:drawable="@drawable/sample2"/>
</transition>

Now go to activity_main.xml layout file. Add an ImageView, set its source to the first image:

<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/sample1"
        />

</LinearLayout>

When that's done, go to MainActivity.java class.

Declare 2 variables - instances of ImageView and TransitionDrawable.

private ImageView image;
private TransitionDrawable trans;

In the onCreate() function of the Activity, set the image value to the ImageView we declared in activity_main.xml. Set trans value to the transition resource we created in the drawable directory:

image = (ImageView)findViewById(R.id.image);
Resources res = this.getResources();
trans = (TransitionDrawable)res.getDrawable(R.drawable.transition);

Now add a click listener to the ImageView object. In the event of a click, use the setImageDrawable() method to apply the transition resource to the image.

Then we call the reverseTransition() method of the transition, passing 1000 as the parameter, which is the effect time.

image.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
image.setImageDrawable(trans);
trans.reverseTransition(1000);
}
});

Instead of reverseTransition(), you can call startTransition(), which always starts with the first layer fading out and the second layer fading it. The reverseTransition() method handles the transition both ways.

Full code:

package com.example.codeforfoodtest_two;

import android.app.Activity;
import android.content.res.Resources;
import android.graphics.drawable.TransitionDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;

public class MainActivity extends Activity{

private ImageView image;
private TransitionDrawable trans;

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

image = (ImageView)findViewById(R.id.image);
Resources res = this.getResources();
trans = (TransitionDrawable)res.getDrawable(R.drawable.transition);

image.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
image.setImageDrawable(trans);
trans.reverseTransition(1000);
}
});
}
}

If you run your application now, you'll see that tapping the image smoothly changes the displayed image.

Thanks for reading!

Reference PAGE TOP

http://kirill-poletaev.blogspot.it/2013/02/android-beginner-tutorial-part-88.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.