Kotlin Basics for Modern Android Development

Tuesday, June 30, 2026 Add Comment

        
Halo Guys, saya kembali lagi setelah hampir 8 tahun vacuum menulis di blog. Saya bersyukur sampai hari ini diberikan kesehatan dan kesempatan lagi untuk mengamalkan ilmu yang sudah saya pelajari selama ini. Mudah-mudahan saya bisa konsisten lagi untuk memberikan edukasi ke teman-teman pembaca setia blog ini di tengah gempuran AI saat ini. Saya rasa teman-teman harus punya pengetahuan dasar-dasarnya agar tetap memiliki fundamental yang kuat ketimbang hanya mengandalkan AI saja tanpa tahu apa yang dibuat. Dari 8 tahun tentunya banyak sekali ilmu dan pengalaman yang sudah saya raih. Pada kesempatan kali ini, saya akan menulis lagi tentang Android Development setelah tertinggal jauh dari artikel sebelumnya dan sekarang banyak teknologi baru yang digunakan dalam mengembangkan aplikasi android. Oke langsung saja kali ini saya akan membahas tentang bahasa pemrograman kotlin yang saat ini menjadi teknologi utama di dunia Android Development dari yang sebelumnya menggunakan Java.

Kenapa Kotlin?
Kotlin adalah bahasa pemrograman modern untuk mengembangkan aplikasi jadi lebih mudah dan lebih produktif. Bahasa kotlin dirancang agar lebih ringkas, efisien, mudah dibaca, dan membantu mengurangi kesalahan yang sering terjadi saat menulis kode.
Pada tahun 2017, Google secara resmi mengumumkan kotlin sebagai bahasa resmi dalam pengembangan Android. Sejak saat itu, kotlin mendapat dukungan dari Google dan semakin banyak digunakan oleh developer di seluruh dunia.

Keunggulan Kotlin
Berikut ini adalah beberapa keunggulan kotlin :

1. Sintaks Lebih Ringkas
        Penulisan kode lebih singkat dibanding Java dan minim kode berulang (boilerplate).
2. Null Safety
        Fitur null safety membantu mencegah kesalahan akibat null, penyebab paling umum terjadi crash  pada aplikasi android.
3. Interoperabilitas dengan Java
        Kotlin dapat digunakan bersama Java dalam satu project termasuk memanfaatkan library Java yang sudah ada.
4. Resmi Didukung untuk Android
        Kotlin merupakan bahasa yang direkomendasikan oleh Google untuk pengembangan aplikasi Android
5. Coroutines
        Kotlin menyediakan fitur Coroutines untuk menjalankan proses asinkron dengan lebih mudah dan efisien.
6. Multiplatform
        Selain Android, Kotlin juga dapat digunakan untuk membangun aplikasi backend, web, ios dan desktop dalam Kotlin Multiplatform.
7. Dukungan Komunitas dan Ekosistem yang Berkembangan
        Dukungan dan popularitas kotlin terus meningkat sehingga dokumentasi, library, serta komunitas developer-nya semakin lengkap.

Kotlin Data Types, Variables and Operators

Data Type di kotlin terdiri dari :


Int, Double, Long, Float, Boolean, Char, String

Contohnya :

val age: Int = 30
val price: Double = 99.99
val isActive: Boolean = true
val grade: Char = 'A'
val name: String = "Wim"

Conditions and Booleans 

Kotlin memiliki Boolean dan Operator Boolean seperti :


<, ==, >, !=, <=, >=

Contohnya :

val isLoggedIn = true

val age = 25

println(age >= 18)
println(age < 18)

Untuk Condition sendiri terdiri dari :
- If Expression

val age = 25

if (age >= 18) {
    println("You are an adult")
}

- If Else Expression

val age = 15

if (age >= 18) {
    println("You are an adult")
} else {
    println("You are underage")
}

- Else If Expression

val score = 85

if (score >= 90) {
    println("Grade A")
} else if (score >= 80) {
    println("Grade B")
} else if (score >= 70) {
    println("Grade C")
} else {
    println("Grade D")
}

- If as an Expression
Salah satu keunikan di kotlin adalah if di kotlin dapat digunakan sebagai sebuah expression yang langsung mengembalikan sebuah nilai.

val age = 20

val status = if (age >= 18) {
    "Adult"
} else {
    "Underage"
}

println(status)

Fitur lainnya dari kotlin adalah membuat pengecekan rentang nilai menjadi lebih sederhana dalam Range operator (...). Kita akan coba menggunakan range dalam statement If.

val score = 85

if (score in 75..100) {
    println("Passed")
}

- When Statement
Secara definisi hampir sama dengan switch, tetapi jauh lebih fleksibel. Berikut contohnya :


val day = 1

when (day) {
    1 -> println("Monday")
    2 -> println("Tuesday")
    3 -> println("Wednesday")
    4 -> println("Thursday")
    5 -> println("Friday")
    else -> println("Weekend")
}


Arrays and Lists 

- Array adalah kumpulan data yang bersifat fixed size. Artinya tidak dapat ditambah atau dikurangi elemennya, kecuali di copy ke array baru.


val fruits = arrayOf("Apple", "Strawberry", "Watermelon")

Yang unik di kotlin adalah array tidak terikat pada tipe data element. Artinya kita bisa menggabungkan beberapa tipe data yang berbeda.

val mix = arrayOf("Apple", 20)

- List adalah kumpulan data yang lebih fleksibel dibandingkan array. List merupakan bagian dari Kotlin Collections yang mana kita bisa memanfaatkan fitur-fitur di dalamnya untuk mengolah data seperti filter(), map(), sorted(), dan find().
Ada dua jenis List di kotlin :
  • List (Immutable)
  • MutableList (Mutable)

Immutable List
Karena bersifat immutable, data hanya dapat dibaca dan tidak dapat diubah setelah dibuat.

val fruits = listOf("Apple", "Strawberry", "Watermelon")

println(fruits)

MutableList List
Kebalikannya dari Immutable List, data dapat ditambah, dihapus dan diubah.

val fruits = mutableListOf("Apple", "Strawberry", "Watermelon")
fruits.add("Orange")
fruits.remove("Watermelon")
fruits[0] = "Mango"

println(fruits)

Loops 

Looping atau perulangan dapat dilakukan di Array maupun di List


val fruits = listOf("Apple", "Strawberry", "Watermelon")

for (fruit in fruits) {
    println(fruit)
}

Output:

Apple
Strawberry
Watermelon

Jika ingin mengakses index dan value

val fruits = listOf("Apple", "Strawberry", "Watermelon")

for ((index, fruit) in fruits.withIndex()) {
	println("Item at $index is $fruit\n")
}

Output:

Item at 0 is Apple
Item at 1 is Strawberry
Item at 2 is Watermelon

Selain perulangan maju, di kotlin juga bisa looping mundur, step dan alphabet.

for (i in 1..5) print(i)

Output : 12345

for (i in 5 downTo 1) print(i)

Output : 54321

for (i in 3..6 step 2) print(i)

Output : 35

for (i in 'a'..'f') print (i)

Output : abcdef


Nullable and non-nullable variables 

Di kotlin ada fitur Null Safety yang dirancang untuk mencegah kesalahan oleh nilai null, yang sering menyebabkan aplikasi crash terutama NullPointerException. Secara default, semua variabel di Kotlin bersifat non-nullable, artinya variabel tersebut tidak boleh menyimpan nilai null kecuali harus dideklarasikan secara eksplisit sebagai nullable.

Non-Nullable Variables
Variabel non-nullable hanya dapat menyimpan nilai sesuai dengan tipe datanya.


val name: String = "Wim"

Nullable Variables
Untuk mendeklarasikan sebuah variabel menyimpan nilai null, tambahkan tanda (?) setelah tipe data.

var name: String? = null

Safe Call Operator
Di nullable variable, kita tidak dapat langsung mengakses properti atau fungsi miliknya karena nilai bisa saja null. Maka dari itu gunakan safe call operator (?.) untuk mengaksesnya.

var name: String? = null
println(name?.length)

Elvis Operator
Operator ini berfungsi memberikan nilai default apabila sebuah variabel bernilai null dengan oerator (?:).

var name: String? = null
val displayName = name ?: "No Name"

println(displayName)

Not-Null Assertion
Operator Not-Null Assertion (!!) berfungsi untuk mengubah nullable menjadi non-nullable.

val name: String? = "Wim"

println(name!!.length)

Apabila ternyata nilainya null, maka akan mengalami error NullPointerException. Oleh karena itu, penggunaan (!!) sebaiknya dihindari kecuali jika kita benar-benar yakin bahwa nilainya tidak mungkin null.

Type Checks and Casts 

Kotlin menyediakan fitur Type Checks dan Type Casts yang berfungsi untuk mengetahui tipe data suatu objek saat aplikasi sedang berjalan atau mengubah suatu objek menjadi tipe data tertentu.
Fitur ini banyak digunakan ketika menemukan objek yang memiliki tipe umum seperti Any atau struktur data yang dapat menyimpan berbagai jenis tipe data.

- Type Checks dengan is atau !is
Operator is digunakan untuk memeriksa apakah sebuah objek merupakan tipe data tertentu, sedangkan !is sebaliknya.


val name: Any = "Wim"

if (name is String) {
    println("Length: ${name.length}")
}

- Unsafe Cast dan Safe Cast
Unsafe Cast (as) digunakan untuk mengubah suatu objek menjadi tipe tertentu. Gunakan (as) hanya jika Anda yakin tipe datanya benar, karena kalau gagal akan menyebabkan error ClassCastException.

val name: Any = "Wim"

if (name is String) {
    println("Length: ${name.length}")
}

Sedangkan Safe Cast (as?) digunakan untuk menghandle terjadinya error ClassCastException dengan mengembalikan nilai null.

val data: Any = 100

val text = data as? String

println(text)

Output:

null

Jadi kesimpulannya Type Checks dan Type Casts menangani objek dengan tipe data yang berbeda secara aman.

Oke mungkin sekian dulu pembahasan kali ini, next kita akan membuat aplikasi android dengan kotlin. Semoga bermanfaat dan stay tuned untuk materi berikutnya. 

Terima kasih. ^^

How to Schedule Automatic Start and Stop of AWS EC2 Instances Using EventBridge Scheduler

Friday, June 26, 2026 Add Comment
Halo Guys, pada artikel kali ini saya mau membagikan pengalaman saya tentang cara menghemat biaya tagihan AWS dengan menjadwalkan EC2 agar otomatis menyala dan mati pada rentang jam tertentu menggunakan AWS EventBridge Scheduler. Metode ini sangat cocok diterapkan di server development, staging maupun testing yang tidak perlu harus 24 jam aktif. Misalkan digunakan hanya pada jam kerja 09:00 - 17:00. Oke tidak perlu berlama-lama berikut saya jelaskan step by step :

1. Buka AWS EventBridge Scheduler
  • Masuk ke AWS Console
  • Navigasi ke Amazon EventBridge
  • Pilih Menu Schedules
  • Klik Create Schedule

2. Membuat Schedule untuk Menyalakan EC2

  • Klik Create Schedule
  • Beri nama Schedule Name start-staging-ec2
  • Pilih Schedule Pattern Recurring Schedule
  • Pilih Timezone : Asia/Jakarta 

