Chaining images in a google glass app

Question

I have an interesting question regarding the google glass! So, I am currently trying to make an application where, if I swipe right, it changes the image of the card I am on with a different one. I have looked everywhere and I just cannot find how to do this. Much thanks for helping me to figure this one out and whether or not it is even possible!

Answer 1

This is certainly doable. All you will need is a layout called main_layout.xml with an ImageView in it, and an activity called MainActivity.java with a GestureDetector in it to track when you slide and a list of Images that you want to cycle through.

So first, create an xml file called main_layout.xml and put an ImageView in it, setting the layout_width="match_parent and layout_height="match_parent":

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/displayImageView" />
</LinearLayout>

That will hold and display our images. Then create an activity called MainActivity.java. Make sure that you add it to your AndroidManifest.xml file, like this:

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:screenOrientation="landscape"
    android:theme="@android:style/Theme.DeviceDefault.Wallpaper.NoTitleBar"
    android:windowSoftInputMode="stateHidden" >
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
        <action android:name="com.google.android.glass.action.VOICE_TRIGGER" />
    </intent-filter>
</activity>

Once you have your activity, you're going to need to create a GestureDetector to detect the slides. We're going to create a method that will generate the GestureDetector for us. It looks complicated, but it is really just overriding all of the parts of the GestureDetector:

private GestureDetector createGestureDetector(Context context) {
    GestureDetector gestureDetectorTemp = new GestureDetector(context, new GestureDetector.OnGestureListener() {
                        //we are creating our gesture detector here
        @Override
        public boolean onDown(MotionEvent motionEvent) {

            return false;
        }

        @Override
        public void onShowPress(MotionEvent motionEvent) {

        }

        @Override
        public boolean onSingleTapUp(MotionEvent motionEvent) {
            return false;
        }
        @Override
        public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent2, float distanceX, float distanceY) {
            return false;
        }
        @Override
        public void onLongPress(MotionEvent motionEvent) {
        }

        @Override
        public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent2, float v, float v2) { //fling = a single slide
            int dx = (int) (motionEvent2.getX() - motionEvent.getX());   //figure out the distance moved horizontally
            int dy = (int) (motionEvent2.getY() - motionEvent.getY());   //figure out the distance moved vertically

            if(Math.abs(dx) > 100) 

            if (dx < -100) { //move to the right.
                updateImage(true);
            } else if (dx > 100) { //move to the left
                updateImage(false);
            }
            return true;
        }
    });

    return gestureDetectorTemp;
}
@Override
public boolean onGenericMotionEvent(MotionEvent event) {
    if (gestureDetector != null) {
        return gestureDetector.onTouchEvent(event);
    }
    return false;
}

The important thing to note here is that you have to return true or false for most of these methods. Return true if you've consumed the event, meaning that you don't want to notify other default methods of the event and that you've handled it the way you want to. Return false if you want the default actions to happen as usual. The second function passes all MotionEvents, like swipes or taps, through the GestureDetector first. Make sure that you have the correct import at the top for the second method to be recognized:

import android.view.MotionEvent;

Now we have two issues left. First of all, we need to create the gestureDetector. This is done simply in the onCreate() method, with the GestureDetector as a global variable. In the process, we're also going to create our ArrayList of drawable ids to update the image, along with a variable to keep track of the current index, and of course the ImageView that we are going to be updating:

public class MainActivity extends Activity {

    private GestureDetector gestureDetector;
    private ArrayList<Integer> drawableIdList = new ArrayList<Integer>();
    private int currentDrawableIndex = 0;
    private ImageView displayImageView;

    @Override
    protected void onCreate(Bundle bundle) {
        super.onCreate(bundle);
        setContentView(R.layout.main_activity);

        displayImageView = (ImageView) findViewById(R.id.displayImageView);

        gestureDetector = createGestureDetector(this);

        drawableIdList.add(R.drawable.name_of_drawable_1);
        drawableIdList.add(R.drawable.name_of_drawable_2);
        drawableIdList.add(R.drawable.name_of_drawable_3);
        drawableIdList.add(R.drawable.name_of_drawable_4);
        drawableIdList.add(R.drawable.name_of_drawable_5);

        displayImageView.setImageResource(drawableIdList.get(currentDrawableIndex);

    }

...

}

This leaves the final step to get a fully working application - adding the updateImage() method that is getting called when we swipe. We will simply add 1 to the index if true is passed in, subtract 1 if false is passed in, and then check to make sure that the number isn't bigger than the array or in the negatives, then update the ImageView to the correct image:

private void updateImage(boolean direction) {
    if(direction) {
        currentDrawableIndex++;
    } else {
        currentDrawableIndex--;
    }
    if(currentDrawableIndex > (drawableIdList.size() - 1)) {
       currentDrawableIndex = 0;
    }
    if(currentDrawableIndex < 0) {
        currentDrawableIndex = (drawableIdList.size() - 1);
    }
    displayImageView.setImageResource(drawableIdList.get(currentDrawableIndex);
}

And that's it. Those are all of the parts. All you need to do is put them together as I've described. Once you do, the image on the Glass will cycle when you swipe right or left.