Hello Readers! In this post, we are going to learn about android stackView using kotlin in any android application. We will also learn about different attributes of android stackView that can be used to customise this widget.

Output

Tutorialwing Kotlin StackView Output

Getting Started

Android StackView can be defined as below –

StackView is a widget that are used to create views like stack cards in the application. You can flip current views to create space for views just after it. Whenever current view is flipped, next view, just after it, comes forward and takes place of current view.

Different 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 Using Kotlin

At first, we will create android application. Then, we will use stackView using kotlin in the application.

1. Creating New Project in Kotlin

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

Since we have a project now, we will modify xml and other files to use StackView using kotlin 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

We will create view for single item in stackView. Create a new 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>

4. Create Adapter for StackView

We will create adapter for stackView. This will be responsible to create different views using stackView. So, create a new file, StackAdapter.java, in main/java/com.tutorialwing.stackview/ folder. Then, add below code into it.

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

class StackAdapter internal constructor(context: Context, private val nameList: IntArray) : BaseAdapter() {

    private val inflater: LayoutInflater = LayoutInflater.from(context)

    override fun getCount(): Int {
        return nameList.size
    }

    override fun getItem(position: Int): Any {
        return nameList[position]
    }

    override fun getItemId(position: Int): Long {
        return position.toLong()
    }

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        var convertView = convertView
        val holder: ViewHolder
        if (convertView == null) {
            convertView = inflater.inflate(R.layout.item, parent, false)
            holder = ViewHolder()
            holder.imageView = convertView!!.findViewById(R.id.imageView)
            convertView.tag = holder
        } else {
            holder = convertView.tag as ViewHolder
        }
        holder.imageView!!.setBackgroundResource(nameList[position])
        return convertView
    }

    inner class ViewHolder {
        internal var imageView: ImageView? = null
    }
}

In Adapter class, we have mentioned below things –
a. We have defined a constructor, StackAdapter(…, …) method, that accepts context and nameList array. nameList contains the list of image to be used to create views.
b. getCount() method returns the size of rows in stackView. i.e. total number of views to be created in the stackView.
c. getItem() method returns the item at given index(i.e. position).
d. getItemId() method returns the id of the view at given index(i.e. position).
e. getView() method defines the view at given index. Note that we have used viewHolder pattern to create a view in stackView.

5. Use StackView Widget in xml file

Open src/main/res/layout/activity_main.xml file and 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. Now, we will access this widget in java file to perform some operations in it.

6. Access StackView Widget in Kotlin file

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

package com.tutorialwing.stackview

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

class MainActivity : AppCompatActivity() {

    private var nameList = intArrayOf(R.drawable.guava, R.drawable.jackfruit, R.drawable.mix_fruit, R.drawable.pizza, R.drawable.pomegranate, R.drawable.strawberry, R.drawable.zespri_kiwi)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val stackView = findViewById<StackView>(R.id.stackView)

        val adapter = StackAdapter(this, nameList)
        stackView.adapter = adapter
        adapter.notifyDataSetChanged()
    }
}

You will need some drawable images for this application. So, you can click here to download images to be used in this application.

In MainActivity.java file, we have accessed stackView widget. Then, we have created an adapter and assigned it to stackView.

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

AndroidManifest.xml file

Code inside 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 our tutorial on Android StackView using Kotlin.