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:
and in the OnCreate method
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:
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.
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:
now in order to keep track of the index of the currently selected item we need to define two variables
and the navigation buttons click handlers:
Read More..
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
ArrayAdapterarr=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:
@Overrideyou can download a sample program from here
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;
}
}
