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"?-->

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


5. Download this 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 and paste below code. This model class represents single card item in CardScrollView.

package info.androidhive.cardscrollview.model;


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 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;


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;

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

	public int getCount() {
		return mCards.size();

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

	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 footer note
		if (mc.getFooterText() != null)

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

		return card.getView();



9. Open your main activity class 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.content.Context;
import android.os.Bundle;


public class MainActivity extends Activity {

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

	protected void onCreate(Bundle savedInstanceState) {

		context = this;


		mCardScrollView = new CardScrollView(this);
		MovieCardsAdapter adapter = new MovieCardsAdapter(context, mCards);

	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[] {});

		// 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 });

		// 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_right, R.drawable.card_top });

		// 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_right, R.drawable.card_top });


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=""
    android:versionName="1.0" >

        android:targetSdkVersion="19" />
    <uses-permission android:name="" />

        android:label="@string/app_name" >
            android:label="@string/app_name" >
                <action android:name="" />

                android:resource="@xml/voice_trigger_start" />


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.

Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk:
  • Ralfh

    Thanks for this!

  • Janakiram Jani


    I did same thing but i am getting error like this……..

    Android Launch!

    [2015-06-12 17:49:16 – CardScrollView] Dx

    trouble writing output: already prepared

    [2015-06-12 17:49:20 – CardScrollView] ——————————

    [2015-06-12 17:49:20 – CardScrollView] Android Launch!

    [2015-06-12 17:49:20 – CardScrollView] adb is running normally.

    [2015-06-12 17:49:20 – CardScrollView] No Launcher activity found!

    [2015-06-12 17:49:20 – CardScrollView] The launch will only sync the application package on the device!

    [2015-06-12 17:49:20 – CardScrollView] Performing sync

    [2015-06-12 17:49:20 – CardScrollView] Automatic Target Mode: Unable to detect device compatibility. Please select a target device.

    [2015-06-12 17:49:22 – CardScrollView] Uploading CardScrollView.apk onto device ‘ECAZFG204539’

    [2015-06-12 17:49:22 – CardScrollView] Installing CardScrollView.apk…

    [2015-06-12 17:49:27 – CardScrollView] Success!

    [2015-06-12 17:49:27 – CardScrollView] CardScrollViewbinCardScrollView.apk installed on device

    [2015-06-12 17:49:27 – CardScrollView] Done!

  • Ahmed

    Nice tutorial

  • deepti

    hello Mr Ravi
    I wanted to know about imagelayout .Coz widget like ImageLayout dose not exists in android..