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