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:
you can download a sample program from here
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:
01 | <?xml version="1.0" encoding="utf-8"?> |
02 | <LinearLayout >="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 >="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 | } |
