Click here to Skip to main content
11,478,066 members (75,268 online)
Click here to Skip to main content

Create a Dynamic Shelfview in Android?

, 16 Sep 2012 CPOL 33K 3.5K 26
Rate this:
Please Sign up or sign in to vote.
In this article, you can see a program that shows a shelf view. This shelf view has two features. First create a ListView that includes another list view. Second, Inner ListView where you can move items as horizontal.

Introduction

As you know, Android doesn’t support ListView with horizontal view feature. There is a way to make it as a gallery or TableLayout (you can see my tip in here). Of course, I'll describe them.

Background

Notice, in this application I use two classes:

  • HorizontalListView class that extends the AdapterView. It has been downloaded from GitHub.
  • Quaere library used almost the same as Linq2Object in .NET. You can download it here.

Other Approaches

In here, I want to describe other ways for showing a shelf view (I mean a listview that can show multi items in every row and every row can scroll horizontal).

First Way - Gallery

In "main.xml" file, we code only LinearLayout with an ID. Then, in Java class, try to create a multi gallery and insert in LinearLayout every gallery that plays the role of row:

public class MainActivity extends Activity {	
	//---the images to display---
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic2,
            R.drawable.pic3,
            R.drawable.pic4,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7                    
    };
    
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        for(int i = 0; i < 5 ; i++){
		Gallery gallery = (Gallery) findViewById(R.id.gallery1);
		gallery.setAdapter(new ImageAdapter(this));
        }        
    }
    
    public class ImageAdapter extends BaseAdapter 
    {
        private Context context;
        private int itemBackground;
 
        public ImageAdapter(Context c) 
        {
            context = c;
            //---setting the style---
            TypedArray a = obtainStyledAttributes(R.styleable.Gallery1);
            itemBackground = a.getResourceId(
                R.styleable.Gallery1_android_galleryItemBackground, 0);
            a.recycle();                    
        }
 
        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        } 
        
        //---returns the ID of an item--- 
        public Object getItem(int position) {
            return position;
        }            
        
        //---returns the ID of an item---         
        public long getItemId(int position) {
            return position;
        }
  
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imageIDs[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
            imageView.setBackgroundResource(itemBackground);
 
            return imageView;
        }
    }    
}

There is some problem in this way, one problem related to view position about items is that it appears in the center of display and I can't resolve it.

Second Way - TableLayout

It has already been fully described in this tip. Of course, it has some problems too such as it is unsupported for virtualization as AdapterView.

The Beginning

Now, we want to introduce a new way that consists of the following advantages vs. the above ways:

  • Support virtualization
  • Use Array Adapter instead of loop statements for creating a list of items
  • Every row can make separate other rows

Before doing anything else, please add Quaere library.

In our example, you will define your layout for the items, rows and a layout for base scheme and use it in your adapter or another place. We want to plan two list views - the first list view (we call it child ListView) acts horizontal and the second list view (we call it parent ListView) includes multi child ListView and scrolling as vertical.

Create the "item.xml" layout file in the "res/layout" folder of the project.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="80dip"
        android:layout_height="100dip"
        android:paddingLeft="10dip"
        android:src="@drawable/book" />
 
    <TextView
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Simple"
        android:textColor="#000"
        android:textSize="15px" />
 
    <TextView
        android:id="@+id/author"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:text="Simple"
        android:textColor="#000"
        android:textSize="15px" />
</LinearLayout> 

"item.xml" layout file is used in child ListView. Now create the "row.xml" layout file in the "res/layout" folder of project. "row.xml" defines a new listview from HorizontalListView class instead of a common ListView.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <com.onazifi.shelf.HorizontalListView
        android:id="@+id/subListview"
        android:layout_width="fill_parent"
        android:layout_height="130dip"
        android:background="@drawable/shelf1" />
</LinearLayout> 

Notice, I've written "com.onazifi.shelf. ", it is related to my project folders and if you use it, change its address.

Ok, create "main.xml" file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:id="@+id/lineLayout">
 
    <ListView
        android:id="@+id/android:list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

