-->



5/recent-posts/slider2

404

We Are Sorry, Page Not Found

Apologies, but the page you requested could not be found.

Home Page

Tutorial Android GridView Layout

By : On
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 on, centang 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.




    Google+ Linked In Pin It
    No comments:

    Subscribe to: Post Comments (Atom)
    All Rights Reserved by Tahu Koding © 2015 - 2016