Android StackView Tutorial With Example

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 Android StackView Tutorial With Example

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 –

Sr. XML Attributes Description
1 android:animateFirstView Defines whether to animate the current View when the ViewAnimation is first displayed
2 android:inAnimation Identifier for the animation to use when a view is shown
3 android:loopViews Defines whether the animator loops to the first view once it has reached the end of the list
4 android:outAnimation Identifier for the animation to use when a view is hidden

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

Sr. XML Attributes Description
1 android:animateLayoutChanges Specifies whether to run layout transition when there is any change in layout
2 android:animationCache Specifies whether to create drawing cache for children by layout animation
3 android:clipToPadding Defines whether the ViewGroup will clip its children and resize (but not clip) any EdgeEffect to its padding, if padding is not zero
4 android:layoutAnimation Specifies the layout animation to be used when the viewGroup is laid out for the first time
5 android:layoutMode Defines the layout mode of the viewGroup

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

Sr. XML Attributes Description
1 android:alpha Sets alpha to the view
2 android:background Sets drawable to the background
3 android:backgroundTint Sets tint to apply to the background
4 android:clickable Specifies whether the view is clickable or not
5 android:elevation Sets elevation of the view
6 android:focusable Specifies whether this view can take focus or not
7 android:id Specifies id of the view
8 android:visibility Specifies the visibility(VISIBLE, INVISIBLE, GONE) of the view



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.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as StackView. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

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.

Leave a Reply