Mar 15, 2012

Implement Horizontal ListView using android.widget.Gallery, with custom BaseAdapter.

Refer to the article Implement a photo bar using android.widget.Gallery, with custom BaseAdapter, and custom object. It can be modify to implement a Horizontal ListView, like this:

Our Horizontal ListView

Modify the main java code to implement our custom BaseAdapter for Gallery.
package com.AnHorizontalListView;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.TextView;
import android.widget.Toast;

public class AnHorizontalListViewActivity extends Activity {

Gallery myHorizontalListView;
MyAdapter myAdapter;

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myHorizontalListView = (Gallery)findViewById(R.id.horizontallistview);

myAdapter = new MyAdapter(this);
myHorizontalListView.setAdapter(myAdapter);

myHorizontalListView.setOnItemClickListener(new OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
Toast.makeText(
AnHorizontalListViewActivity.this,
parent.getItemAtPosition(position).toString() + " Clicked",
Toast.LENGTH_LONG)
.show();

}});

}

public class MyAdapter extends BaseAdapter {

Context context;

String[] itemsArray = {
"SUN","MON", "TUS", "WED", "THU", "FRI", "SAT"};

MyAdapter(Context c){
context = c;
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return itemsArray.length;
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return itemsArray[position];
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub

View rowView = LayoutInflater
.from(parent.getContext())
.inflate(R.layout.row, null);
TextView listTextView = (TextView)rowView.findViewById(R.id.itemtext);
listTextView.setText(itemsArray[position]);

return rowView;
}


}
}


Create /res/layout/row.xml to define the layout of individual items in Gallery.
<?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" >

<TextView
android:id="@+id/itemtext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:textColor="@android:color/white"
android:textStyle="bold"
android:textSize="30sp"/>

</LinearLayout>


Main.xml
<?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" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
<Gallery
android:id="@+id/horizontallistview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />

</LinearLayout>


3 comments:

  1. hi i am getting an error in this row.xml in this
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    line. can you tell why it is so ?

    ReplyDelete
    Replies
    1. If it's not mis-typing, try Project -> Clean in Eclipse to rebuild.

      Delete
  2. Hello,

    Nice guide it works perfectly.

    Do you know how to make so the text shows right from the left side and not centered?

    https://dl.dropbox.com/u/10355117/dsa.png

    Thanks.

    ReplyDelete

Infolinks In Text Ads