Android StackView Example

What is StackView?

The Honeycomb Android version, introduced some interesting widgets with collections. One of them is the Android StackView. StackView helps in arranging items in the form of stacked cards, where the front item can be flipped to bring the item behind it to the front.

Here, you will learn to stack images with text  in the StackView. So create a new Android project called StackView.

Get GITHUB code from Here.

Creating New Project

  1. In Android Studio, go to File New Project and fill all the details required to create a new project. When it prompts to select a default activity, select Blank Activity and proceed.

  2. In  activity_main.xml i have add  one StackView with following basic properties.

activity_main.xml



    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.lenovo.stackview.MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:text="stackview"
        android:textAllCaps="true"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="25sp"
        android:textStyle="bold" />

    <StackView
        android:id="@+id/stackview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/textview"
        android:animateLayoutChanges="true">

    

The value of the android:animateLayoutChanges attribute is set to true so that changes occurring in the layout will not mandate running LayoutTransition.

Writing the StackAdapter Class

After adding the StackView widget, let’s start writing the StackAdapter class to render the data.

3. Create a class named StackItem and add following code :

StackItem.java

package com.example.lenovo.stackview;

public class StackItem {

    private int imageResourseId;
    private String text;

    public StackItem(int imageResourseId, String text) {
        this.imageResourseId = imageResourseId;
        this.text = text;
    }

    public int getImageResourseId() {
        return imageResourseId;
    }

    public void setImageResourseId(int imageResourseId) {
        this.imageResourseId = imageResourseId;
    }

    public String getText() {
        return text;
    }

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

4.Create a layout xml named stack_item.xml with the below code. This layout file shows a single StackView item.

stack_item.xml 

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

    <ImageView
        android:id="@+id/img"
        android:layout_width="180dp"
        android:layout_height="180dp" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/holo_blue_dark"
        android:textSize="18sp"
        android:textStyle="bold" />

</LinearLayout>

5.Now create a class named StackAdapter.java and add the below code.

The adapter’s methods—getCount(), getItem(), and getItemId()—are used to determine the number of items to be displayed and the unique identifier of the specified items. The getView() method is used to retrieve the appropriate view at the specified position. The view defined in the stack_item.xml file is accessed and is used to display items through the StackView.

StackAdapter.java

package com.example.lenovo.stackview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;


public class StackAdapter extends BaseAdapter {

    List items;
    Context context;

    public StackAdapter(Context context, List items) {
        this.items = items;
        this.context = context;
    }

    @Override
    public long getItemId(int pos) {
        return pos;
    }

    @Override
    public StackItem getItem(int i) {
        return items.get(i);
    }

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


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        if (v == null) {
            v = LayoutInflater.from(context).inflate(R.layout.stack_item, parent, false);
        }

        StackItem item = items.get(position);
        if (item != null) {
            ImageView imageView = (ImageView) v.findViewById(R.id.img);
            TextView textView = (TextView) v.findViewById(R.id.tv);
            imageView.setImageResource(item.getImageResourseId());
            textView.setText(item.getText());
        }
        return v;
    }
}

6.Open drawable folder under res directory and paste all the  photos which you have copied from somewhere else.

7.Now open  MainActivity.java and do the below changes. Here prepareStackData() method adds sample data to list .

MainActivity.java

package com.example.lenovo.stackview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.StackView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    List items;
    StackAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        StackView sv = (StackView) findViewById(R.id.stackview);
        prepareStackData();

        //setting adapter
        adapter = new StackAdapter(getApplicationContext(), items);
        sv.setAdapter(adapter);


    }

    //setting data in item list
    void prepareStackData() {
        items = new ArrayList();
        items.add(new StackItem(R.drawable.froyo, "Froyo"));
        items.add(new StackItem(R.drawable.gingerbread, "GingerBread"));
        items.add(new StackItem(R.drawable.honeycomb, "HoneyComb"));
        items.add(new StackItem(R.drawable.icecream, "IceCream Sandwich"));
        items.add(new StackItem(R.drawable.jellybean, "JellyBean"));
        items.add(new StackItem(R.drawable.kitkat, "KitKat"));
        items.add(new StackItem(R.drawable.lollipop, "Lollipop"));
        items.add(new StackItem(R.drawable.marshmallow, "Marshmallow"));
        items.add(new StackItem(R.drawable.naugat, "Naugat"));
        items.add(new StackItem(R.drawable.oreo, "Oreo"));


    }
}

Now when you run the app it will look like this:

                

Leave a Reply