Komponen yang digunakan dalam proyek ini adalah ViewPager dan Imageview. Dengan bantuan ViewPager kita akan membuat Image Slider beserta indikatornya. Mari kita mulai dengan menerapkan Penggeser Gambar dengan ViewPager di Android.
activity_main.xml hanya terdiri dari button dan textview seperti di bawah ini:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="35dp">
<TextView
android:id="@+id/activity_mainTextView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Happy codx"
android:gravity="center"
android:textSize="30sp"
android:textColor="#FF000000"
android:textStyle="bold"
android:layout_marginBottom="8dp"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Slider gambar di dalam kustom dialog"
android:gravity="center"
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#FF000000"
android:layout_below="@+id/activity_mainTextView"
android:layout_centerHorizontal="true"/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="klik here"
android:textStyle="bold"
android:id="@+id/activitymainButton1"
android:layout_centerInParent="true"/>
</RelativeLayout>
Untuk menampilkan Dialog nya kita buat file dengan nama kustom_dialog.xml di dalam layout folder dengan baris kode seperti di bawah ini:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center">
<RelativeLayout
android:id="@+id/kustom_dialogRelativeLayout"
android:layout_width="295dp"
android:layout_height="220dp"
android:background="@drawable/background_dialog"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center"
android:padding="3dp"
android:orientation="vertical"
android:layout_marginBottom="10dp"
android:layout_toRightOf="@+id/left">
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.viewpagerindicator.CirclePageIndicator
android:id="@+id/page_indicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillColor="#FFFFE582"
android:strokeColor="#FFFFE582"
android:layout_alignParentBottom="true"
android:paddingBottom="5dp"/>
</RelativeLayout>
</RelativeLayout>
File: pager_list_item.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/gambar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:scaleType="centerCrop"/>
</LinearLayout>
Buat string tipe, Integer, atau daftar BaseItem. Pustaka ini berisi kelas BaseItem untuk memperluas item Anda.
Kita juga dapat menerapkan animasi dan membuat efek slide yang agak menarik dengan PageTransformer. PageTransformer adalah add-on yang bagus tentang apa yang dapat kita lakukan dengan ViewPager konvensional. Kita akan membuat kelas yang berbeda untuk transisi yang berbeda dan Anda dapat menerapkan efek transisi dengan memanggil metode setPageTransformer() ke pager tampilan Anda.
File: MainActivity.java
package com.happycodx.example;
import android.app.Activity;
import android.widget.Button;
import android.os.Bundle;
import android.view.Window;
import android.view.View;
import android.app.Dialog;
import java.util.ArrayList;
import java.util.List;
import android.graphics.drawable.ColorDrawable;
import android.graphics.Color;
import android.support.v4.view.ViewPager;
import com.viewpagerindicator.CirclePageIndicator;
import android.support.v4.view.PagerAdapter;
import android.content.Context;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.ImageView.ScaleType;
public class MainActivity extends Activity {
Button btnModal;
Button btnModal_left;
Button btnModal_right;
private int[] sliderItems = {
R.drawable.gbr1,
R.drawable.gbr2,
R.drawable.gbr3,
R.drawable.gbr4,
R.drawable.gbr5
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btnModal = findViewById(R.id.activitymainButton1);
btnModal.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
kustomModal();
}
});
}
public void kustomModal() {
Dialog dlog1 = new Dialog(this);
dlog1.requestWindowFeature(Window.FEATURE_NO_TITLE);
dlog1.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
dlog1.setContentView(R.layout.kustom_dialog);
TestAdapter adapter = new TestAdapter();
final ViewPager vPager = (ViewPager) dlog1.findViewById(R.id.pager);
vPager.setAdapter(adapter);
vPager.setPageTransformer(true, new DepthPageTransformer());
CirclePageIndicator pgId1 = (CirclePageIndicator) dlog1.findViewById(R.id.page_indicator);
pgId1.setViewPager(vPager);
pgId1.setCurrentItem(0);
dlog1.show();
}
private class TestAdapter extends PagerAdapter{
int NumberOfPages = 5;
@Override
public int getCount() {
return NumberOfPages;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(View container, int position) {
ImageView imageView = new ImageView(MainActivity.this);
imageView.setScaleType(ScaleType.FIT_XY);
imageView.setImageResource(sliderItems[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView((View) object);
}
}
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage( View page, float position ) {
int pageWidth = page.getWidth();
if ( position < -1 ) { // [ -Infinity,-1 )
// This page is way off-screen to the left.
page.setAlpha( 0 );
} else if ( position <= 0 ) { // [-1,0]
// Use the default slide transition when moving to the left page
page.setAlpha( 1 );
page.setTranslationX( 0 );
page.setScaleX( 1 );
page.setScaleY( 1 );
} else if ( position <= 1 ) { // (0,1]
// Fade the page out.
page.setAlpha( 1 - position );
// Counteract the default slide transition
page.setTranslationX( pageWidth * -position );
// Scale the page down ( between MIN_SCALE and 1 )
float scaleFactor = MIN_SCALE
+ ( 1 - MIN_SCALE ) * ( 1 - Math.abs( position ) );
page.setScaleX( scaleFactor );
page.setScaleY( scaleFactor );
} else { // ( 1, +Infinity ]
// This page is way off-screen to the right.
page.setAlpha( 0 );
}
}
}
}
Hasil: