Hello Readers! In this post, we are going to learn about how to use android StackView widget in any android application. We will also go through different attributes of stackView widget that can be used to customise it.

Output

Tutorialwing Android StackView Output

Getting Started

StackView widget can be defined as below –

StackView is a widget that are used to created views like stacked Cards. You can flip the front item to give space for item view just after it. Whenever you flip current item, item just behind it comes forward.

Attributes of Android StackView Widget

Some of the popular attributes of android stackView inherited from AdapterViewAnimator are –

Some of the popular attributes of android stackView inherited from ViewGroup are –

Some of the popular attributes of android stackView inherited from View are –

Example of Android StackView Widget

At first, we will create android application. Then, we will use stackView widget in this application.

1. Creating New Project

Follow steps below to create new project. Please ignore the steps if you have already created a new application.

Now, we will modify xml and java file to use StackView widget in the application.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">StackView</string>
	<string name="no_image">No image</string>
</resources>

3. Create View for Single Item View

Now, we will create view for single item to be used in stackView. This will be used in stackView adapter to create view for single item. So, you need to create an xml file, item.xml, in res/layout folder. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:background="@android:color/black">

	<ImageView
		android:id="@+id/imageView"
		android:layout_width="260dp"
		android:layout_height="260dp"
		android:layout_margin="3dp"
		android:contentDescription="@string/no_image"/>

</FrameLayout>

Now, we will create adapter for stackView. So, create a java file (i.e. StackAdapter.java file) in res/main/java/com.tutorialwing.stackview folder.

4. Create Adapter for StackView

Code inside res/main/java/com.tutorialwing.stackview/StackAdapter.java file is as below –

package com.tutorialwing.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;

public class StackAdapter extends BaseAdapter {

	private LayoutInflater inflater;
	private int[] nameList;

	StackAdapter(Context context, int[] nameList) {
		this.inflater = LayoutInflater.from(context);
		this.nameList = nameList;
	}

	@Override
	public int getCount() {
		return nameList.length;
	}

	@Override
	public Object getItem(int position) {
		return nameList[position];
	}

	@Override
	public long getItemId(int position) {
		return position;
	}

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder;
		if (convertView == null) {
			convertView = inflater.inflate(R.layout.item, parent, false);
			holder = new ViewHolder();
			holder.imageView = convertView.findViewById(R.id.imageView);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		holder.imageView.setBackgroundResource(nameList[position]);
		return convertView;
	}

	public class ViewHolder {
		ImageView imageView;
	}
}

In StackAdapter class, we have done following things –
a. We have defined constructor that accepts context and nameList.
b. getCount() method returns number of items in the nameList array. According number of views will be created in the stackView.
c. getItem() method returns items at that position.
d. getItemId() method returns id of the view at index position.
e. Note that we have used viewHolder pattern to create view, in getView() method, for each position in the adapter.

Since we have created view for single item and an adapter for stackView, we will use stackView in the application now.

5. Use StackView Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<?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:background="@android:color/darker_gray"
	android:orientation="vertical"
	android:padding="20dp">

	<StackView
		android:id="@+id/stackView"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:animateLayoutChanges="true"/>

</LinearLayout>

In activity_main.xml file, we have defined stackView widget. Now, we will access this in java file to perform some operations in it.

6. Access StackView Widget in java file

Open src/main/java/com.tutorialwing.stackview/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.stackview;

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

public class MainActivity extends AppCompatActivity {

	int[] nameList = {R.drawable.guava,
			R.drawable.jackfruit,
			R.drawable.mix_fruit,
			R.drawable.pizza,
			R.drawable.pomegranate,
			R.drawable.strawberry,
			R.drawable.zespri_kiwi
	};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

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

		StackAdapter adapter = new StackAdapter(this, nameList);
		stackView.setAdapter(adapter);
		adapter.notifyDataSetChanged();
	}
}

We need some images in res/drawable folder to create views stackView. So, You can click here to download images to be used in the application.

In MainActivity.java file, we have accessed stackView widget. Then, we have defined and assigned the adapter in it.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file is as below –

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.stackview"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of tutorial on Android StackView widget.