Android StackView

StackView can be defined as below –

"In Android 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."

Some of the popular attributes of android StackView are –

S. No.	XML Attributes	Description
1	android:id	This is unique id of the StackView to uniquely identify the StackView.
2	android:height	Height of the StackView.
3	android:width	Width of the StackView.
4	android:alpha	Sets alpha to the view.
5	android:background	Sets drawable to the background.
6	android:backgroundTint	Sets tint to apply to the background.
7	android:clickable	Specifies whether the view is clickable or not.
8	android:elevation	Sets elevation of the view.
9	android:focusable	Specifies whether this view can take focus or not.
10	android:visibility	Specifies the visibility(VISIBLE, INVISIBLE, GONE) of the view.
11	android:animateLayoutChanges	Specifies whether to run layout transition when there is any change in layout.
12	android:animationCache	Specifies whether to create drawing cache for children by layout animation.
13	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.
14	android:layoutAnimation	Specifies the layout animation to be used when the viewGroup is laid out for the first time.
15	android:layoutMode	Defines the layout mode of the viewGroup.
16	android:animateFirstView	Defines whether to animate the current View when the ViewAnimation is first displayed.
17	android:inAnimation	Identifier for the animation to use when a view is shown.
18	android:loopViews	Defines whether the animator loops to the first view once it has reached the end of the list.
19	android:outAnimation	Identifier for the animation to use when a view is hidden.

At first, we will create android application. Then, we will use StackView in the application.

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

S. No.	Steps
1	Open Android Studio.
2	Click on Start a new Android Studio Project Write application name as StackView. Then, click next button.
3	Select minimum SDK you need. However, we have selected 14 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 tutorial to Create a New Project to know steps in detail.

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

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>

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.ukacademe.stackview folder.

package com.ukacademe.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 –

We have defined constructor that accepts context and nameList.
getCount() method returns number of items in the nameList array. According number of views will be created in the stackView.
getItem() method returns items at that position.
getItemId() method returns id of the view at index position.
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.

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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">

<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 in java file to perform some operations in it.

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

package com.ukacademe.stackview;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        int[] nameList = {R.drawable.aspdotnet,
                R.drawable.css_ukacademe,
                R.drawable.csharp_ukacademe,
                R.drawable.android_quiz,
                R.drawable.java_ukacademe,
                R.drawable.courses_ukacademe,
                R.drawable.html_ukacademe
        };
        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.

In MainActivity.java file, we have use StackView. 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.

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

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

<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 below.

Attributes of Android StackView

Modify Values folder

Create View for Single Item View

StackView Widget in xml file

StackView Widget in java file

AndroidManifest.xml

Output

Course Topic