The following is the first few sections of a chapter from The Busy Coder's Guide to Android Development, plus headings for the remaining major sections, to give you an idea about the content of the chapter.


Widget Catalog: StackView

StackView is an AdapterView. Whereas ListView uses a horizontal scrolling list as its UI metaphor, StackView uses a stack of cards as its metaphor. Just as ListView shows a handful of rows, StackView shows a handful of cards. These cards can be swiped away via a swipe towards the southwest corner of the screen. The top card is fully visible; the edges of a few other cards can be seen but are otherwise obscured by cards “higher in the stack”.

While certainly usable in activities and fragments, StackView was introduced in support of app widgets. App widgets like bookmarks, Google Books covers, and the like use StackView to show an item and allow users to navigate to the rest of the items by flipping these virtual cards.

Key Usage Tips

Generally speaking, working with StackView is not significantly different than is working with any other AdapterView. You create an Adapter defining the contents (in this case, defining the cards), you attach the Adapter to the StackView, and put the StackView somewhere on the screen.

As the cards overlap, however, transparency becomes an issue. If the top card is not completely opaque, you will see the card beneath it “peeking through” as its contents are blended in via the alpha channel. In some cases, this is a perfectly desirable outcome. However, if that is not what you want, make sure that the backgrounds of your overall container for the card’s contents (e.g., a RelativeLayout) has an opaque background, such as a color with FF for the alpha value.

Also, since the objective is to have the children be visually stacked, the children cannot be the size of the StackView itself (e.g., the children cannot use match_parent for a dimension). StackView seems to work best with children that have explicit sizes (e.g., values in dp).

A Sample Usage

The sample project can be found in WidgetCatalog/StackView.

Activity Layout:

<?xml version="1.0" encoding="utf-8"?>
<StackView xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/details"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

Item Layout:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#FFFF0000"
  android:gravity="center"
  android:textAppearance="?android:attr/textAppearanceLarge"/>

Activity:

package com.commonsware.android.wc.stack;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.StackView;

public class MainActivity extends Activity {
  static String[] items= { "lorem", "ipsum", "dolor", "sit", "amet",
      "consectetuer", "adipiscing", "elit", "morbi", "vel", "ligula",
      "vitae", "arcu", "aliquet", "mollis", "etiam", "vel", "erat",
      "placerat", "ante", "porttitor", "sodales", "pellentesque",
      "augue", "purus" };
  StackView stack;

  @Override
  public void onCreate(Bundle state) {
    super.onCreate(state);
    setContentView(R.layout.main);

    stack=(StackView)findViewById(R.id.details);
    stack.setAdapter(new ItemAdapter(this, R.layout.item, items));
  }

  private static class ItemAdapter extends ArrayAdapter<String> {
    public ItemAdapter(Context context, int textViewResourceId,
                       String[] objects) {
      super(context, textViewResourceId, objects);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
      View result=super.getView(position, convertView, parent);

      result.setBackgroundColor(0xFF330000 + (position * 0x0A0A));

      return(result);
    }
  }
}

Visual Representation

The preview of this section apparently resembled a Pokémon.