Create BookItem class for map components of item and Library class for making list of BookItem. In this class, there is a "groupbyArrayBookItem" method for grouping a list of items. This method uses the quaere library for grouping. This library acts as LINQ in .NET.

 public class Library {
 
	private ArrayList<BookItem> arrayBookItem;
	public static final int AUTHOR = 1;
	public static final int TITLE = 2;
	public static final int RATE = 3;
	public static final int DOWNLOAD_DATE = 4;
 
	public Library() {
		arrayBookItem = new ArrayList<BookItem>();
	}
 
	public void setColectionBookItem(ArrayList<BookItem> _array) {
		this.arrayBookItem = _array;
	}
 
	public void addBookItem(BookItem _bi) {
		this.arrayBookItem.add(_bi);
	}
 
	public ArrayList<ArrayList<BookItem>> groupbyArrayBookItem(int type) {
 
		BookItem[] books = BookItem.ALL_BOOKS;
		ArrayList<ArrayList<BookItem>> groupList = 
				new ArrayList<ArrayList<BookItem>>();
		String getType = "";
		
		switch (type) {
		case AUTHOR:
			getType = "bookitem.getAuthor()";
			break;
		case TITLE:
			getType = "bookitem.getTitle()";
			break;
		case DOWNLOAD_DATE:
			getType = "bookitem.getDownloadDate()";
			break;
		case RATE:
			getType = "bookitem.getRate()";
			break;
		default:
			return groupList;
		}
 
		/*
		 * books is a object of BookItem
		 * bookitem is item for point to list
		 * getType is a string value for set type of grouping
		 * groupbyArrayBookItem return back array of array of items
		 */
		Iterable<Group> groups = 
				from("bookitem").in(books).group("bookitem")
				.by(getType).into("g").select("g");
 
		for (Group group : groups) {
			ArrayList<BookItem> obj = new ArrayList<BookItem>();
			for (Object Item : group.getGroup()) {
				obj.add((BookItem) Item);
			}
			groupList.add(obj);
		}
		return groupList;
	}
}

And finally, survey ShelfViewActivity class. In this class, we call library class to get an array of array of items. Then set adapter parent array list to parent ListView and in adapter class, call another adapter class for creating a list of items in child ListView.

 public class ShelfViewActivity extends ListActivity {
	/** Called when the activity is first created. */
	private VerticalAdapter verListAdapter;
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		/*
		 * Calling Library & BookItem classes for create list of groups
		 *  groupbyArrayBookItem return back array of array of items
		 */
		Library lb = new Library();
		for (BookItem item : BookItem.ALL_BOOKS) {
			lb.addBookItem(item);
		}
		ArrayList<ArrayList<BookItem>> groupList = 
				new ArrayList<ArrayList<BookItem>>();
		groupList = lb.groupbyArrayBookItem(Library.AUTHOR);
 
		verListAdapter = new VerticalAdapter(this, R.layout.row, groupList);
		setListAdapter(verListAdapter);
 
		verListAdapter.notifyDataSetChanged();
	}
 
	/**
	 * This class add a list of ArrayList to ListView that it include multi
	 * items as bookItem.
	 */
	private class VerticalAdapter extends ArrayAdapter<ArrayList<BookItem>> {
 
		private int resource;
 
		public VerticalAdapter(Context _context, int _ResourceId,
				ArrayList<ArrayList<BookItem>> _items) {
			super(_context, _ResourceId, _items);
			this.resource = _ResourceId;
		}
 
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View rowView;
 
			if (convertView == null) {
				rowView = LayoutInflater.from(getContext()).inflate(resource,
						null);
			} else {
				rowView = convertView;
			}
 
			HorizontalListView hListView = (HorizontalListView) rowView
					.findViewById(R.id.subListview);
			HorizontalAdapter horListAdapter = new HorizontalAdapter(
					getContext(), R.layout.item, getItem(position));
			hListView.setAdapter(horListAdapter);
 
			return rowView;
		}
	}
 
	/*
	 * This class add some items to Horizontal ListView this ListView include
	 * several bookItem.
	 */
	private class HorizontalAdapter extends ArrayAdapter<BookItem> {
 
		private int resource;
 
		public HorizontalAdapter(Context _context, int _textViewResourceId,
				ArrayList<BookItem> _items) {
			super(_context, _textViewResourceId, _items);
			this.resource = _textViewResourceId;
		}
 
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
			View retval = LayoutInflater.from(getContext()).inflate(
					this.resource, null);
 
			TextView topText = (TextView) retval.findViewById(R.id.title);
			TextView bottomText = (TextView) retval
					.findViewById(R.id.author);
 
			topText.setText(getItem(position).getAuthor());
			bottomText.setText(getItem(position).getTitle());
 
			return retval;
		}
	}
}

Summary

If you pay attention to the source code, you'll learn how to create new classes that extend from Android base class.

Notice that there are images for showing in "res/drawable". Also, this project has been coded in Android 4.0 with android:minSdkVersion="14".

I have tried to describe my project completely and I hope the project will be useful for you.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

omid.nazifi

Iran (Islamic Republic Of) Iran (Islamic Republic Of)
No Biography provided