3. Konfigurasi Menyalakan Instance

Kita akan set jam untuk instance menyala otomatis setiap harinya pada pukul 08:00 WIB dengan cron expression berikut :  


0 8 * * ? *

Artinya : Every day at 08:00 AM


4. Konfigurasi Target

  • Target API : All APIs
  • Service : Pilih Amazon EC2 dan API StartInstances
  • Input Payload : 

{
  "InstanceIds": [
    "i-xxxxxxxxxxxxxxxxx"
  ]
}


5. Konfigurasi Permissions 

Saat membuat schedule, AWS akan meminta execution role. Kamu bisa membuat role baru atau existing IAM role. 

Untuk membuat role baru silahkan klik Go to IAM Console.
Buat Role dengan nama EventBridgeSchedulerEC2Role. Role harus punya permission sebagai berikut :


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "ec2:StartInstances",
                "ec2:StopInstances",
                "ec2:DescribeInstances"
            ],
            "Resource": "*"
        }
    ]
}


Setelah selesai kemudian di bagian permission pilih role yang sudah dibuat. Lalu klik Next kemudian Save Schedule.

6. Membuat Schedule untuk Mematikan EC2
  • Klik Create Schedule
  • Beri nama Schedule Name stop-staging-ec2
  • Pilih Schedule Pattern Recurring Schedule
  • Pilih Timezone : Asia/Jakarta 
7. Konfigurasi Mematikan Instance

Kita akan set jam untuk instance mati otomatis setiap harinya pada pukul 23:00 WIB dengan cron expression berikut :  


0 23 * * ? *

Artinya : Every day at 11:00 PM

8. Konfigurasi Target Stop Instance 

Sama seperti No. 4 tapi pilih API StopInstances

9. Verifikasi Schedule

Pastikan kedua schedule berstatus Enabled dan gunakan IAM Role yang memiliki izin StartInstances dan StopInstances.


*Note : Yang perlu diperhatikan adalah ketika instance di stop maka Public IP akan berubah. Oleh karena itu saya menyarankan agar mendedikasikan Elastic IP untuk instance tersebut agar tetap memakai IP yang sama. 

Sekian dan semoga bermanfaat. ^^
 

(Tutorial iOS) Add Load More in UITableView

Monday, August 27, 2018 Add Comment
Hello guys, pada kesempatan sebelumnya saya sudah menjelaskan tentang bagaimana membuat custom tableview di ios. Bisa dilihat di sini https://wimsonevel.blogspot.com/2017/07/tutorial-ios-custom-uitableviewcell-in.html.

Tutorial kali ini saya akan akan menjelaskan bagaimana menambahkan load more di tableview atau bisa disebut paging. Mekanismenya ketika kita men-drag scroll sampai ke bawah, pada saat itu lakukan request untuk memuat data.

Oke langsung saja.

Pertama kita perlu menambahkan sebuah View yang bernama UIActivityIndicatorView dibagian footer dari UITabelView. Akan muncul loading indicator ketika tableview di drag atau scroll ke bawah. Buat extension dari UITableView dengan beberapa fungsi yaitu showLoadingFooter, hideLoadingFooter dan isLoadingFooterShowing.

import Foundation
import UIKit
// MARK: Loading Footer extension UITableView { func showLoadingFooter(){ let loadingFooter = UIActivityIndicatorView(activityIndicatorStyle: .gray) loadingFooter.frame.size.height = 60 loadingFooter.hidesWhenStopped = true loadingFooter.startAnimating() tableFooterView = loadingFooter } func hideLoadingFooter(){ let tableContentSufficentlyTall = (contentSize.height > frame.size.height) let atBottomOfTable = (contentOffset.y >= contentSize.height - frame.size.height) if atBottomOfTable && tableContentSufficentlyTall { UIView.animate(withDuration: 0.2, animations: { self.contentOffset.y = self.contentOffset.y - 60 }, completion: { finished in self.tableFooterView = UIView() }) } else { self.tableFooterView = UIView() } } func isLoadingFooterShowing() -> Bool { return tableFooterView is UIActivityIndicatorView } }
Kemudian kita perlu mengimplementasikan function scrollViewDidEndDragging di ViewController.

override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView == tableView {
            if ((scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height) {
                if !tableView.isLoadingFooterShowing() {
                    loadData()
                }
            }
        }
    }


Buat method loadData(), kemudian tampilkan loading indicator di tableview footer diikuti dengan reload data atau dari request data.

func loadData() {
        // do network request here
        
        self.tableView.showLoadingFooter()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            
            self.foods.append(contentsOf: self.moreFoods)
            self.tableView.reloadData()
            
            self.tableView.hideLoadingFooter()
        }
    }

Kode lengkapnya :

import UIKit

class ViewController: UITableViewController {

    var foods = [Food(thumb: "rendang", name: "Rendang", country: "Indonesia"),
                 Food(thumb: "nasi_goreng", name: "Nasi Goreng", country: "Indonesia"),
                 Food(thumb: "sushi", name: "Sushi", country: "Japan"),
                 Food(thumb: "tom_yum_goong", name: "Tom Yum Goong", country: "Thailand"),
                 Food(thumb: "pad_thai", name: "Pad Thai", country: "Thailand"),
                 Food(thumb: "som_tam", name: "Som Tam", country: "Thailand"),
                 Food(thumb: "dim_sum", name: "Dim Sum", country: "Hongkong"),
                 Food(thumb: "ramen", name: "Ramen", country: "Japan"),
                 Food(thumb: "peking_duck", name: "Peking Duck", country: "China"),
                 Food(thumb: "massaman_curry", name: "Massaman Curry", country: "Thailand")]
    
