Rocky and Bullwinkle cross-fade app!

In my continued determination to complete the Android Developer course, I have been given yet another challenge by my instructor, which is to have two images, where one faded out, and the other faded in. This turned out to be really simple, but it did involve some Googling on my part.

What I found was two entirely different approaches to this. Again, the power of object oriented language is that there is really more than one was to skin the proverbial cat, or Android, in this case.

The first method, which is the method my instructor used (after completing the challenge, he shows how he would do it). That method was to have two images overlay each-other, and set the alpha to 0 and 1 (o% and 100% visibility) and have them change with the animation command.

The second method, which is what I found first, was to have an xml file that referenced both drawings and have them change with the transitiondrawable command.

For fun, I asked Rocky and Bullwinkle to help me put both together in one app, so you can see how each works. You can download the app here:

http://www.mediafire.com/file/787eb04013pxzvg/crossfade.apk

And here is the code:

mainactivity.java

package com.alaskalinuxuser.crossfade;

import android.graphics.drawable.TransitionDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.*;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

    public void crossFade (View view){

        ImageView picture = (ImageView) findViewById(R.id.imageView);
        TransitionDrawable drawable = (TransitionDrawable) picture.getDrawable();
        drawable.startTransition(1500);


    }

    public void doubleTrouble (View myView){

        ImageView firstPic = (ImageView) findViewById(R.id.imageView2);
        ImageView secondPic = (ImageView) findViewById(R.id.imageView3);

        firstPic.setAlpha(0f);
        secondPic.setAlpha(1f);

        firstPic.animate().alpha(1f).setDuration(1500);
        secondPic.animate().alpha(0f).setDuration(1500);
    }

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

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.alaskalinuxuser.crossfade.MainActivity">

    <ImageView
        android:layout_width="200sp"
        android:layout_height="200sp"
        app:srcCompat="@drawable/transition"
        android:id="@+id/imageView"
        android:onClick="crossFade"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageView
        android:layout_width="200sp"
        android:layout_height="200sp"
        app:srcCompat="@drawable/rocky"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/imageView2" />

    <ImageView
        android:layout_width="200sp"
        android:layout_height="200sp"
        app:srcCompat="@drawable/bull"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/imageView3"
        android:onClick="doubleTrouble" />
</RelativeLayout>

transitions.xml

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

They seem to have the same ultimate affect, but I see the plus to the transition.xml file, because I could add many more possible transitions in an easy method.

Linux – keep it simple.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s