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