    var moreFoods: [Food] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.moreFoods.append(contentsOf: self.foods)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func loadData() {
        // do network request here
        
        self.tableView.showLoadingFooter()
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            
            self.foods.append(contentsOf: self.moreFoods)
            self.tableView.reloadData()
            
            self.tableView.hideLoadingFooter()
        }
    }

}

struct Food {
    
    var thumb = String()
    var name = String()
    var country = String()
    
}

class CustomCell: UITableViewCell {
    
    @IBOutlet weak var thumbImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var countryLabel: UILabel!
    
}

extension ViewController {
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return foods.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let food = foods[indexPath.row]
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
        
        cell.thumbImageView.image = UIImage(named: food.thumb)
        
        cell.nameLabel?.text = food.name
        cell.countryLabel.text = food.country
        
        return cell
    }
    
    override func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
        if scrollView == tableView {
            if ((scrollView.contentOffset.y + scrollView.frame.size.height) >= scrollView.contentSize.height) {
                if !tableView.isLoadingFooterShowing() {
                    loadData()
                }
            }
        }
    }
}


Build dan jalankan maka hasilnya seperti dibawah ini.


Source lengkap dapat dilihat di https://github.com/wimsonevel/Paging-UITableView

Sekian tutorial singkat kali ini.
Jangan lupa share ke social media kalian ^^.

(Tutorial iOS) Pull to Refresh with UIRefreshControl

Monday, August 20, 2018 1 Comment

Hello guys, pada kesempatan sebelumnya saya sudah menjelaskan tentang bagaimana membuat custom tableview di ios. Bisa dilihat di sini https://wimsonevel.blogspot.com/2017/07/tutorial-ios-custom-uitableviewcell-in.html.

Tutorial kali ini pada dasarnya meneruskan tutorial yang sebelumnya yakni dengan menambahkan Pull to Refresh. Untuk membuat pull to refresh di iOS dapat menggunakan widget yang dinamakan UIRefreshControl. Implementasinya cukup sederhana yaitu dengan menempakannya ke dalam table view yang kita buat.

Oke, langsung aja ke TKP.

Pertama, deklarasikan variabel UIRefreshControl berikut.

let pullRefresh = UIRefreshControl()

Buat function untuk menghandle refresh control. Di sini lah tempat menghandle network request. Untuk sementara saya menggunakan thread biasa.

func pullRefresh(_ refreshControl: UIRefreshControl) {
    // do network request here
        
    DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
        self.tableView.reloadData()
        refreshControl.endRefreshing()
    }
}

Lalu atur properties-nya (warna, text, dll) sesuai keinginan.

// Refresh Control Properties
pullRefresh.addTarget(self, action: #selector(ViewController.pullRefresh(_:)), for: UIControlEvents.valueChanged)
        
pullRefresh.tintColor = UIColor.red
pullRefresh.attributedTitle = NSAttributedString(string: "Please wait ...")

Kemudian tambakan ke dalam tableview sebagai subview.

// Add to Table View
if #available(iOS 10.0, *) {
    tableView.refreshControl = pullRefresh
} else {
    tableView.addSubview(pullRefresh)
}

Berikut source code lengkapnya :

import UIKit

class ViewController: UITableViewController {

    
    var foods = [Food(thumb: "rendang", name: "Rendang", country: "Indonesia"),
                 Food(thumb: "nasi_goreng", name: "Nasi Goreng", country: "Indonesia"),
                 Food(thumb: "sushi", name: "Sushi", country: "Japan"),
                 Food(thumb: "tom_yum_goong", name: "Tom Yum Goong", country: "Thailand"),
                 Food(thumb: "pad_thai", name: "Pad Thai", country: "Thailand"),
                 Food(thumb: "som_tam", name: "Som Tam", country: "Thailand"),
                 Food(thumb: "dim_sum", name: "Dim Sum", country: "Hongkong"),
                 Food(thumb: "ramen", name: "Ramen", country: "Japan"),
                 Food(thumb: "peking_duck", name: "Peking Duck", country: "China"),
                 Food(thumb: "massaman_curry", name: "Massaman Curry", country: "Thailand")]
    
    let pullRefresh = UIRefreshControl()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // Refresh Control Properties
        pullRefresh.addTarget(self, action: #selector(ViewController.pullRefresh(_:)), for: UIControlEvents.valueChanged)
        
        pullRefresh.tintColor = UIColor.red
        pullRefresh.attributedTitle = NSAttributedString(string: "Please wait ...")
        
        // Add to Table View
        if #available(iOS 10.0, *) {
            tableView.refreshControl = pullRefresh
        } else {
            tableView.addSubview(pullRefresh)
        }

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func pullRefresh(_ refreshControl: UIRefreshControl) {
        // do network request here
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 3) {
            self.tableView.reloadData()
            refreshControl.endRefreshing()
        }
    }

}

struct Food {
    var thumb = String()
    var name = String()
    var country = String()
}

class CustomCell: UITableViewCell {
    
    @IBOutlet weak var thumbImageView: UIImageView!
    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var countryLabel: UILabel!
    
}

extension ViewController {
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return foods.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        let food = foods[indexPath.row]
        
        let cell = tableView.dequeueReusableCell(withIdentifier: "CustomCell", for: indexPath) as! CustomCell
        
        cell.thumbImageView.image = UIImage(named: food.thumb)
        
        cell.nameLabel?.text = food.name
        cell.countryLabel.text = food.country
        
        return cell
        
    }

}


Build dan run, maka hasilnya sebagai berikut :


Source code lengkap dapat dilihat di https://github.com/wimsonevel/PullToRefresh

Sekian tutorial singkat kali ini, semoga bermanfaat.
Jangan lupa share ke social media kalian ya ^^

