Google Glass CardScrollView Example

Google Glass CardScrollView is similar to ListView that we see in android mobile. On glass you can consider each list item as a Card Item which occupies fullscreen of the glass. CardScrollView allows us to swipe through the cards either from left to right, or vice versa.

This tutorial explains how to implement CardScrollView with a custom adapter class.

google glass card scroll view adapter


google glass card scroll view adapter

Creating New Glass Project

1. In Eclipse go to File ⇒ New ⇒ Android Application Project and give application name, project name and package.

2. Set Minimum Required SDK and Target SDK to API 19: Android 4.4 (KitKat), Compile With to Glass Development Kit Sneak Peek (Google Inc.) (API19) and select the Theme to None

3. Once the project is created, open AndroidManifest.xml file and remove the theme android:theme property to allow glass to apply it’s own theme.

4. Open strings.xml and add below string values.

<!--?xml version="1.0" encoding="utf-8"?-->
<resources>

    <string name="app_name">Card ScrollView</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    
    <!-- "ok glass" voice command -->
    <string name="start_command">Movie Cards</string>

</resources>

5. Download this drawable.zip and paste the contents in project’s res ⇒ drawable folder. This downloaded folder contains card images required for this project.

6. Create two packages named model and adapter in your project.

7. Under model package, create a new class named MovieCard.java and paste below code. This model class represents single card item in CardScrollView.

package info.androidhive.cardscrollview.model;

import com.google.android.glass.app.Card.ImageLayout;

public class MovieCard {

	private String text;
	private String footerText;
	private ImageLayout imgLayout;
	private int[] images;

	public MovieCard() {
	}

	public MovieCard(String text, String footerText,
			ImageLayout imgLayout, int[] images) {		
		this.text = text;
		this.footerText = footerText;
		this.imgLayout = imgLayout;
		this.images = images;
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getFooterText() {
		return footerText;
	}

	public void setFooterText(String footerText) {
		this.footerText = footerText;
	}

	public ImageLayout getImgLayout() {
		return imgLayout;
	}

	public void setImgLayout(ImageLayout imgLayout) {
		this.imgLayout = imgLayout;
	}

	public int[] getImages() {
		return images;
	}

	public void setImages(int[] images) {
		this.images = images;
	}

}

8. Now under adapter package, create a class named MovieCardsAdapter.java. This is the custom adapter class which provides data to cardscrollview.

package info.androidhive.cardscrollview.adapter;

import info.androidhive.cardscrollview.model.MovieCard;

import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;

import com.google.android.glass.app.Card;
import com.google.android.glass.widget.CardScrollAdapter;

public class MovieCardsAdapter extends CardScrollAdapter {
	private List<moviecard> mCards;
	private Context context;

	public MovieCardsAdapter(Context context, List<moviecard> mCards) {
		this.context = context;
		this.mCards = mCards;
	}

	@Override
	public int getPosition(Object item) {
		return mCards.indexOf(item);
	}

	@Override
	public int getCount() {
		return mCards.size();
	}

	@Override
	public Object getItem(int position) {
		return mCards.get(position);
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		Card card = new Card(context);

		MovieCard mc = mCards.get(position);
		
		// Card text
		if (mc.getText() != null)
			card.setText(mc.getText());

		// Card footer note
		if (mc.getFooterText() != null)
			card.setFootnote(mc.getFooterText());

		// Set image layout
		if (mc.getImgLayout() != null)
			card.setImageLayout(mc.getImgLayout());
		
		// loop and set card images
		for(int img : mc.getImages()){
			card.addImage(img);
		}

		return card.getView();
	}

	

}

9. Open your main activity class MainActivity.java and do the below changes. In this activity we are adding the card items in prepareMovieCards() method.

package info.androidhive.cardscrollview;

import info.androidhive.cardscrollview.R;
import info.androidhive.cardscrollview.adapter.MovieCardsAdapter;
import info.androidhive.cardscrollview.model.MovieCard;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;

import com.google.android.glass.app.Card.ImageLayout;
import com.google.android.glass.widget.CardScrollView;

public class MainActivity extends Activity {

	private List<moviecard> mCards;
	private CardScrollView mCardScrollView;
	private Context context;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);

		context = this;

		prepareMovieCards();

		mCardScrollView = new CardScrollView(this);
		MovieCardsAdapter adapter = new MovieCardsAdapter(context, mCards);
		mCardScrollView.setAdapter(adapter);
		mCardScrollView.activate();
		setContentView(mCardScrollView);
	}

	private void prepareMovieCards() {
		mCards = new ArrayList<moviecard>();

		// Card with no background image
		MovieCard mc = new MovieCard("I don't know. But who cares! Ha ha!",
				"Wait! What does that mean?", ImageLayout.FULL, new int[] {});
		mCards.add(mc);

		// Card with full background image
		mc = new MovieCard("I wanna go home. Does anyone know where my dad is?",
				"Pet store?", ImageLayout.FULL,
				new int[] { R.drawable.card_full });
		mCards.add(mc);

		// Card with full background of 3 images
		mc = new MovieCard("Dude? Dude? Focus dude... Dude?",
				"Oh, he lives. Hey, dude!", ImageLayout.FULL, new int[] {
						R.drawable.card_bottom_left,
						R.drawable.card_bottom_right, R.drawable.card_top });
		mCards.add(mc);

		// Card with left aligned images
		mc = new MovieCard("Just keep swimming.",
				"I'm sorry, Dory. But I... do", ImageLayout.LEFT, new int[] {
						R.drawable.card_bottom_left,
						R.drawable.card_bottom_right, R.drawable.card_top });
		mCards.add(mc);

	}
}

10. Before the running the app, add the app to Ok Glass menu by doing following changes. Create a folder named xml under res folder.

11. Under xml folder, create an xml file named voice_trigger_start.xml and add below content.

<!--?xml version="1.0" encoding="utf-8"?-->
<trigger keyword="@string/start_command">

12. Finally open the AndroidManifest.xml and add the voice related actions to launch the app by voice command.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="info.androidhive.cardscrollview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="19"
        android:targetSdkVersion="19" />
    
    <uses-permission android:name="com.google.android.glass.permission.DEVELOPMENT" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/app_icon"
        android:label="@string/app_name" >
        <activity
            android:name="info.androidhive.cardscrollview.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="com.google.android.glass.action.VOICE_TRIGGER" />
            </intent-filter>

            <meta-data
                android:name="com.google.android.glass.VoiceTrigger"
                android:resource="@xml/voice_trigger_start" />
        </activity>
    </application>

</manifest>

Now run the app and say “Ok Glass Movie Cards” to launch the app. Once the app is launched, you can see the CardScrollView with beautiful images as shown in the above top demo.

Ravi is hardcore Android programmer and Android programming has been his passion since he compiled his first hello-world program. Solving real problems of Android developers through tutorials has always been interesting part for him.