ZOFTINO.COM android and web dev tutorials

Android StackView Tutorial

Android StackView can display one child view at a time out of multiple child views it contains. StackView can be configured to flip child views in response to UI events. StackView can be added an adapter which supplies child views to it.

StackView is similar to AdapterViewFlipper with display difference. StackView shows all the child views as stack.

By default stack view lets you swipe down or up to view next or previous child view in the stack view. You can handle touch events by implementing onTouchEvent method to implement your own behavior, read android viewflipper tutorial to know how to handle touch gestures and show next or previous child of stack view.

Android StackView Important Methods

To add adapter which supplies child views to StackView, you need to call setAdapter method. Below example shows how to create custom adapter.

To make StackView flip to next view or previous view, you can call showNext and showPrevious methods on stack view object. These methods can be called in response to UI events such swipe right or swipe left touch gestures. You can see android viewflipper tutorial for swipe right and left example.

To animate child views of StackView when they enter and exit the screens, you need to set in and out animations. You can set animations by calling setInAnimation and setOutAnimation method by either passing object animator or animator resource id. Below example uses android provided animators, android.R.animator.fade_in and android.R.animator.fade_out.

To make StackView flip to a specific view, you can use setDisplayedChild method passing the index of the view that needs to be displayed on the screen.

Android StackView Example

android stackview example

Android StackView Example Item Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/store_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="apple"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/store_image"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/store_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintLeft_toLeftOf="@id/store_name"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/apple" />
</android.support.constraint.ConstraintLayout>

Android StackView Example Adapter

import android.content.Context;
import android.support.annotation.NonNull;
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 java.util.List;

public class StackViewAdapter extends ArrayAdapter {

    private List<String> storesList;
    private Context context;
    private int itemLayout;

    public StackViewAdapter(List<String> stores,int resource, Context ctx) {
        super(ctx, resource, stores);
        storesList = stores;
        context = ctx;
        itemLayout = resource;
    }

    @Override
    public int getCount() {
        return storesList.size();
    }
    @Override
    public String getItem(int position) {
        return storesList.get(position);
    }

    @Override
    public View getView(int position, View view, @NonNull ViewGroup parent) {

        if (view == null) {
            view = LayoutInflater.from(parent.getContext())
                    .inflate(itemLayout, parent, false);
        }

        String store = storesList.get(position);

        TextView storeName = (TextView) view.findViewById(R.id.store_name);
        ImageView storeImg = (ImageView) view.findViewById(R.id.store_image);


        storeName.setText(store);
        int resId = context.getResources().getIdentifier(store, 
              "drawable", context.getPackageName());
        storeImg.setImageResource(resId);

        return view;
    }
}

Android StackView Example Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <StackView
        android:id="@+id/stackView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></StackView>
</android.support.constraint.ConstraintLayout>

Android StackView Example Activity

 import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.StackView;

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

public class StackViewActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.stack_view_layout);

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

        sv.setInAnimation(this, android.R.animator.fade_in);
        sv.setOutAnimation(this, android.R.animator.fade_out);

        StackViewAdapter albumsAdapter =
                new StackViewAdapter(getStores(),R.layout.stack_view_item_layout,
                        StackViewActivity.this);

        sv.setAdapter(albumsAdapter);

    }

    private List<String> getStores(){
        List<String> stores = new ArrayList<String>();
        stores.add("apple");
        stores.add("htc");
        stores.add("samsung");
        stores.add("lg");
        stores.add("sony");
        stores.add("nokia");
        stores.add("panasonic");
        return stores;
    }
}