(Tutorial Android) Android Image Slider

Tuesday, August 14, 2018 1 Comment

Hai guys, sudah sekian lama rasanya ane gak nulis di blog ini (kira2 setahun). Maklum guys karena ane belakangan ini sibuk banget jadi gak sempat bikin tutorial lagi, ditambah lagi juga malas yang berkepanjangan.. :v

Oke2, kali ini ane mau membahas bagaimana membuat Image Slider di Android. Temen2 pasti sudah tidak asing lagi dengan yang namanya Image Slider. Jadi, Image Slider merupakan tampilan seperti slide gambar yang bisa di geser satu-persatu utk menampilkannya.

Di Android terdapat fitur ViewPager yang bisa kita manfaatkan untuk membuat slider.

Langsung saja ke TKP.

Konfigurasi gradle dulu dengan menambahkan library Picasso.


…
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.1'
    compile 'com.squareup.picasso:picasso:2.5.2'
    testCompile 'junit:junit:4.12'
}


Buat kelas dengan nama CirclePageIndicator. Kelas ini merupakan custom view untuk menampilkan indicator slider.

Code ini pada dasarnya saya ambil dari https://github.com/JakeWharton/ViewPagerIndicator/blob/master/library/src/com/viewpagerindicator/CirclePageIndicator.java

import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.drawable.Drawable;
import android.os.Parcel;
import android.os.Parcelable;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewConfigurationCompat;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewConfiguration;


import id.co.blogspot.wimsonevel.android_imageslider.R;

import static android.graphics.Paint.ANTI_ALIAS_FLAG;
import static android.widget.LinearLayout.HORIZONTAL;
import static android.widget.LinearLayout.VERTICAL;

