StackView in Android

In this article, we are going to implement StackView in Android Studio. StackView is a widget that helps in arranging items in the form of stacked cards. Whenever we flip the front item, the next item from behind comes to the front. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to how to create/start a new project in Android Studio. Note that you have to select Java as the programming language. 

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. In this file, StackView has been added. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!--We have used RelativeLayout for layout-->
<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"
    tools:context=".MainActivity">

    <!--Add StackView-->
    <StackView
        android:id="@+id/stack_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Step 3: Add the Images

Add the images that you want to add to the stack in res > drawable folder. Copy the images and paste them into the drawable folder.  

Step 4: Create the layout of the StackView items

Go to res > layout and create a new XML file with the name item.XML in the layout folder.

Working with the item.xml file:

Navigate to res > layout > item.xml and add the code given below to that file. First of all, I have added ImageView where the image that has to be kept in the front is taken. Also, TextView is added which we will be using to add the name below every image added to the stack. I have added the necessary comments in the code below for better understanding.

XML

<?xml version="1.0" encoding="utf-8"?>
<!--Linearlayout is used for layout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp">

    <!--ImageView is added where I have used the image
        that we are going to keep in front-->
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/one" />

    <!--Add TextView to add the text below every image
        added to the stack.-->
    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40sp"
        android:textStyle="bold" />

</LinearLayout>

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and add the code given below to that file. Two methods numberWord() and numberImage() have been implemented here. Comments have been added to the code for a clear understanding of the concepts. 

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.StackView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    StackView stackView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        stackView=(StackView)findViewById(R.id.stack_view);
    }

    // the method numberWord() is used
    // to add the text below corresponding images.
    private List<String> numberWord()
    {
        List<String> word=new ArrayList<>();
        word.add("One");
        word.add("Two");
        word.add("Three");
        word.add("Four");
        word.add("Five");
         return word;
    }

    // the method numberWord() is used to call
    // the images that are added to the stack.
    private List<Integer> numberImage()
    {
        List<Integer> image=new ArrayList<>();
        image.add(R.drawable.one);
        image.add(R.drawable.two);
        image.add(R.drawable.three);
        image.add(R.drawable.four);
        image.add(R.drawable.five);
        return image;
    }
}

Step 6: Create Adapter for StackView 

Go to java > com.example.stackview folder where our MainActivity.java file exists. Create a new Java class with the name MainAdapter.java in com.example.stackview folder. 

Working with the MainAdapter.java file

Go to the MainAdapter.java file and add the code given below to that file. Here we will be implementing getCount() and getView() methods. A constructor is also called to initialize the objects. Comments have been added to the code for better understanding.

Java

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

import androidx.annotation.NonNull;

import java.util.List;

public class MainAdapter extends ArrayAdapter {
    List<String> numberWord;
    List<Integer> numberImage;
    int itemLayout;
    Context c;

    // constructor is called to initialize the objects
    public MainAdapter(List<String> word, List<Integer> image, int resource, Context context) {
        super(context, resource, word);
        numberWord = word;
        numberImage = image;
        itemLayout = resource;
        c = context;
    }

    // getCount() is called to return
    // the total number of words to be used
    @Override
    public int getCount() {
        return numberWord.size();
    }

    // getView() is called to get position,
    // parent and view of the images.
    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(parent.getContext()).inflate(itemLayout, parent, false);
        }

        String word = numberWord.get(position);
        Integer image = numberImage.get(position);

        TextView textView = convertView.findViewById(R.id.text_view);
        ImageView imageView = convertView.findViewById(R.id.image_view);
        textView.setText(word);
        imageView.setImageResource(image);
        return convertView;
    }
}

Step 7: Calling adapter class to MainActivity.java class

Again Go to the MainActivity.java file and add the code given below to that file.

MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);

stackView.setAdapter(adapter);

The final MainActivity.java file is given below:

Java

import android.os.Bundle;
import android.widget.StackView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    StackView stackView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        stackView = (StackView) findViewById(R.id.stack_view);
        MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);
        stackView.setAdapter(adapter);
    }

    // the method numberWord() is used to
    // add the text below corresponding images.
    private List<String> numberWord() {
        List<String> word = new ArrayList<>();
        word.add("One");
        word.add("Two");
        word.add("Three");
        word.add("Four");
        word.add("Five");
        return word;
    }

    // the method numberWord() is used to call
    // the images that are added to the stack.
    private List<Integer> numberImage() {
        List<Integer> image = new ArrayList<>();
        image.add(R.drawable.one);
        image.add(R.drawable.two);
        image.add(R.drawable.three);
        image.add(R.drawable.four);
        image.add(R.drawable.five);
        return image;
    }

}

Output: