AlaskaLinuxUser's Scratchpad

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.