Android: Create a simple horizontal image list.

Hi,

In this post we'll create our horizontal image List using HorizontalScrollView.

First,  create the layout.

main.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
     
      <HorizontalScrollView android:layout_width="fill_parent"  
        android:layout_height="wrap_content">  
          
        <LinearLayout android:id="@+id/_linearLayout"  
          android:layout_width="fill_parent"  
          android:layout_height="wrap_content"  
          android:orientation="horizontal">  
            
        </LinearLayout>  
          
      </HorizontalScrollView>  
     
 </LinearLayout>  

The cell can be as simple as an image or can be more complex such as an image and a text below the image.

cell.xml

 <?xml version="1.0" encoding="UTF-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/linearLayout1"  
   android:layout_width="wrap_content"  
   android:layout_height="wrap_content"  
   android:orientation="vertical" >  
   
   <ImageView android:id="@+id/_image"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"/>  
     
   <TextView android:id="@+id/_imageName"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_gravity="center_horizontal"/>  
     
 </LinearLayout>  

Now, add some pics to the drawable folder.

The last thing that we'll do is to create our activity.

 package com.testing.testing;  
   
 import android.app.Activity;  
 import android.os.Bundle;  
 import android.view.View;  
 import android.view.View.OnClickListener;  
 import android.widget.ImageView;  
 import android.widget.LinearLayout;  
 import android.widget.TextView;  
 import android.widget.Toast;  
   
 public class TestingActivity extends Activity {  
        
      // mainLayout is the child of the HorizontalScrollView ...  
      private LinearLayout mainLayout;  
        
      // this is an array that holds the IDs of the drawables ...  
      private int[] images = {R.drawable.dd1, R.drawable.dd2, R.drawable.dd3,
                   R.drawable.dd4, R.drawable.dd5, R.drawable.dd6, R.drawable.dd7};  
        
      private View cell;  
      private TextView text;  
        
   /** Called when the activity is first created. */  
   @Override  
   public void onCreate(Bundle icicle) {  
     super.onCreate(icicle);  
       
     setContentView(R.layout.main);  
   
     mainLayout = (LinearLayout) findViewById(R.id._linearLayout);  
       
     for (int i = 0; i < images.length; i++) {  
                  
          cell = getLayoutInflater().inflate(R.layout.cell, null);  
            
          final ImageView imageView = (ImageView) cell.findViewById(R.id._image);  
          imageView.setOnClickListener(new OnClickListener() {  
                       
                     @Override  
                     public void onClick(View v) {  
                          // do whatever you want ...  
                          Toast.makeText(TestingActivity.this, 
                          (CharSequence) imageView.getTag(), Toast.LENGTH_SHORT).show();  
                     }  
                });  
            
          imageView.setTag("Image#"+(i+1));  
            
          text = (TextView) cell.findViewById(R.id._imageName);  
            
          imageView.setImageResource(images[i]);  
          text.setText("Image#"+(i+1));  
            
          mainLayout.addView(cell);  
      }  
   }  
 }  

That's it, don't hesitate to comment, to share your knowledge and to correct me. 

Posted in Android