/*
 * Copyright (C) 2011 Patrik Akerfeldt
 * Copyright (C) 2011 Jake Wharton
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

public class CirclePageIndicator extends View implements PageIndicator {

    private static final int INVALID_POINTER = -1;

    private float mRadius;
    private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG);
    private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG);
    private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG);
    private ViewPager mViewPager;
    private ViewPager.OnPageChangeListener mListener;
    private int mCurrentPage;
    private int mSnapPage;
    private float mPageOffset;
    private int mScrollState;
    private int mOrientation;
    private boolean mCentered;
    private boolean mSnap;

    private int mTouchSlop;
    private float mLastMotionX = -1;
    private int mActivePointerId = INVALID_POINTER;
    private boolean mIsDragging;


    public CirclePageIndicator(Context context) {
        this(context, null);
    }

    public CirclePageIndicator(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.vpiCirclePageIndicatorStyle);
    }

    public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        if (isInEditMode()) return;

        //Load defaults from resources
        final Resources res = getResources();
        final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);
        final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);
        final int defaultOrientation = res.getInteger(R.integer.default_circle_indicator_orientation);
        final int defaultStrokeColor = res.getColor(R.color.default_circle_indicator_stroke_color);
        final float defaultStrokeWidth = res.getDimension(R.dimen.default_circle_indicator_stroke_width);
        final float defaultRadius = res.getDimension(R.dimen.viewpager_circleindicator_radius);
        final boolean defaultCentered = res.getBoolean(R.bool.default_circle_indicator_centered);
        final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);

        //Retrieve styles attributes
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CirclePageIndicator, defStyle, 0);

        mCentered = a.getBoolean(R.styleable.CirclePageIndicator_centered, defaultCentered);
        mOrientation = a.getInt(R.styleable.CirclePageIndicator_android_orientation, defaultOrientation);
        mPaintPageFill.setStyle(Paint.Style.FILL);
        mPaintPageFill.setColor(a.getColor(R.styleable.CirclePageIndicator_pageColor, defaultPageColor));
        mPaintStroke.setStyle(Paint.Style.STROKE);
        mPaintStroke.setColor(a.getColor(R.styleable.CirclePageIndicator_strokeColor, defaultStrokeColor));
        mPaintStroke.setStrokeWidth(a.getDimension(R.styleable.CirclePageIndicator_strokeWidth, defaultStrokeWidth));
        mPaintFill.setStyle(Paint.Style.FILL);
        mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));
        mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);
        mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);

        Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);
        if (background != null) {
            setBackgroundDrawable(background);
        }

        a.recycle();

        final ViewConfiguration configuration = ViewConfiguration.get(context);
        mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);
    }


    public void setCentered(boolean centered) {
        mCentered = centered;
        invalidate();
    }

    public boolean isCentered() {
        return mCentered;
    }

    public void setPageColor(int pageColor) {
        mPaintPageFill.setColor(pageColor);
        invalidate();
    }

    public int getPageColor() {
        return mPaintPageFill.getColor();
    }

    public void setFillColor(int fillColor) {
        mPaintFill.setColor(fillColor);
        invalidate();
    }

    public int getFillColor() {
        return mPaintFill.getColor();
    }

    public void setOrientation(int orientation) {
        switch (orientation) {
            case HORIZONTAL:
            case VERTICAL:
                mOrientation = orientation;
                requestLayout();
                break;

            default:
                throw new IllegalArgumentException("Orientation must be either HORIZONTAL or VERTICAL.");
        }
    }

    public int getOrientation() {
        return mOrientation;
    }

    public void setStrokeColor(int strokeColor) {
        mPaintStroke.setColor(strokeColor);
        invalidate();
    }

    public int getStrokeColor() {
        return mPaintStroke.getColor();
    }

    public void setStrokeWidth(float strokeWidth) {
        mPaintStroke.setStrokeWidth(strokeWidth);
        invalidate();
    }

    public float getStrokeWidth() {
        return mPaintStroke.getStrokeWidth();
    }

    public void setRadius(float radius) {
        mRadius = radius;
        invalidate();
    }

    public float getRadius() {
        return mRadius;
    }

    public void setSnap(boolean snap) {
        mSnap = snap;
        invalidate();
    }

    public boolean isSnap() {
        return mSnap;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (mViewPager == null) {
            return;
        }
        final int count = mViewPager.getAdapter().getCount();
        if (count == 0) {
            return;
        }

        if (mCurrentPage >= count) {
            setCurrentItem(count - 1);
            return;
        }

        int longSize;
        int longPaddingBefore;
        int longPaddingAfter;
        int shortPaddingBefore;
        if (mOrientation == HORIZONTAL) {
            longSize = getWidth();
            longPaddingBefore = getPaddingLeft();
            longPaddingAfter = getPaddingRight();
            shortPaddingBefore = getPaddingTop();
        } else {
            longSize = getHeight();
            longPaddingBefore = getPaddingTop();
            longPaddingAfter = getPaddingBottom();
            shortPaddingBefore = getPaddingLeft();
        }

        final float threeRadius = mRadius * 3;
        final float shortOffset = shortPaddingBefore + mRadius;
        float longOffset = longPaddingBefore + mRadius;
        if (mCentered) {
            longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f) - ((count * threeRadius) / 2.0f);
        }

        float dX;
        float dY;

        float pageFillRadius = mRadius;
        if (mPaintStroke.getStrokeWidth() > 0) {
            pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;
        }

        //Draw stroked circles
        for (int iLoop = 0; iLoop < count; iLoop++) {
            float drawLong = longOffset + (iLoop * threeRadius);
            if (mOrientation == HORIZONTAL) {
                dX = drawLong;
                dY = shortOffset;
            } else {
                dX = shortOffset;
                dY = drawLong;
            }
            // Only paint fill if not completely transparent
            if (mPaintPageFill.getAlpha() > 0) {
                canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);
            }

            // Only paint stroke if a stroke width was non-zero
            if (pageFillRadius != mRadius) {
                canvas.drawCircle(dX, dY, mRadius, mPaintStroke);
            }
        }

        //Draw the filled circle according to the current scroll
        float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;
        if (!mSnap) {
            cx += mPageOffset * threeRadius;
        }
        if (mOrientation == HORIZONTAL) {
            dX = longOffset + cx;
            dY = shortOffset;
        } else {
            dX = shortOffset;
            dY = longOffset + cx;
        }
        canvas.drawCircle(dX, dY, mRadius, mPaintFill);
    }

    public boolean onTouchEvent(MotionEvent ev) {
        if (super.onTouchEvent(ev)) {
            return true;
        }
        if ((mViewPager == null) || (mViewPager.getAdapter().getCount() == 0)) {
            return false;
        }

        final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mActivePointerId = MotionEventCompat.getPointerId(ev, 0);
                mLastMotionX = ev.getX();
                break;

            case MotionEvent.ACTION_MOVE: {
                final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);
                final float x = MotionEventCompat.getX(ev, activePointerIndex);
                final float deltaX = x - mLastMotionX;

                if (!mIsDragging) {
                    if (Math.abs(deltaX) > mTouchSlop) {
                        mIsDragging = true;
                    }
                }

                if (mIsDragging) {
                    mLastMotionX = x;
                    if (mViewPager.isFakeDragging() || mViewPager.beginFakeDrag()) {
                        mViewPager.fakeDragBy(deltaX);
                    }
                }

                break;
            }

            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (!mIsDragging) {
                    final int count = mViewPager.getAdapter().getCount();
                    final int width = getWidth();
                    final float halfWidth = width / 2f;
                    final float sixthWidth = width / 6f;

                    if ((mCurrentPage > 0) && (ev.getX() < halfWidth - sixthWidth)) {
                        if (action != MotionEvent.ACTION_CANCEL) {
                            mViewPager.setCurrentItem(mCurrentPage - 1);
                        }
                        return true;
                    } else if ((mCurrentPage < count - 1) && (ev.getX() > halfWidth + sixthWidth)) {
                        if (action != MotionEvent.ACTION_CANCEL) {
                            mViewPager.setCurrentItem(mCurrentPage + 1);
                        }
                        return true;
                    }
                }

                mIsDragging = false;
                mActivePointerId = INVALID_POINTER;
                if (mViewPager.isFakeDragging()) mViewPager.endFakeDrag();
                break;

            case MotionEventCompat.ACTION_POINTER_DOWN: {
                final int index = MotionEventCompat.getActionIndex(ev);
                mLastMotionX = MotionEventCompat.getX(ev, index);
                mActivePointerId = MotionEventCompat.getPointerId(ev, index);
                break;
            }

            case MotionEventCompat.ACTION_POINTER_UP:
                final int pointerIndex = MotionEventCompat.getActionIndex(ev);
                final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);
                if (pointerId == mActivePointerId) {
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);
                }
                mLastMotionX = MotionEventCompat.getX(ev, MotionEventCompat.findPointerIndex(ev, mActivePointerId));
                break;
        }

        return true;
    }

    @Override
    public void setViewPager(ViewPager view) {
        if (mViewPager == view) {
            return;
        }
        if (mViewPager != null) {
            mViewPager.setOnPageChangeListener(null);
        }
        if (view.getAdapter() == null) {
            throw new IllegalStateException("ViewPager does not have adapter instance.");
        }
        mViewPager = view;
        mViewPager.setOnPageChangeListener(this);
        invalidate();
    }

    @Override
    public void setViewPager(ViewPager view, int initialPosition) {
        setViewPager(view);
        setCurrentItem(initialPosition);
    }

    @Override
    public void setCurrentItem(int item) {
        if (mViewPager == null) {
            throw new IllegalStateException("ViewPager has not been bound.");
        }
        mViewPager.setCurrentItem(item);
        mCurrentPage = item;
        invalidate();
    }

    @Override
    public void notifyDataSetChanged() {
        invalidate();
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        mScrollState = state;

        if (mListener != null) {
            mListener.onPageScrollStateChanged(state);
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        mCurrentPage = position;
        mPageOffset = positionOffset;
        invalidate();

        if (mListener != null) {
            mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);
        }
    }

    @Override
    public void onPageSelected(int position) {
        if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {
            mCurrentPage = position;
            mSnapPage = position;
            invalidate();
        }

        if (mListener != null) {
            mListener.onPageSelected(position);
        }
    }

    @Override
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mListener = listener;
    }

    /*
     * (non-Javadoc)
     *
     * @see android.view.View#onMeasure(int, int)
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (mOrientation == HORIZONTAL) {
            setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));
        } else {
            setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));
        }
    }

    /**
     * Determines the width of this view
     *
     * @param measureSpec
     *            A measureSpec packed into an int
     * @return The width of the view, honoring constraints from measureSpec
     */
    private int measureLong(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {
            //We were told how big to be
            result = specSize;
        } else {
            //Calculate the width according the views count
            final int count = mViewPager.getAdapter().getCount();
            result = (int)(getPaddingLeft() + getPaddingRight()
                    + (count * 2 * mRadius) + (count - 1) * mRadius + 1);
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    /**
     * Determines the height of this view
     *
     * @param measureSpec
     *            A measureSpec packed into an int
     * @return The height of the view, honoring constraints from measureSpec
     */
    private int measureShort(int measureSpec) {
        int result;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            //We were told how big to be
            result = specSize;
        } else {
            //Measure the height
            result = (int)(2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);
            //Respect AT_MOST value if that was what is called for by measureSpec
            if (specMode == MeasureSpec.AT_MOST) {
                result = Math.min(result, specSize);
            }
        }
        return result;
    }

    @Override
    public void onRestoreInstanceState(Parcelable state) {
        SavedState savedState = (SavedState)state;
        super.onRestoreInstanceState(savedState.getSuperState());
        mCurrentPage = savedState.currentPage;
        mSnapPage = savedState.currentPage;
        requestLayout();
    }

    @Override
    public Parcelable onSaveInstanceState() {
        Parcelable superState = super.onSaveInstanceState();
        SavedState savedState = new SavedState(superState);
        savedState.currentPage = mCurrentPage;
        return savedState;
    }

    static class SavedState extends BaseSavedState {
        int currentPage;

        public SavedState(Parcelable superState) {
            super(superState);
        }

        private SavedState(Parcel in) {
            super(in);
            currentPage = in.readInt();
        }

        @Override
        public void writeToParcel(Parcel dest, int flags) {
            super.writeToParcel(dest, flags);
            dest.writeInt(currentPage);
        }

        @SuppressWarnings("UnusedDeclaration")
        public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {
            @Override
            public SavedState createFromParcel(Parcel in) {
                return new SavedState(in);
            }

            @Override
            public SavedState[] newArray(int size) {
                return new SavedState[size];
            }
        };
    }
}


