Android StackView

May 19, 2015 By: Dr. Droid Android Basics, Android StackView Comments: 3

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. In addition to images, you can stack objects composed of text and other data, too.

Example

In this example I will show how to make use of stack images in the StackView.

VIDEO DEMO

Let’s get start by creating a project in Eclipse IDE.

1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)

2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i had taken StackView for showing stack of images.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <StackView
        android:id="@+id/stackView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:animateLayoutChanges="true" >
    </StackView>

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<StackView

android:id="@+id/stackView1"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:animateLayoutChanges="true" >

</StackView>

</RelativeLayout>

3. Before, making stackview of images you have to create a custom xml layout and custom adapter for it like we had done in listview and gridview. Now, create a new xml file for custom layout naming display_item.xml.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_below="@+id/imageView1"
        android:textColor="#FFFFFF"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="5dp" />

</RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<ImageView

android:id="@+id/imageView1"

android:layout_width="200dp"

android:layout_height="200dp"

android:layout_centerHorizontal="true" />

<TextView

android:id="@+id/textView1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_below="@+id/imageView1"

android:textColor="#FFFFFF"

android:layout_centerHorizontal="true"

android:layout_marginTop="5dp" />

</RelativeLayout>

4. Now create a getter setter class for custom adadpter naming Stack_Items.java.

package com.android_stackview_demo;

public class Stack_Items {
	String name;
	Integer image;

	public Stack_Items(String name, Integer image) {
		this.name = name;
		this.image = image;
	}

	public String getName() {
		return name;

	}

	public int getImage() {
		return image;
	}

}

package com.android_stackview_demo;

public class Stack_Items {

String name;

Integer image;

public Stack_Items(String name, Integer image) {

this.name = name;

this.image = image;

}

public String getName() {

return name;

}

public int getImage() {

return image;

}

5. Now make custom adapter class naming Stack_Adapter.java and add the following code.

package com.android_stackview_demo;

import java.util.ArrayList;

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;

public class Stack_Adapter extends BaseAdapter {

	ArrayList<Stack_Items> arrayList;
	LayoutInflater inflater;
	ViewHolder holder = null;

	public Stack_Adapter(Context context, ArrayList<Stack_Items> arrayList) {
		this.arrayList = arrayList;
		this.inflater = LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return arrayList.size();
	}

	@Override
	public Stack_Items getItem(int pos) {
		// TODO Auto-generated method stub
		return arrayList.get(pos);
	}

	@Override
	public long getItemId(int pos) {
		// TODO Auto-generated method stub
		return pos;
	}

	@Override
	public View getView(int pos, View view, ViewGroup parent) {
		if (view == null) {
			view = inflater.inflate(R.layout.display_item, parent, false);
			holder = new ViewHolder();

			holder.text = (TextView) view.findViewById(R.id.textView1);
			holder.image = (ImageView) view.findViewById(R.id.imageView1);
			view.setTag(holder);
		} else {
			holder = (ViewHolder) view.getTag();
		}

		holder.text.setText(arrayList.get(pos).getName());
		holder.image.setBackgroundResource(arrayList.get(pos).getImage());

		return view;
	}

	public class ViewHolder {
		TextView text;
		ImageView image;
	}

}

package com.android_stackview_demo;

import java.util.ArrayList;

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;

public class Stack_Adapter extends BaseAdapter {

ArrayList<Stack_Items> arrayList;

LayoutInflater inflater;

ViewHolder holder = null;

public Stack_Adapter(Context context, ArrayList<Stack_Items> arrayList) {

this.arrayList = arrayList;

this.inflater = LayoutInflater.from(context);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return arrayList.size();

}

@Override

public Stack_Items getItem(int pos) {

// TODO Auto-generated method stub

return arrayList.get(pos);

}

@Override

public long getItemId(int pos) {

// TODO Auto-generated method stub

return pos;

}

@Override

public View getView(int pos, View view, ViewGroup parent) {

if (view == null) {

view = inflater.inflate(R.layout.display_item, parent, false);

holder = new ViewHolder();

holder.text = (TextView) view.findViewById(R.id.textView1);

holder.image = (ImageView) view.findViewById(R.id.imageView1);

view.setTag(holder);

} else {

holder = (ViewHolder) view.getTag();

}

holder.text.setText(arrayList.get(pos).getName());

holder.image.setBackgroundResource(arrayList.get(pos).getImage());

return view;

}

public class ViewHolder {

TextView text;

ImageView image;

}

6. Finally come to MainActivity.java and add the following code. In this class we just had taken arraylist for images and texts and just setting the custom adapter over the stackview.

package com.android_stackview_demo;

import java.util.ArrayList;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.StackView;

public class MainActivity extends ActionBarActivity {
	private static StackView stackView;
	private static ArrayList<Stack_Items> list;
	
	//Integer array for images
	private static final Integer[] icons = { R.drawable.a, R.drawable.b,
			R.drawable.c, R.drawable.d };

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

		stackView = (StackView) findViewById(R.id.stackView1);
		list = new ArrayList<Stack_Items>();

		//Adding items to the list
		for (int i = 0; i < icons.length; i++) {
			list.add(new Stack_Items("Item " + i, icons[i]));
		}
		
		//Calling adapter and setting it over stackview
		Stack_Adapter adapter = new Stack_Adapter(MainActivity.this, list);
		stackView.setAdapter(adapter);
		adapter.notifyDataSetChanged();
	}

}

package com.android_stackview_demo;

import java.util.ArrayList;

import android.support.v7.app.ActionBarActivity;

import android.os.Bundle;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.StackView;

public class MainActivity extends ActionBarActivity {

private static StackView stackView;

private static ArrayList<Stack_Items> list;

//Integer array for images

private static final Integer[] icons = { R.drawable.a, R.drawable.b,

R.drawable.c, R.drawable.d };

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

stackView = (StackView) findViewById(R.id.stackView1);

list = new ArrayList<Stack_Items>();

//Adding items to the list

for (int i = 0; i < icons.length; i++) {

list.add(new Stack_Items("Item " + i, icons[i]));

}

//Calling adapter and setting it over stackview

Stack_Adapter adapter = new Stack_Adapter(MainActivity.this, list);

stackView.setAdapter(adapter);

adapter.notifyDataSetChanged();

}

7. Now, run the app and you will get the output as shown in video.

Thanks.

3 Comments

Wasim

Thursday, October 8th, 2015

hey thanks for this tutorial its very rear.

Can i put images in same row i mean they are like stairs but i want them like on top of each other ?

I hope you understand my point.

Thanks.

Droid

Friday, October 9th, 2015

Yeah, we can achieve this thing also with some more effort. But right now i am not having any demo to show.