AlaskaLinuxUser's Scratchpad

So I enlisted the help of Borris and Natasha to chase down Rocky and Bullwinkle in my supped up app from the last post: Crossfade.

Here is the latest version:

http://www.mediafire.com/file/c966u578x0h1x7a/crossfade_1_1.apk

If you downloaded this app last time, you saw two different methods to transition, or fade out one image, and fade in a different one. Today, we are taking this to a whole new level! Not only do you have an image transition, but you also have a spinning image, an image that grows, and two images that move off and onto the screen. Check out my comments in the code if you want to see what I did.

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:onClick="spinner"
        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" />

    <ImageView
        android:layout_width="45sp"
        android:layout_height="45sp"
        app:srcCompat="@drawable/badguys"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:onClick="sizeMe"
        android:id="@+id/imageView4" />
</RelativeLayout>

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){

        /* First things first, transition between all of the
        * images in the tansition.xml file. In this case, there
        * are only two.
        */
        // Define the image view that is used
        ImageView picture = (ImageView) findViewById(R.id.imageView);
        // Call the transition
        TransitionDrawable drawable = (TransitionDrawable) picture.getDrawable();
        // Give it a time period
        drawable.startTransition(1500);


    }

    public void doubleTrouble (View myView){

        /* Now we will have one image slide off the screen
        * and another image slide into it's place. Note that one
        * of the images is offscreen in the on create methode below.
        */
        // Define the image views to use.
        ImageView firstPic = (ImageView) findViewById(R.id.imageView2);
        ImageView secondPic = (ImageView) findViewById(R.id.imageView3);
        // Set the alpha (not really needed here, was used in other exercises.
        // Used here to make them "dimmer" at half brightness.
        firstPic.setAlpha(0.5f);
        secondPic.setAlpha(0.5f);
        // Call the translation (movement) and set the duration.
        firstPic.animate().translationXBy(-1000f).setDuration(1500);
        secondPic.animate().translationXBy(-1000f).setDuration(1500);
    }

    public void spinner (View aView){
        // A simple trick to spin the image.
        // Define the image view to use.
        ImageView firstPic = (ImageView) findViewById(R.id.imageView2);
        // Rotate the image this many degrees in this much time.
        firstPic.animate().rotation(360f).setDuration(1500);

    }

    public void sizeMe (View badView){
        // A simple trick to "grow" an image.
        // Define the image view to use.
        ImageView borris = (ImageView) findViewById(R.id.imageView4);
        // Tell that image to animate to be twice it's size.
        borris.animate().scaleX(2.0f).scaleY(2.0f).setDuration(1500);

    }

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

        // Note that this image view is set off screen from the app start.
        // Define the image view to use.
        ImageView firstPic = (ImageView) findViewById(R.id.imageView2);
        // Set that view off screen.
        firstPic.setTranslationX(1000f);
    }
}

transition.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>

Hopefully that not only makes sense, but might help you move objects around the screen. This Android Developer Course is really well done. I highly recommend it.

Linux – keep it simple.