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.