Monday, March 14, 2016

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:
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);
10gallery.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.

01final String [] text=new String[]{"Hello","Hi","Alloha","Bonjour","Hallo","¡Hola"};
02gallery.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 }
you can download a sample program from here

Related Posts by Categories

0 comments:

Post a Comment