Membuat GridView di android

Gridview adalah ViewGroup yang menampilkan item dalam dua dimensi, kotak digulir. Item jaringan secara otomatis dimasukkan ke tata letak menggunakan ListAdapter . GridView di android sering digunakan untuk menampilkan data yang formatnya gambar atau kombinasi gambar dan teks.

Dalam pembahasan kali ini kita membuat grid thumbnail image, mari kita mulai mempraktekannya :

1. Kita buat project dengan nama DataGriedView -> pilih blank activity

2. lalu kita copy 2 file image ke res/drawable/ berinama sample_1.jpg, sample_2.jpg

3. Buka file layout/activity_main.xml lalu kita masukan code berikut :

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"    android:layout_height="match_parent" android:fitsSystemWindows="true"    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>


    <GridView xmlns:android="http://schemas.android.com/apk/res/android"        android:id="@+id/gridview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:columnWidth="90dp"        android:numColumns="auto_fit"        android:verticalSpacing="10dp"        android:horizontalSpacing="10dp"        android:stretchMode="columnWidth"        android:gravity="center"        />

</android.support.design.widget.CoordinatorLayout>

 4. Buka file MainActivity lalu masukan code berikut :

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        GridView gridview = (GridView) findViewById(R.id.gridview);
        gridview.setAdapter(new ImageAdapter(this));

        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View v,
                                    int position, long id) {
                Toast.makeText(MainActivity.this, "" + position,
                        Toast.LENGTH_SHORT).show();
            }
        });
    }

}

5. Lalu kita buat class baru dengan nama ImageAdapter extends BaseAdapter :

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

/** * Created by WEBDEV on 2/29/2016. */public class ImageAdapter extends BaseAdapter {

    private Context mContext;

    public ImageAdapter(Context c){
        mContext = c;
    }

    public int getCount() {
        return mThumbIds.length;
    }

    public Object getItem(int position) {
        return null;
    }

    public long getItemId(int position) {
        return 0;
    }

    // create a new ImageView for each item referenced by the Adapter    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }

        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }


    //data images    private Integer[] mThumbIds = {
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2,
            R.drawable.sample_1, R.drawable.sample_2    };
}

File ImageAdapter ini mewarisi fungsi BaseAdapter, seperti getCount(), getItem(int), dan getItemId(int),  untuk getItem() dan getItemId() belum kita gunakan disini.
Dalam file ini constructor getView() meciptakan view baru untuk setiap gambar yang ditambahkan di ImageAdapter.

6. Jalankan aplikasinya

Oke sekian pembahasan kita kali ini untuk GridView, silahkan dikembangkan untuk penggunaan gridview ini semoga bermanfaat.


Download Code

Tweet

Postingan terkait:

Ditulis Unknown — Monday, February 29, 2016 — Add Comment — Android, Android studio