Tutorial Android GridView Layout

Layout/Tata letak GridView adalah salah satu tata letak yang juga penting di android. Gridview terutama berguna ketika kita ingin menampilkan data di grid layout seperti menampilkan gambar atau ikon. Tata letak ini dapat digunakan untuk membangun aplikasi seperti penampilan gambar, pemutar audio atau video untuk menunjukkan elemen.

Membuat Project Android

1. Pada Android Studio, buatlah project baru.
     => Jika Anda tidak memiliki sebuah project, di layar Welcome klik New Project.
     => Jika Anda telah membuka project, dari menu File, pilih New Project.

    2. Pada Configure your new project, isi kolom berikut seperti di bawah ini.
     => Application name ⇒ GridView
     => Company domain ⇒ example.com (Misalnya: com.tahukoding.GridView)
     => Project Location ⇒ memilih lokasi untuk project Anda.

    3. Pada Select the form factors your app will run oncentang untuk Phone and Tablet.
     => Untuk Minimum SDK, pilih API 14: Android 4.0 (IceCreamSandwich). klik Next.

    4. Pada Add an activity to Mobile, pilih Blank Activity dan klik Next.
    Next ->

    5. Klik tombol Finish untuk membuat project.
    6. Pilih View Anda sebagai Project, Buka file layout untuk kegiatan utama (activity_main.xml) terletak di bawah App  res ⇒ layout.

    activity_main.xml


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        tools:context="gridview.tahukoding.com.gridview.MainActivity">
        
        <GridView
            android:id="@+id/grid"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:numColumns="auto_fit"
            android:columnWidth="90dp"
            android:horizontalSpacing="10dp"
            android:verticalSpacing="10dp"
            android:gravity="center"
            android:stretchMode="columnWidth" >
    
        </GridView>
    
    </RelativeLayout>

    7. Siapkan gambar yang Anda ingin tampilkan dalam tata letak grid dan menempatkan pada folder res ⇒ drawable

    8. Buat Kelas baru dengan mengklik kanan pada src ⇒ package folder ⇒ New ⇒ Class dan beri nama sebagai ImageAdapter.java

    ImageAdapter.java
    package gridview.tahukoding.com.gridview;
    
    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 ASUS on 12/17/2016.
     */
    
    public class ImageAdapter extends BaseAdapter {
    
        private Context mContext;
    
        public Integer[] mThumbIds = {
                R.drawable.ad1, R.drawable.ad2,
                R.drawable.ad3, R.drawable.ad4,
                R.drawable.ad5, R.drawable.ad6,
                R.drawable.ad7, R.drawable.ad8,
                R.drawable.ad9, R.drawable.ad10,
                R.drawable.ad11, R.drawable.ad12,
        };
    
        public ImageAdapter(Context c){
    
            mContext = c;
        }
    
        @Override
        public int getCount() {
            return mThumbIds.length;
        }
    
        @Override
        public Object getItem(int position) {
            return mThumbIds[position];
        }
    
        @Override
        public long getItemId(int position) {
            return 0;
        }
    
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView = new ImageView(mContext);
            imageView.setImageResource(mThumbIds[position]);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setLayoutParams(new GridView.LayoutParams(320, 400));
            return imageView;
        }
    }

    9. Sekarang Buka MainActivity.java terletak di app ⇒ src ⇒ Java dan copy kode di bawah ini.

    MainActivity.java
    package gridview.tahukoding.com.gridview;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.GridView;
    
    
    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            GridView gridView = (GridView) findViewById(R.id.grid);
    
            gridView.setAdapter(new ImageAdapter(this));
        }
    }

    Nah, sekarang coba jalankan dan hasilnya akan seperti gambar berikut.

    Menampilkan gambar dengan Full Screen ketika gambar dipilih.

    Sekarang kita menampilkan semua gambar dalam tata letak grid. Selanjutnya kita akan menambahkan fungsi menunjukkan gambar yang dipilih dengan fullscreen. 
    10. Membuat file XML baru pada folder layout dan nama sebagai full_image.xml dan mengisinya dengan kode berikut.

    full_image.xml
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <ImageView
            android:id="@+id/full_image"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    
    </LinearLayout>

    11. Buat Kelas baru dengan mengklik kanan pada src ⇒ package folder ⇒ New ⇒ Class dan beri nama sebagai FullImageActivity.java

    FullImageActivity.java
    package gridview.tahukoding.com.gridview;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.media.Image;
    import android.os.Bundle;
    import android.widget.ImageView;
    
    /**
     * Created by ASUS on 12/18/2016.
     */
    
    public class FullImageActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.full_image);
    
            Intent i = getIntent();
    
            int position = i.getExtras().getInt("id");
            ImageAdapter imageAdapter = new ImageAdapter(this);
    
            ImageView imageView = (ImageView) findViewById(R.id.full_image);
            imageView.setImageResource(imageAdapter.mThumbIds[position]);
    
        }
    }

    12. Tambahkan koding pada MainActivity.java menjadi seperti berikut.

    MainActivity.java
    package gridview.tahukoding.com.gridview;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.GridView;
    
    
    public class MainActivity extends Activity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            GridView gridView = (GridView) findViewById(R.id.grid);
    
            gridView.setAdapter(new ImageAdapter(this));
    
            gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
    
                    Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                    i.putExtra("id", position);
                    startActivity(i);
    
                }
            });
    
        }
    }

    13. Buka AndroidManifest.xml dan menambahkan koding menjadi seperti berikut.

    AndroidManifest.xml
    <?xml version="1.0" encoding="utf-8"?>
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
        package="gridview.tahukoding.com.gridview">
    
        <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />
    
                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>
    
            <activity android:name=".FullImageActivity"></activity>
    
        </application>
    
    </manifest>

    Sekarang coba jalankan programnya, dan inilah hasilnya.





    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel