Horizontal ListView like Google Catalogs

Question

how do I make a horizontal list view like the one seen in Google Catalogs?

The large main area is a viewpager, but the bottom row is a horizontal scrollview with a list of items that are clickable. I'm assuming its a listview, if it was how would this be done?

I've used the open source "horizontal list view" that is referenced in other questions here, but it does not act as smoothly like the one in this google app.

Answer 1

It's definitely a Gallery!

You can see here that for sure it's a Gallery that comes with the SDK -> See Youtube video to check how smooth it runs ;)

I've made to myself a short guide from Android.com for future reference. I hope that you can use it too:

1) Open the res/layout/main.xml file and insert the following:

<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/gallery"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>

2) Code to insert on your onCreate() method:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    Gallery gallery = (Gallery) findViewById(R.id.gallery);
    gallery.setAdapter(new ImageAdapter(this));

    gallery.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position, long id) {
            Toast.makeText(HelloGallery.this, "" + position, Toast.LENGTH_SHORT).show();
        }
    });
}

3) Create a new XML file in the res/values/ directory named attrs.xml. Insert the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="HelloGallery">
        <attr name="android:galleryItemBackground" />
    </declare-styleable>
</resources>

4) Go back to your .java file and after the onCreate(Bundle) method, define the custom ImageAdapter class:

public class ImageAdapter extends BaseAdapter {
    int mGalleryItemBackground;
    private Context mContext;

    private Integer[] mImageIds = {
            R.drawable.sample_1,
            R.drawable.sample_2,
            R.drawable.sample_3,
            R.drawable.sample_4,
            R.drawable.sample_5,
            R.drawable.sample_6,
            R.drawable.sample_7
    };

    public ImageAdapter(Context c) {
        mContext = c;
        TypedArray attr = mContext.obtainStyledAttributes(R.styleable.HelloGallery);
        mGalleryItemBackground = attr.getResourceId(
                R.styleable.HelloGallery_android_galleryItemBackground, 0);
        attr.recycle();
    }

    public int getCount() {
        return mImageIds.length;
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);

        imageView.setImageResource(mImageIds[position]);
        imageView.setLayoutParams(new Gallery.LayoutParams(150, 100));
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
        imageView.setBackgroundResource(mGalleryItemBackground);

        return imageView;
    }
}

Well... the code is very simple, but you can refer to the original and longer document here.

Answer 2

I'm not sure, but i think it's a Gallery ( http://developer.android.com/reference/android/widget/Gallery.html ) that sends callbacks to the ViewPager.

You can find a sample code here: http://www.androidpeople.com/android-gallery-example

Instead of the toast you need to callback the viewpager and set the page you want.

I think it will do want you want! :-)