<h3><strong><span style="color: #000080;">What is StackView?</span></strong></h3>
<p>The <span style="color: #008000;"><strong>Honeycomb Android version</strong></span>, introduced some interesting widgets with collections. One of them is the Android StackView. <span style="color: #008000;"><strong>StackView</strong></span> helps in arranging items in the form of stacked cards, where the front item can be flipped to bring the item behind it to the front.</p>
<p>Here, you will learn to stack images with text in the StackView. So create a new Android project called <span style="color: #008000;"><strong>StackView</strong></span>.<code></code></p>
<p>Get <span style="color: #0000ff;"><strong>GITHUB</strong></span> code from <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://github.com/arunk7839/StackView"><strong>Here</strong></a></span>.</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><amp-youtube data-videoid="nyVTyFbTi98" data-param-rel="1" data-param-showsearch="0" data-param-showinfo="1" data-param-iv_load_policy="1" data-param-fs="1" data-param-hl="en-US" data-param-autohide="2" data-param-wmode="transparent" width="1200" height="675" layout="responsive"><a href="https://www.youtube.com/watch?v=nyVTyFbTi98" placeholder><amp-img src="https://i.ytimg.com/vi/nyVTyFbTi98/hqdefault.jpg" alt="YouTube Poster" layout="fill" object-fit="cover"><noscript><img src="https://i.ytimg.com/vi/nyVTyFbTi98/hqdefault.jpg" loading="lazy" decoding="async" alt="YouTube Poster"></noscript></amp-img></a></amp-youtube></span></p>
<h3><strong><span style="color: #000080;">Creating New Project</span></strong></h3>
<ol>
<li>In Android Studio, go to <span style="color: #008000;"><strong>File </strong><strong>⇒</strong><strong> New Project</strong></span> and fill all the details required to create a new project. When it prompts to select a default activity, select <span style="color: #008000;"><strong>Blank Activity</strong></span> and proceed.</p>
</li>
<li>
<p>In <span style="color: #008000;"> <strong>activity_main.xml</strong></span> i have add one <span style="color: #008000;"><strong>StackView</strong></span> with following basic properties.</p>
</li>
</ol>
<p><span style="color: #0000ff;"><strong>activity_main.xml</strong></span></p>
<p><code></code></p>
<pre><!--?xml version="1.0" encoding="utf-8"?-->
<strong>
<strong> xmlns:tools="http://schemas.android.com/tools"</strong>
<strong> android:layout_width="match_parent"</strong>
<strong> android:layout_height="match_parent"</strong>
<strong> tools:context="com.example.lenovo.stackview.MainActivity">;</strong>

<strong> <;TextView</strong>
<strong> <span style="color: #000000;">android:id="@+id/textview"</span></strong>
<strong> android:layout_width="wrap_content"</strong>
<strong> android:layout_height="wrap_content"</strong>
<strong> android:layout_centerHorizontal="true"</strong>
<strong> android:layout_margin="10dp"</strong>
<strong> android:text="stackview"</strong>
<strong> android:textAllCaps="true"</strong>
<strong> android:textColor="@android:color/holo_red_dark"</strong>
<strong> android:textSize="25sp"</strong>
<strong> android:textStyle="bold" />;</strong>

<strong> <;StackView</strong>
<strong> android:id="@+id/stackview"</strong>
<strong> android:layout_width="match_parent"</strong>
<strong> android:layout_height="match_parent"</strong>
<strong> android:layout_below="@+id/textview"</strong>
<strong> android:animateLayoutChanges="true">;</strong>

 
</strong></pre>
<p>The value of the <span style="color: #008000;"><strong>android:animateLayoutChanges</strong></span> attribute is set to true so that changes occurring in the layout will not mandate running LayoutTransition.</p>
<h3><strong><span style="color: #000080;">Writing the StackAdapter Class</span></strong></h3>
<p>After adding the<span style="color: #008000;"> <strong>StackView widget</strong></span>, let’s start writing the<span style="color: #008000;"><strong> StackAdapter </strong></span>class to render the data.</p>
<p>3. Create a class named StackItem and add following code :</p>
<p><span style="color: #0000ff;"><strong>StackItem.java</strong></span></p>
<p><code></code></p>
<pre><strong>package com.example.lenovo.stackview;

public class StackItem {

 private int imageResourseId;
 private String text;

 public StackItem(int imageResourseId, String text) {
 this.imageResourseId = imageResourseId;
 this.text = text;
 }

 public int getImageResourseId() {
 return imageResourseId;
 }

 public void setImageResourseId(int imageResourseId) {
 this.imageResourseId = imageResourseId;
 }

 public String getText() {
 return text;
 }

 public void setText(String text) {
 this.text = text;
 }
}

