Android Gallery Control

In Android the Gallery control is a selection control that displays items in a horizontal gallery. the items in the gallery appear beside each other. they can appear separated by a pre-defined space.

remember that there is a sample demo application for the gallery to download at the end of the post

we can use the gallery to display String items using a simple ArrayAdapter.
so lets see how to create a gallery that displays the word "Hello" in several languages:

the layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
 android_orientation="vertical"
 android_layout_width="fill_parent"
 android_layout_height="fill_parent"
 >
<TextView 
 android_layout_width="fill_parent" 
 android_layout_height="wrap_content" 
 android_text="Gallery Demo"
 />
 <Gallery
 android_id="@+id/gallery"
 android_layout_width="fill_parent" 
 android_layout_height="wrap_content"
 android_gravity="center_horizontal"
 android_spacing="100px"
 
 />
</LinearLayout>

and in the OnCreate method

@Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 gallery=(Gallery)findViewById(R.id.gallery);
 //String array holding the values
 String [] text=new String[]{"Hello","Hi","Alloha","Bonjour","Hallo","¡Hola"};
 //Array adapter to display our values in the gallery control
 ArrayAdapter arr=new ArrayAdapter(this, android.R.layout.simple_gallery_item, text);
gallery.setAdapter(arr);
}

the gallery will be like this

we can increse the spacing between the items by increasing the value of android:spacing property.

we can display a scroll bar to indicate the position of the current selected item in the gallery like this:

<Gallery
 android_id="@+id/gallery"
 android_layout_width="fill_parent" 
 android_layout_height="wrap_content"
 android_gravity="center_horizontal"
 android_spacing="100px"
 android_scrollbars="horizontal"
 android_scrollbarFadeDuration="0"
 android_scrollX="100px"
 />

setting the android:scrollbarFadeDuration="0" makes the scroll bar always visible.

The android:scrollX property defines the initial scroll offset of the scroll bar which is the initial distance that the gallery is scrolled for.

Handling Gallery Events
since the gallery is a selction Control (a adapter view) so it can register a OnItemSelectedListener to handle the selection of items within the gallery.

final String [] text=new String[]{"Hello","Hi","Alloha","Bonjour","Hallo","¡Hola"};
gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

 @Override
 public void onItemSelected(AdapterView parent, View view,
 int position, long id) {
 // TODO Auto-generated method stub
 TextView txt=(TextView)findViewById(R.id.txt);
 txt.setText(text[position].toString());
 }

 @Override
 public void onNothingSelected(AdapterView parent) {
 // TODO Auto-generated method stub
 
 }
 });

now the final step is to add two navigation buttons: Next and Previous to navigate throught the items in the gallery.
the layout is gonna be like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
 android_orientation="vertical"
 android_layout_width="fill_parent"
 android_layout_height="fill_parent"
 >
<TextView 
 android_layout_width="fill_parent" 
 android_layout_height="wrap_content" 
 android_text="Gallery Demo"
 android_id="@+id/txt"
 />
 <Gallery
 android_id="@+id/gallery"
 android_layout_width="fill_parent" 
 android_layout_height="wrap_content"
 android_gravity="center_horizontal"
 android_spacing="100px"
 android_scrollbars="horizontal"
 android_scrollbarFadeDuration="0"
 android_scrollX="100px"
 />
 <LinearLayout
 android_layout_width="fill_parent"
 android_layout_height="wrap_content"
 android_orientation="horizontal"
 android_layout_marginTop="5px"
 > 
 <Button 
 android_text="Previous"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_id="@+id/btnPrev"
 android_onClick="onClick"
 />
 <Button 
 android_text="Next"
 android_layout_width="wrap_content"
 android_layout_height="wrap_content"
 android_id="@+id/btnNext"
 android_onClick="onClick"
 />

 </LinearLayout> 
 
</LinearLayout>

now in order to keep track of the index of the currently selected item we need to define two variables

//Variable to store the number of items in the gallery
 int ItemsInGallery=0;
 int CurrentIndex=0;

and the navigation buttons click handlers:

@Override
 public void onClick(View v) {
 // TODO Auto-generated method stub
 switch(v.getId())
 {
 case R.id.btnNext:
 //Increase the index
 CurrentIndex++;
 //if reached the end of the gallery, then start from the first item
 if(CurrentIndex>ItemsInGallery-1)
 CurrentIndex=0;
 gallery.setSelection(CurrentIndex,true);
 txt.setText(String.valueOf(CurrentIndex));
 break;
 case R.id.btnPrev:
 //Decrease the index
 CurrentIndex=CurrentIndex-1;
 //If reached the first item, then return to the last item in the gallery
 if(CurrentIndex<0)
 CurrentIndex=ItemsInGallery-1;
 gallery.setSelection(CurrentIndex,true);
 txt.setText(String.valueOf(CurrentIndex));
 break;
 }
 }

you can download a sample program from here

Related Posts by Categories