Kemudian buat interface dengan nama PageIndicator.

Code nya juga saya ambil dari sini https://github.com/JakeWharton/ViewPagerIndicator/blob/master/library/src/com/viewpagerindicator/PageIndicator.java

/*
 * Copyright (C) 2011 Patrik Akerfeldt
 * Copyright (C) 2011 Jake Wharton
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import android.support.v4.view.ViewPager;

/**
 * A PageIndicator is responsible to show an visual indicator on the total views
 * number and the current visible view.
 */

public interface PageIndicator extends ViewPager.OnPageChangeListener {

    /**
     * Bind the indicator to a ViewPager.
     *
     * @param view
     */
    void setViewPager(ViewPager view);

    /**
     * Bind the indicator to a ViewPager.
     *
     * @param view
     * @param initialPosition
     */
    void setViewPager(ViewPager view, int initialPosition);

    /**
     * <p>Set the current page of both the ViewPager and indicator.</p>
     *
     * <p>This <strong>must</strong> be used if you need to set the page before
     * the views are drawn on screen (e.g., default start page).</p>
     *
     * @param item
     */
    void setCurrentItem(int item);

    /**
     * Set a page change listener which will receive forwarded events.
     *
     * @param listener
     */
    void setOnPageChangeListener(ViewPager.OnPageChangeListener listener);

    /**
     * Notify the indicator that the fragment list has changed.
     */
    void notifyDataSetChanged();

}


Selanjutnya buat beberapa layout berikut :

list_item_pager.xml
Layout ini berisi ImageView untuk menampilkan image.

<?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">

    <ImageView
        android:id="@+id/iv_header"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop" />

</RelativeLayout>

viewpager_slide.xml
Layout berisi ViewPager dan Custom CirclePageIndicator.

<?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="250dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@null" />

    <id.co.blogspot.wimsonevel.android_imageslider.widget.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:padding="10dp" />

</RelativeLayout>

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"
    tools:context="id.co.blogspot.wimsonevel.android_imageslider.MainActivity">

    <include
        layout="@layout/viewpager_slide" />

</RelativeLayout>

