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 let's see how to create a gallery that displays the word "Hello" in several languages:

the layout:

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:orientation="vertical"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06

>

07

<TextView

08	android:layout_width="fill_parent"

09	android:layout_height="wrap_content"

10	android:text="Gallery Demo"

11

/>

12

<Gallery

13	android:id="@+id/gallery"

14	android:layout_width="fill_parent"

15	android:layout_height="wrap_content"

16	android:gravity="center_horizontal"

17	android:spacing="100px"

18

19

/>

20	</LinearLayout>

and in the OnCreate method

01

@Override

02	public void onCreate(Bundle savedInstanceState) {

03	super.onCreate(savedInstanceState);

04	setContentView(R.layout.main);

05	gallery=(Gallery)findViewById(R.id.gallery);

06	//String array holding the values

07	String [] text=new String[]{"Hello","Hi","Alloha","Bonjour","Hallo","¡Hola"};

08	//Array adapter to display our values in the gallery control

09	ArrayAdapter<string> arr=new ArrayAdapter<string>(this, android.R.layout.simple_gallery_item, text);

10	gallery.setAdapter(arr);

11

}

12	</string></string>

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:

01

<Gallery

02	android:id="@+id/gallery"

03	android:layout_width="fill_parent"

04	android:layout_height="wrap_content"

05	android:gravity="center_horizontal"

06	android:spacing="100px"

07	android:scrollbars="horizontal"

08	android:scrollbarFadeDuration="0"

09	android:scrollX="100px"

10

/>

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.

01	final String [] text=new String[]{"Hello","Hi","Alloha","Bonjour","Hallo","¡Hola"};

02	gallery.setOnItemSelectedListener(new OnItemSelectedListener() {

03

04

@Override

05	public void onItemSelected(AdapterView parent, View view,

06	int position, long id) {

07	// TODO Auto-generated method stub

08	TextView txt=(TextView)findViewById(R.id.txt);

09	txt.setText(text[position].toString());

10

}

11

12

@Override

13	public void onNothingSelected(AdapterView parent) {

14	// TODO Auto-generated method stub

15

16

}

17

});

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:

01	<?xml version="1.0" encoding="utf-8"?>

02	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:orientation="vertical"

04	android:layout_width="fill_parent"

05	android:layout_height="fill_parent"

06

>

07

<TextView

08	android:layout_width="fill_parent"

09	android:layout_height="wrap_content"

10	android:text="Gallery Demo"

11	android:id="@+id/txt"

12

/>

13

<Gallery

14	android:id="@+id/gallery"

15	android:layout_width="fill_parent"

16	android:layout_height="wrap_content"

17	android:gravity="center_horizontal"

18	android:spacing="100px"

19	android:scrollbars="horizontal"

20	android:scrollbarFadeDuration="0"

21	android:scrollX="100px"

22

/>

23	<LinearLayout

24	android:layout_width="fill_parent"

25	android:layout_height="wrap_content"

26	android:orientation="horizontal"

27	android:layout_marginTop="5px"

28

>

29

<Button

30	android:text="Previous"

31	android:layout_width="wrap_content"

32	android:layout_height="wrap_content"

33	android:id="@+id/btnPrev"

34	android:onClick="onClick"

35

/>

36

<Button

37	android:text="Next"

38	android:layout_width="wrap_content"

39	android:layout_height="wrap_content"

40	android:id="@+id/btnNext"

41	android:onClick="onClick"

42

/>

43

44	</LinearLayout>

45

46	</LinearLayout>

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

1	//Variable to store the number of items in the gallery

2	int ItemsInGallery=0;

3	int CurrentIndex=0;

and the navigation buttons click handlers:

01

@Override

02	public void onClick(View v) {

03	// TODO Auto-generated method stub

04	switch(v.getId())

05

{

06	case R.id.btnNext:

07	//Increase the index

08	CurrentIndex++;

09	//if reached the end of the gallery, then start from the first item

10	if(CurrentIndex>ItemsInGallery-1)

11	CurrentIndex=0;

12	gallery.setSelection(CurrentIndex,true);

13	txt.setText(String.valueOf(CurrentIndex));

14

break;

15	case R.id.btnPrev:

16	//Decrease the index

17	CurrentIndex=CurrentIndex-1;

18	//If reached the first item, then return to the last item in the gallery

19	if(CurrentIndex<0)

20	CurrentIndex=ItemsInGallery-1;

21	gallery.setSelection(CurrentIndex,true);

22	txt.setText(String.valueOf(CurrentIndex));

23

break;

24

}

25

}

you can download a sample program from here