Hai Sobat Coding Rakitan kali ini kita akan belajar menggunakan View Pager di Android Studio. View Pager sendiri merupakan sebuah widget yang disediakan oleh Android Studio untuk membuat tampilan list yang keren pada aplikasi. Dengan menggunakan PagerView kita dapat membuat tampilan aplikasi seperti slide, list file horizontal, dan masih banyak lagi.
Berikut contoh tampilan yang bisa dibuat dengan memanfaatkan widget View Pager.
Sedangkan untuk tampilan yang akan kita buat nantinya akan tampak seperti berikut.
Berikut adalah daftar file baik Class, layout, ataupun drawable yang akan dibuat dalam tutorial kali ini.
Selain itu ada beberapa data berupa array yang diperlukan dalam mengisi card yang akan di tampilkan dalam View Pager nantinya. Cara membuat array ini anda tinggal klik kanan pada folder values -> New -> Value resources file, lalu beri nama array. Selanjutnya isi dengan kode seperti dibawah ini.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="judul">
<item>Google</item>
<item>Coding Rakitan</item>
<item>Facebook</item>
</string-array>
<string-array name="text">
<item>Google merupakan website mesin pencari ...</item>
<item>Coding Rakitan merupakan sebuah blog. . . </item>
<item>Salah satu media sosial yang paling . . .</item>
</string-array>
<string-array name="gambar">
<item>a</item>
<item>b</item>
<item>c</item>
</string-array>
</resources>
Langsung saja untuk membuat tampilan seperti di atas menggunakan View Pager silahkan buka Android Studio anda. Buat sebuah project baru dengan format sperti dibawah.
- Name : Belajar Pagerview
- Package name : codingrakitan.blogspot.com.belajarpagerview (Atur sesuai keinginan)
- Language : Java
- Minimum API Level : API17 Android 4.2 (Jelly Bean)
- Chose Your Project : Empty Activity
Bagi pemula yang belum tahu cara membuat project baru silahkan kunjungi Cara Membuat Project Baru di Android Studio.
Setelah project baru selesai dibuat, lanjut ke tahap menambahkan dependencies yaitu "implementation 'com.android.support:support-v4:28.0.0'" kedalam file build.grandle (Module.app). Sehingga nantinya dependencies kita akan tampak seperti berikut.
Atau cara cepatnya silahkan klik ikon download seperti pada gambar di bawah.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.android.support:support-v4:28.0.0'
}
MainActivity
public class MainActivity extends AppCompatActivity {
TextView a, b;
ViewPager pagerView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
a = findViewById(R.id.a);
b = findViewById(R.id.b);
pagerView = findViewById(R.id.pager);
isiViewPager();
}
private void isiViewPager() {
Resources res = getResources();
String[] judul = res.getStringArray(R.array.judul);
String[] text = res.getStringArray(R.array.text);
String[] gambar = res.getStringArray(R.array.gambar);
AdapterViewPager adapter = new AdapterViewPager();
b.setText(""+judul.length);
for (int i=0;i<judul.length;i++){
adapter.addCardItem(new ModelItem(judul[i], text[i], gambar[i]));
}
pagerView.setAdapter(adapter);
pagerView.setOffscreenPageLimit(3);
pagerView.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
int p = i+1;
a.setText(""+p);
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
}
AdapterViewPager
public class AdapterViewPager extends PagerAdapter {
private List<ModelItem> mData;
private Context context;
public AdapterViewPager() {
mData = new ArrayList<>();
}
public void addCardItem(ModelItem item) {
mData.add(item);
}
@Override
public int getCount() {
return mData.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(container.getContext())
.inflate(R.layout.cardw, container, false);
TextView judul = view.findViewById(R.id.tv_judul);
TextView text = view.findViewById(R.id.tv_text);
judul.setText(mData.get(position).getJudul());
text.setText(mData.get(position).getText());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
ModelItem
public class ModelItem{
String judul, text, gambar;
public ModelItem(String judul, String text, String gambar){
this.judul = judul;
this.text = text;
this.gambar = gambar;
}
public String getJudul() {
return judul;
}
public void setJudul(String judul) {
this.judul = judul;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getGambar() {
return gambar;
}
public void setGambar(String gambar) {
this.gambar = gambar;
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#E8E8E8"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp">
<TextView
android:id="@+id/a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:textColor="@android:color/black"
android:textSize="24sp" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="/"
android:textColor="@android:color/black"
android:textSize="24sp" />
<TextView
android:id="@+id/b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-"
android:textColor="@android:color/black"
android:textSize="24sp" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:overScrollMode="never"
android:paddingLeft="50dp"
android:paddingEnd="50dp"
android:paddingRight="50dp" />
</LinearLayout>
cardw.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:orientation="vertical"
android:padding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="370dp"
android:background="@android:color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="@android:color/holo_blue_dark"
android:orientation="vertical" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<TextView
android:id="@+id/tv_judul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="@+id/tv_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:text="TextView" />
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:background="@color/colorAccent"
android:text="More"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>
