Membuat Grid View Image pada Android

Membuat Grid View Image Demo

Desain di activity_main.xml

Sorce code di activity_main.xml

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.duwibayupratomo.gridviewimagedemo.MainActivity"

tools:ignore="MergeRootFrame">

<TextView

android:id="@+id/txtCommand"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="@string/text_command"

android:textAppearance="?android:attr/textAppearanceMedium"/>

<GridView

android:id="@+id/gridViewImage"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="1dp"

android:gravity="center"

android:columnWidth="100dp"

android:horizontalSpacing="5dp"

android:verticalSpacing="10dp"

android:stretchMode="columnWidth"

android:numColumns="auto_fit">

</GridView>

</LinearLayout>

Source code di MainActivity.java

package com.duwibayupratomo.gridviewimagedemo;

import android.app.Activity;

importandroid.app.ActionBar;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.Button;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.TextView;

importandroid.os.Build;

publicclass MainActivity extends Activity implements OnItemClickListener{

     

      TextView txtMessage;

      GridView gridViewImage;

     

     

      TextView txtSingleMessage;

      ImageView imageSinglePicture;

      Button btnBack;

     

     

      //Inisial Array untukGambar

      Integer [] smallImages = {R.drawable.pic1_small};

     

      Integer [] largeImages = {R.drawable.pic1_large};

     

     

      Bundle originalMemoryBundle;

     

     

      @Override

      protectedvoid onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

            if (savedInstanceState == null) {

                  getFragmentManager().beginTransaction()

                              .add(R.id.container, new PlaceholderFragment()).commit();

            }

           

            gridViewImage = (GridView)findViewById(R.id.gridViewImage);

            gridViewImage.setAdapter(new ImageAdapter(this, smallImages));

            gridViewImage.setOnItemClickListener(this);

      }

      @Override

      publicboolean onCreateOptionsMenu(Menu menu) {

            // Inflate the menu; this adds items to the action bar if it is present.

            getMenuInflater().inflate(R.menu.main, menu);

            returntrue;

      }

      @Override

      publicboolean onOptionsItemSelected(MenuItem item) {

            // Handle action bar item clicks here. The action bar will

            // automatically handle clicks on the Home/Up button, so long

            // as you specify a parent activity in AndroidManifest.xml.

            int id = item.getItemId();

            if (id == R.id.action_settings) {

                  returntrue;

            }

            returnsuper.onOptionsItemSelected(item);

      }

      /**

       * A placeholder fragment containing a simple view.

       */

      publicstaticclass PlaceholderFragment extends Fragment {

            public PlaceholderFragment() {

            }

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                        Bundle savedInstanceState) {

                  View rootView = inflater.inflate(R.layout.fragment_main, container,

                              false);

                  return rootView;

            }

      }

      @Override//merupakanuntukmengklik agar image tampakdi layout lain

      publicvoid onItemClick(AdapterView<?> parent, View v, int position, long id) {

            // TODO Auto-generated method stub

            showLargeImage(position);

      }

      privatevoid showLargeImage(int position) {

            // TODO Auto-generated method stub

            setContentView(R.layout.single_picture);

            txtSingleMessage = (TextView)findViewById(R.id.txtSingleMessage);

            imageSinglePicture = (ImageView)findViewById(R.id.imageSinglePicture);

            btnBack = (Button)findViewById(R.id.btnBack);

           

            txtSingleMessage.setText("Image "+position);

            imageSinglePicture.setImageResource(largeImages[position]);

           

            btnBack.setOnClickListener(new OnClickListener() {

                 

                  @Override

                  publicvoid onClick(View v) {

                        // TODO Auto-generated method stub

                        onCreate(originalMemoryBundle);

                  }

            });

           

           

      }

}

Source Code di String.xml

<?xmlversion="1.0"encoding="utf-8"?>

<resources>

<stringname="app_name">GridViewImageDemo</string>

<stringname="hello_world">Hello world!</string>

<stringname="action_settings">Settings</string>

<stringname="text_command">Tap to choose</string>

<stringname="back_button">Back</string>

<stringname="single_image_description">This iiissss</string>

</resources>

Buat Layout Baru dengan nama single_picture.xml

Source code di single_picture.xml

<?xmlversion="1.0"encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<TextView

android:id="@+id/txtSingleMessage"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text=""

android:textAppearance="?android:attr/textAppearanceMedium"/>

<ImageView

android:id="@+id/imageSinglePicture"

android:layout_width="match_parent"

android:layout_height="0dip"

android:layout_gravity="center|fill"

android:layout_weight="2"

android:contentDescription="@string/single_image_description"

android:src="@drawable/ic_launcher"/>

<Button

android:id="@+id/btnBack"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal"

android:text="@string/back_button"/>

</LinearLayout>

Kemudian buat Class java baru dengan nama ImageAdapter

Dan berikut ini codenya

package com.duwibayupratomo.gridviewimagedemo;

import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

publicclass ImageAdapter extends BaseAdapter {

      private Context context;

      Integer [] smallImages;

     

      public ImageAdapter (Context currentActivityContext, Integer [] thumnails){

            context = currentActivityContext;

            smallImages = thumnails;

      }

     

      @Override

      publicint getCount() {

            // TODO Auto-generated method stub

            returnsmallImages.length;

      }

      @Override

      public Object getItem(int position) {

            // TODO Auto-generated method stub

            returnsmallImages[position];

      }

      @Override

      publiclong getItemId(int position) {

            // TODO Auto-generated method stub

            return position;

      }

      @Override

      public View getView(int position, View convertView, ViewGroup parent) {

            // TODO Auto-generated method stub

            ImageView imageView ;

           

            if (convertView == null) {

                  imageView = new ImageView(context);

                  imageView.setLayoutParams(new GridView.LayoutParams(100, 75));

                  imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

                  imageView.setPadding(5, 5, 5, 5);

                 

            }else{

                  imageView = (ImageView) convertView;

            }

            imageView.setImageResource(smallImages[position]);

            return imageView;

      }

}