Tambahkan beberapa resource values yang diperlukan.

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <attr name="centered" format="boolean" />
    <attr name="selectedColor" format="color" />
    <attr name="strokeWidth" format="dimension" />
    <attr name="unselectedColor" format="color" />

    <!-- Circle Page Indicator -->
    <declare-styleable name="ViewPagerIndicator">
        <!-- Style of the circle indicator. -->
        <attr name="vpiCirclePageIndicatorStyle" format="reference"/>
        <!-- Style of the icon indicator's views. -->
        <attr name="vpiIconPageIndicatorStyle" format="reference"/>
        <!-- Style of the line indicator. -->
        <attr name="vpiLinePageIndicatorStyle" format="reference"/>
        <!-- Style of the title indicator. -->
        <attr name="vpiTitlePageIndicatorStyle" format="reference"/>
        <!-- Style of the tab indicator's tabs. -->
        <attr name="vpiTabPageIndicatorStyle" format="reference"/>
        <!-- Style of the underline indicator. -->
        <attr name="vpiUnderlinePageIndicatorStyle" format="reference"/>
    </declare-styleable>

    <declare-styleable name="CirclePageIndicator">
        <!-- Whether or not the indicators should be centered. -->
        <attr name="centered" />
        <!-- Color of the filled circle that represents the current page. -->
        <attr name="fillColor" format="color" />
        <!-- Color of the filled circles that represents pages. -->
        <attr name="pageColor" format="color" />
        <!-- Orientation of the indicator. -->
        <attr name="android:orientation"/>
        <!-- Radius of the circles. This is also the spacing between circles. -->
        <attr name="radius" format="dimension" />
        <!-- Whether or not the selected indicator snaps to the circles. -->
        <attr name="snap" format="boolean" />
        <!-- Color of the open circles. -->
        <attr name="strokeColor" format="color" />
        <!-- Width of the stroke used to draw the circles. -->
        <attr name="strokeWidth" />
        <!-- View background -->
        <attr name="android:background"/>
    </declare-styleable>


</resources>

bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="default_circle_indicator_centered">true</bool>
    <bool name="default_circle_indicator_snap">false</bool>
</resources>

colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#5d4037</color>
    <color name="colorPrimaryDark">#321911</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorWhite">#FFFFFF</color>

    <!-- Circle Page Indicator -->
    <color name="default_circle_indicator_fill_color">@color/colorPrimary</color>
    <color name="default_circle_indicator_page_color">@color/colorWhite</color>
    <color name="default_circle_indicator_stroke_color">@android:color/transparent</color>

</resources>

integers.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Circle Page Indicator -->
    <integer name="default_circle_indicator_orientation">0</integer>

</resources>

Kembali ke kelas java, buat kelas dengan nama ImagePagerAdapter.

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by kwikkunusantara on 8/10/18.
 */

public class ImagePagerAdapter extends PagerAdapter {

    private Context context;
    private List<String> images;

    public ImagePagerAdapter(Context context) {
        this.context = context;
        this.images = new ArrayList<>();
    }

    public void setImages(List<String> images) {
        for (int i = 0; i < images.size(); i++){
            this.images.add(images.get(i));
        }
        notifyDataSetChanged();
    }

    @Override
    public int getCount() {
        return images.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        String image = images.get(position);
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View itemView = inflater.inflate(R.layout.item_image_pager, container, false);
        ImageView ivHeader = (ImageView) itemView.findViewById(R.id.iv_header);

        Picasso.with(context)
                .load(image)
                .into(ivHeader);

        container.addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((RelativeLayout) object);
    }
}


Setelah itu tambahkan code berikut di MainActivity

Di sini saya menambahkan Timer supaya Slider-nya bisa bergerak otomatis. Beberapa image saya ambil dari link Facebook nya Aliga <3. *Dasar Jones

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

import id.co.blogspot.wimsonevel.android_imageslider.widget.CirclePageIndicator;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private CirclePageIndicator pagerIndicator;

    private ImagePagerAdapter imagePagerAdapter;

    private Timer timer;

    private List<String> images;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        viewPager = (ViewPager) findViewById(R.id.pager);
        pagerIndicator = (CirclePageIndicator) findViewById(R.id.indicator);

        imagePagerAdapter = new ImagePagerAdapter(this);

        viewPager.setAdapter(imagePagerAdapter);
        pagerIndicator.setViewPager(viewPager);

        images = new ArrayList<>();
        images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30260981_1697358283684452_5345280777774956544_n.jpg?_nc_cat=0&oh=780b2eba44f38c3400b8e219060b3278&oe=5C08A56E");
        images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30412288_1697358530351094_6652467221207449600_n.jpg?_nc_cat=0&oh=9c39ae9327064d3c21490a556acf28a3&oe=5C137E2E");
        images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30412267_1697358943684386_6572812530102566912_n.jpg?_nc_cat=0&oh=1876343af22cad2f49d352343eb3eb6b&oe=5C12B116");
        images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30261069_1697359000351047_8720462127048949760_n.jpg?_nc_cat=0&oh=44a1c82bebff0f61b811ef2bb94b3196&oe=5BC978E2");

        imagePagerAdapter.setImages(images);

        timer = new Timer();
        timer.scheduleAtFixedRate(new SliderTimer(), 3000, 5000);
    }

    private class SliderTimer extends TimerTask {

        @Override
        public void run() {
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    if (viewPager.getCurrentItem() < imagePagerAdapter.getCount() - 1) {
                        viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                    } else {
                        viewPager.setCurrentItem(0);
                    }
                }
            });
        };
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        timer.cancel();
    }
}

Terakhir tambahkan permission INTERNET di AndroidManifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="id.co.blogspot.wimsonevel.android_imageslider">

    <uses-permission android:name="android.permission.INTERNET" />

    <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>
    </application>

</manifest>

Build dan jalankan maka hasinya sebagai berikut :


Source code lengkap dapat dilihat di https://github.com/wimsonevel/Android-ImageSlider
Sekian dulu untuk tutorial kali ini dan semoga bermanfaat.

Jangan lupa share ^^