Hai sobat, pada artikel sebelumnya yang berjudul Membuat Aplikasi WebView di Android, telah dijelaskan cara menampilkan halaman web dalam aplikasi android. Dan kali ini kita akan mencar ilmu menciptakan aplikasi menampilkan gallery foto memakai objek ViewPager, berikut caranya.
Dalam sebuah aplikasi bisanya diperlukan fungsi untuk menampilkan gambar beserta keterangannya secara berurutan untuk memperlihatkan informasi kepada pengguna. Dan untuk menciptakan fungsi ibarat itu kita dapat memakai objek ViewPager. ViewPager ialah manager Layout yang memungkinkan pengguna untuk mengeser layout ke kanan atau ke kiri melalui halaman data. ViewPager sering dipakai dengan Fragment untuk mempermudah mengelola siklus hidup Activity.
Pada kesempatan kali ini kita akan mencar ilmu mengunakan objek ViewPager di aplikasi Gallery Android, alasannya ialah nantinya gambar yang akan ditampilkan akan dapat digeser ke kanan atau ke kiri. Untuk lebih jelasnya, silahkan teman simak langkah-langkah di bawah ini :
Pertama teman buat project gres dengan nama Galleri Foto, sedangkan untuk package beri nama blogsetyaaji.com. Setelah project siap, silahkan teman siapkan gambar dan masukkan ke dalam folder drawable. Untuk menambahkan gambar ke dalam folder drawable, silahkan teman dapat lihat di sini.
Setelah selesai, buka file activity_main.xml dan buat arahan untuk menempatkan arahan ViewPager ibarat berikut ini
<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.blogsetyaaji.gallerifoto.MainActivity"> <android.support.v4.view.ViewPager android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/pager"/> </RelativeLayout> Selanjutnya untuk menampilkan gambar dan goresan pena pada galleri, teman harus menambahka layout gres dengan cara mengklik kanan pada folder layout dan pilih new > layout resource file ibarat gambar di bawah
 |
| Menambah file layout |
 |
| Menambah file java |
Jika sudah, beri nama galeri_item.xml dan silahkan buat kodenya menjadi ibarat berikut ini
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView" android:text="New Text" android:textAppearance="?android:attr/textAppearanceLarge"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textView2" android:text="New Text" android:textAppearance="?android:attr/textAppearanceMedium"/> <ImageView android:layout_width="match_parent" android:layout_height="500dp" android:id="@+id/imgItem" android:src="@drawable/rendang"/> </LinearLayout> </ScrollView> Layout sudah, kini pindah ke java, buka MainActivity.java dan buat kodenya ibarat di bawah ini
package com.blogsetyaaji.gallerifoto; import android.app.Activity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; public class MainActivity extends AppCompatActivity { ViewPager viewPager; PagerAdapter adapter; String[] judul; String[] keterangan; int[] gambar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); judul = new String[]{ "Cumi Pedas", "Perkedel Gurih", "Rendang Padang" }; keterangan = new String[] { "Masakan yummy darimolahan cumi yang lembut dan enak, fresh dari laut", "Perkedel sebgai lauk yang banyak disukai, selain gurih dan yummy juga banyak gizi", "Rendang khas Padang, dagiing yang lembut " }; gambar = new int[] { R.drawable.cumi, R.drawable.perkedel, R.drawable.rendang }; viewPager = (ViewPager) findViewById(R.id.pager); adapter = new ViewPagerAdapter(MainActivity.this,judul,keterangan,gambar); viewPager.setAdapter(adapter); } } Jika sudah, kita tambahkan satu file java lagi dengan nama ViewPageAdapter dan buat kodenya ibarat berikut ini
package com.blogsetyaaji.gallerifoto; import android.content.Context; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ScrollingView; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.ScrollView; import android.widget.TextView; /** * Created by AJISETYA on 8/2/2016. */ public class ViewPagerAdapter extends PagerAdapter { Context context; int[] flag; String[] judul; String[] keterangan; LayoutInflater inflater; public ViewPagerAdapter(Context context, String[] judul, String[] keterangan, int[] flag) { this.context = context; this.judul = judul; this.keterangan = keterangan; this.flag = flag; } @Override public int getCount() { return flag.length; } @Override public boolean isViewFromObject(View view, Object object) { return view == ((ScrollView) object); } @Override public Object instantiateItem(ViewGroup container, int position) { TextView teksJudul; TextView teksKeterangan; ImageView imgflag; inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); View itemView = inflater.inflate(R.layout.galeri_item, container, false); teksJudul = (TextView) itemView.findViewById(R.id.textView); teksKeterangan = (TextView) itemView.findViewById(R.id.textView2); teksJudul.setText(judul[position]); teksKeterangan.setText(keterangan[position]); imgflag = (ImageView) itemView.findViewById(R.id.imgItem); imgflag.setImageResource(flag[position]); ((ViewPager) container).addView(itemView); return itemView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager) container).removeView((ScrollView) object); } } Jika sudah, silahkan teman jalankan aplikasinya, dan tampilannya akan jadi ibarat gambar di bawah ini
Dan itu lah cara menciptakan gallery foto di android memakai viewpager biar bermanfaat. Silahkan teman kembangkan sendiri, dan nantika artikel berikutnya.
Tag :
Pemrograman,
Pemrograman Android
0 Komentar untuk "Membuat Gallery Foto Di Android Dengan Viewpager"