</strong></pre>
<p>4.Create a layout xml named <span style="color: #008000;"><strong>stack_item.xml</strong> </span>with the below code. This layout file shows a single StackView item.</p>
<p><span style="color: #0000ff;"><strong>stack_item.xml </strong> </span></p>
<p><code></code></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<pre><strong><;?xml version="1.0" encoding="utf-8"?>;</strong>
<strong><;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"</strong>
<strong> android:layout_width="match_parent"</strong>
<strong> android:layout_height="match_parent"</strong>
<strong> android:orientation="vertical">;</strong>

<strong> <;ImageView</strong>
<strong> android:id="@+id/img"</strong>
<strong> android:layout_width="180dp"</strong>
<strong> android:layout_height="180dp" />;</strong>

<strong> <;TextView</strong>
<strong> android:id="@+id/tv"</strong>
<strong> android:layout_width="wrap_content"</strong>
<strong> android:layout_height="wrap_content"</strong>
<strong> android:textColor="@android:color/holo_blue_dark"</strong>
<strong> android:textSize="18sp"</strong>
<strong> android:textStyle="bold" />;</strong>

<strong><;/LinearLayout>;</strong></pre>
<p>5.Now create a class named <span style="color: #008000;"><strong>StackAdapter.java</strong></span> and add the below code.</p>
<p>The adapter’s methods—<span style="color: #008000;"><strong>getCount(), getItem(), and getItemId()</strong></span>—are used to determine the number of items to be displayed and the unique identifier of the specified items. The<strong> <span style="color: #008000;">getView()</span></strong> method is used to retrieve the appropriate view at the specified position. The view defined in the<strong> <span style="color: #008000;">stack_item.xml</span> </strong>file is accessed and is used to display items through the StackView.</p>
<p><span style="color: #0000ff;"><strong>StackAdapter.java</strong></span></p>
<p><code></code></p>
<pre><strong>package com.example.lenovo.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;
import android.widget.TextView;

import java.util.List;


public class StackAdapter extends BaseAdapter {

 List items;
 Context context;

 public StackAdapter(Context context, List items) {
 this.items = items;
 this.context = context;
 }

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

 @Override
 public StackItem getItem(int i) {
 return items.get(i);
 }

 @Override
 public int getCount() {
 return items.size();
 }


 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 View v = convertView;
 if (v == null) {
 v = LayoutInflater.from(context).inflate(R.layout.stack_item, parent, false);
 }

 StackItem item = items.get(position);
 if (item != null) {
 ImageView imageView = (ImageView) v.findViewById(R.id.img);
 TextView textView = (TextView) v.findViewById(R.id.tv);
 imageView.setImageResource(item.getImageResourseId());
 textView.setText(item.getText());
 }
 return v;
 }
}

</strong></pre>
<p>6.Open <span style="color: #008000;"><strong>drawable</strong></span> folder under res directory and paste all the photos which you have copied from somewhere else.</p>
<p>7.Now open <span style="color: #008000;"><strong>MainActivity.java</strong></span> and do the below changes. Here <span style="color: #008000;"><strong>prepareStackData()</strong> </span>method adds sample data to list .</p>
<p><span style="color: #0000ff;"><strong>MainActivity.java</strong></span></p>
<pre><strong>package com.example.lenovo.stackview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.StackView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

 List items;
 StackAdapter adapter;

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

 StackView sv = (StackView) findViewById(R.id.stackview);
 prepareStackData();

 <span style="color: #3366ff;">//setting adapter</span>
 adapter = new StackAdapter(getApplicationContext(), items);
 sv.setAdapter(adapter);


 }

 <span style="color: #3366ff;">//setting data in item list</span>
 void prepareStackData() {
 items = new ArrayList();
 items.add(new StackItem(R.drawable.froyo, "Froyo"));
 items.add(new StackItem(R.drawable.gingerbread, "GingerBread"));
 items.add(new StackItem(R.drawable.honeycomb, "HoneyComb"));
 items.add(new StackItem(R.drawable.icecream, "IceCream Sandwich"));
 items.add(new StackItem(R.drawable.jellybean, "JellyBean"));
 items.add(new StackItem(R.drawable.kitkat, "KitKat"));
 items.add(new StackItem(R.drawable.lollipop, "Lollipop"));
 items.add(new StackItem(R.drawable.marshmallow, "Marshmallow"));
 items.add(new StackItem(R.drawable.naugat, "Naugat"));
 items.add(new StackItem(R.drawable.oreo, "Oreo"));


 }
}

</strong></pre>
<h5><span style="color: #0000ff;"><strong>Now when you run the app it will look like this:</strong></span></h5>
<p><img class="alignnone size-medium wp-image-159" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-06-15-21-011-180x300.png" alt="" width="180" height="300" /> <img class="alignnone size-medium wp-image-160" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-06-15-21-151-180x300.png" alt="" width="180" height="300" /> <img class="alignnone size-medium wp-image-161" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-06-15-21-291-180x300.png" alt="" width="180" height="300" />