Comments and Discussions

 
QuestionMessage Removed Pin
Member 21272212-Jan-15 22:51
memberMember 21272212-Jan-15 22:51 
Questionscroll Pin
Member 106302742-Jul-14 1:19
memberMember 106302742-Jul-14 1:19 
AnswerRe: scroll Pin
Member 1093399012-Jul-14 22:35
memberMember 1093399012-Jul-14 22:35 
Questionhiii Pin
Member 1066290425-Apr-14 8:58
memberMember 1066290425-Apr-14 8:58 
AnswerRe: hiii Pin
ajela_dam10-May-14 0:48
memberajela_dam10-May-14 0:48 
Bugi also got a error in this app Pin
Member 1066290425-Apr-14 8:37
memberMember 1066290425-Apr-14 8:37 
QuestionGetting wrong data when I am clicking on any item of the list. And onClickListener is not working on particular data Pin
Member 106692598-Apr-14 21:08
memberMember 106692598-Apr-14 21:08 
Questionjava.lang.noclassdeffounderror: org.quaere.dsl Pin
amarnath baitha12-Feb-14 8:44
memberamarnath baitha12-Feb-14 8:44 
AnswerRe: java.lang.noclassdeffounderror: org.quaere.dsl Pin
Member 1031619912-Apr-14 10:40
memberMember 1031619912-Apr-14 10:40 
QuestionProblem noclassdef Pin
Tealcoune28-Dec-13 12:35
memberTealcoune28-Dec-13 12:35 
AnswerRe: Problem noclassdef Pin
omid.nazifi12-Jan-14 19:47
memberomid.nazifi12-Jan-14 19:47 
QuestionMyLibrary has stopped error Pin
droidcoder19-Dec-13 2:05
memberdroidcoder19-Dec-13 2:05 
QuestionsetOnItemClickListener() not be called Pin
Member 21272220-Oct-13 17:31
memberMember 21272220-Oct-13 17:31 
AnswerRe: setOnItemClickListener() not be called Pin
omid.nazifi22-Oct-13 20:04
memberomid.nazifi22-Oct-13 20:04 
GeneralRe: setOnItemClickListener() not be called Pin
Member 21272223-Oct-13 22:05
memberMember 21272223-Oct-13 22:05 
GeneralRe: setOnItemClickListener() not be called Pin
omid.nazifi26-Oct-13 3:56
memberomid.nazifi26-Oct-13 3:56 
QuestionHandling clicks? Pin
Member 1017992530-Jul-13 8:41
memberMember 1017992530-Jul-13 8:41 
AnswerRe: Handling clicks? Pin
omid.nazifi31-Jul-13 0:33
memberomid.nazifi31-Jul-13 0:33 
QuestionAddilng image icons [modified] Pin
Zubair KK28-Feb-13 19:55
memberZubair KK28-Feb-13 19:55 
AnswerRe: Addilng image icons Pin
omid.nazifi16-Mar-13 20:27
memberomid.nazifi16-Mar-13 20:27 
QuestionIncreasing Space in TableRow Pin
Sultan Ahmed Sagor9-Feb-13 13:17
memberSultan Ahmed Sagor9-Feb-13 13:17 
AnswerRe: Increasing Space in TableRow Pin
omid.nazifi10-Feb-13 23:43
memberomid.nazifi10-Feb-13 23:43 
QuestionThanks..... Pin
sowcom26-Dec-12 16:53
membersowcom26-Dec-12 16:53 
QuestionProblem fix for “NoClassDefFoundError” with ADT 17 Pin
Anilkutsa27-Nov-12 0:15
memberAnilkutsa27-Nov-12 0:15 
AnswerRe: Problem fix for “NoClassDefFoundError” with ADT 17 Pin
Member 8507876-Jun-13 9:07
memberMember 8507876-Jun-13 9:07 
QuestionScrolling issue Pin
Member 801090520-Nov-12 1:34
memberMember 801090520-Nov-12 1:34 
BugThe code does not run Pin
imgen24-Sep-12 16:55
memberimgen24-Sep-12 16:55 
GeneralRe: The code does not run Pin
omid.nazifi26-Sep-12 3:57
memberomid.nazifi26-Sep-12 3:57 
GeneralRe: The code does not run Pin
imgen23-Oct-12 14:36
memberimgen23-Oct-12 14:36 
QuestionQuaere Libray Pin
vivek18ssb14-Sep-12 22:38
membervivek18ssb14-Sep-12 22:38 
AnswerRe: Quaere Libray Pin
omid.nazifi15-Sep-12 19:46
memberomid.nazifi15-Sep-12 19:46 
@vivek-singh: You should get it's source with SVN. exact address is "http://quaere.codehaus.org/Get+Involved"
AnswerRe: Quaere Libray Pin
omid.nazifi16-Sep-12 19:40
memberomid.nazifi16-Sep-12 19:40 
GeneralRe: Quaere Libray Pin
muhammadfurqaan6-Nov-12 21:56
membermuhammadfurqaan6-Nov-12 21:56 
Questionimportant topic Pin
carlospenny22-May-12 1:32
membercarlospenny22-May-12 1:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.150520.1 | Last Updated 17 Sep 2012
Article Copyright 2012 by omid.nazifi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid