Sharing Knowledge

« Menu on Android | Main | From Training to... »
Monday May 24, 2010

Android Display Image

Sejauh ini kita telah belajar untuk menampilkan text informasi di Android. Sedangkan untuk menampilkan gambar kita bisa menggunakan Grid View, Gallery maupun Image Switcher.

1. Grid View
Tampilan GridView menampilkan item dalam dua dimensi scrolling grid. Anda dapat menggunakan tampilan GridView bersama-sama dengan ImageView untuk menampilkan serangkaian gambar. Simpan gambar yang akan ditampilkan di res / drawable.

main.xml

  <?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:verticalSpacing="10dp"
    android:horizontalSpacing="10dp"
    android:columnWidth="90dp"
    android:stretchMode="columnWidth"
    android:gravity="center"
/>

DisplayImage.java
 package android.displayImage;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
 
public class DisplayImage extends Activity
{    
    //---the images to display---
    Integer[] imageIDs = {
            R.drawable.pic1,
            R.drawable.pic5,
            R.drawable.pic6,
            R.drawable.pic7

    };
 
    @Override    
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new ImageAdapter(this));
 
        gridView.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView parent,
            View v, int position, long id)
            {                
                Toast.makeText(getBaseContext(),
                        "pic" + (position + 1) + " selected",
                        Toast.LENGTH_SHORT).show();
            }
        });        
    }
 
    public class ImageAdapter extends BaseAdapter
    {
        private Context context;
 
        public ImageAdapter(Context c)
        {
            context = c;
        }
 
        //---returns the number of images---
        public int getCount() {
            return imageIDs.length;
        }
 
        //---returns the ID of an item---
        public Object getItem(int position) {
            return position;
        }
 
        public long getItemId(int position) {
            return position;
        }
 
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent)
        {
            ImageView imageView;
            if (convertView == null) {
                imageView = new ImageView(context);
                imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
                imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                imageView.setPadding(5, 5, 5, 5);
            } else {
                imageView = (ImageView) convertView;
            }
            imageView.setImageResource(imageIDs[position]);
            return imageView;
        }
    }    
}

                                                              Gambar 1 Grid View


2.ImageSwitcher
Pada awalnya ImageSwitcher akan menampilkan serangkaian gambar dalam ukuran kecil, namun ketika salah satu gambar dipilih gambar akan ditampilkan pada tampilan ImageView sehingga ukuran gambar menjadi full screen. Perhatikan kode ? kode berikut untuk membuat contoh ImageSwitcher.

main.xml

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ff000000"
    >
 
    <ImageSwitcher
        android:id="@+id/switcher1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"                
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"     
        />
    <Gallery
        android:id="@+id/gallery1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"      
        />
 
</RelativeLayout>

Image.java
  package android.displayImage;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AnimationUtils;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.Gallery.LayoutParams;
import android.widget.ViewSwitcher.ViewFactory;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.AdapterView.OnItemClickListener;
 
public class Image extends Activity
implements ViewFactory
{    
    //---the images to display---
    Integer[] imageIDs = {
          R.drawable.pic1,
          R.drawable.pic2,
          R.drawable.pic3,
          R.drawable.pic4,
          R.drawable.pic5
           
    };
 
    private ImageSwitcher imageSwitcher;
 
    @Override    
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        imageSwitcher = (ImageSwitcher) findViewById(R.id.switcher1);
        imageSwitcher.setFactory(this);
        imageSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_in));
        imageSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
                android.R.anim.fade_out));
 
        Gallery gallery = (Gallery) findViewById(R.id.gallery1);
        gallery.setAdapter(new ImageAdapter(this));
        gallery.setOnItemClickListener(new OnItemClickListener()
        {
            public void onItemClick(AdapterView parent,
            View v, int position, long id)
            {                
                imageSwitcher.setImageResource(imageIDs[position]);
            }
        });  
    }
 
    public View makeView()
    {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundColor(0xFF000000);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(new
                ImageSwitcher.LayoutParams(
                        LayoutParams.FILL_PARENT,
                        LayoutParams.FILL_PARENT));
        return imageView;
    }
 
    public class ImageAdapter extends BaseAdapter
    {
        private Context context;
        private int itemBackground;
 
        public ImageAdapter(Context c)
        {
            context = c;
                                           
        }
 
        //---returns the number of images---
        public int getCount()
        {
            return imageIDs.length;
        }
 
        //---returns the ID of an item---
        public Object getItem(int position)
        {
            return position;
        }
 
        public long getItemId(int position)
        {
            return position;
        }
 
        //---returns an ImageView view---
        public View getView(int position, View convertView, ViewGroup parent)
        {
            ImageView imageView = new ImageView(context);
            imageView.setImageResource(imageIDs[position]);
            imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            imageView.setLayoutParams(new Gallery.LayoutParams(150, 120));
            imageView.setBackgroundResource(itemBackground);
            return imageView;
        }
   }    
    }

 


                                                        Gambar 1 Image Switcher


 

_netoya_

Posted at 03:02PM May 24, 2010 by nety ozora in General  |  Comments[0]

Comments:

Post a Comment:
  • HTML Syntax: Allowed