StackView in Android Studio

Introduction

In this article you will learn about StackView in Android Studio.

StackView

Stack View is a type of view that can contain images and you can show your images in a stack form and and also scroll your images up and down.

Image of StackView



Step 1

Create a Java class and write the following code.

In this first you use all images in an arraylist and create a stackview to hold the images. You will get all these images in a stack view by ing an object of an Adapter class that extends the Araayadapter classs. We this object to the setAdapter method and call this method with the object of the Adapter class to get all images in a stack.   

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.*;

 

import java.util.ArrayList;

 

public class MainActivity extends Activity {

     StackView sv;

    @SuppressLint("NewApi")

    @Override

 

    public void onCreate(Bundle savedInstanceState)

    {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        StackView stk = (StackView)this.findViewById(R.id.stackView);

        ArrayList<StackItem> items = new ArrayList<StackItem>();

        items.add(new StackItem("text1", this.getResources().getDrawable(R.drawable.pic1 )));

        items.add(new StackItem("text2", this.getResources().getDrawable(R.drawable.pic2)));

        items.add(new StackItem("text3", this.getResources().getDrawable(R.drawable.pic3)));

        items.add(new StackItem("text4", this.getResources().getDrawable(R.drawable.pic4)));

        items.add(new StackItem("text5", this.getResources().getDrawable(R.drawable.pic9)));

        items.add(new StackItem("text6", this.getResources().getDrawable(R.drawable.pic5)));

        items.add(new StackItem("text7", this.getResources().getDrawable(R.drawable.pic6)));

        items.add(new StackItem("text8", this.getResources().getDrawable(R.drawable.pic7)));

        items.add(new StackItem("text9", this.getResources().getDrawable(R.drawable.pic8)));

        AdapterStack adapt = new AdapterStack(this, R.layout.second, items);

        stk.setAdapter(adapt);

    }

    public class StackItem {

        public String itemText;

        public Drawable itemPhoto;

        public StackItem(String text,Drawable photo)

        {

            this.itemPhoto = photo;

            this.itemText = text;

        }

}

    public class AdapterStack extends ArrayAdapter<StackItem> {

        private ArrayList<StackItem> items;

           private Context ctx;

        public AdapterStack(Context context, int textViewResourceId,

                            ArrayList<StackItem> objects) {

            super(context, textViewResourceId, objects);

            this.items = objects;

            this.ctx = context;

        }

        @Override

        public View getView(int position, View convertView, ViewGroup parent) {

            View v = convertView;

            if (v == null) {

                LayoutInflater vi = (LayoutInflater)ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

                v = vi.inflate(R.layout.second, null);

            }

            StackItem m = items.get(position);

            if (m != null) {

                TextView text = (TextView) v.findViewById(R.id.textview);

                ImageView img = (ImageView)v.findViewById(R.id.imagteview);

                if (text != null) {

                    text.setText(m.itemText);

                    img.setImageDrawable(m.itemPhoto);

                }

            }

            return v;

        }

    }

}

 

}

 

Step 2
 

Create An XML file and write this:

<?xml version="1.0" encoding="utf-8"?>

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

             android:layout_width="fill_parent"

             android:layout_height="fill_parent" >

        <TextView

                android:layout_height="wrap_content"

                android:layout_width="wrap_content"

                android:id="@+id/textview">

        </TextView>

 

        <ImageView

                android:layout_height="wrap_content"

                android:layout_width="wrap_content"

                android:id="@+id/imagteview">

        </ImageView>

 

</FrameLayout>
 

Step 3
 

Create another XML file and write this:
 

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

             android:layout_width="fill_parent"

             android:layout_height="fill_parent" >

 

    <StackView

            android:id="@+id/stackView"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:animateLayoutChanges="true"

            android:background="#F4C2C2"

 

            >

 

    </StackView>

 

</FrameLayout>

Step 4

Android Menifest.xml file.

In the Android Menifest.xml file change the Android minsdk version because StackView does not support a minsdk version less than 11.
 

<?xml version="1.0" encoding="utf-8"?>

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

    package="com.stackvie"

    android:versionCode="1"

    android:versionName="1.0" >

 

    <uses-sdk

        android:minSdkVersion="11"

        android:targetSdkVersion="16" />

 

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.stackvie.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

 

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

 

</manifest>

 

Output




When you scroll down the StackView: