Skip to main content

Cara Menggunakan Circular ImageView di Android Studio

Halo semua, pada tutorial kali ini kita akan belajar menggunakan circular imageview pada android studio. Untuk mengubah gambar yang tadinya kotak / persegi pada saat mengembangkan aplikasi android kita bisa menggunakan library CircularImageView.

Bagaimana cara menggunakannya ? Inilah tutorial lengkapnya !

1. Buat Project Baru

Langkah pertama silahkan buka aplikasi android studio kemudian buat project baru dengan menekan create new a project. Lalu berikan nama project sesuai dengan keinginanmu. Disini penulis menggunakan nama CircularImageView. 

Cara Menggunakan Circular ImageView
Membuat project baru

 

 

2. Tambahkan library

Kita akan menggunakan library CircularImageView yang dikembangkan oleh akun github lopspower. Tautannya https://github.com/lopspower/CircularImageView.

Menambahkan library

Sekarang silahkan buka build.gradle(Module:app) yang ada pada Gradle Scripts kemudian masukan library CircularImageView dari lopspower dibawah ini pada dependencies.

implementation 'com.mikhaellopez:circularimageview:3.2.0'

Setelah itu klik Sync Now. Pastikan laptop atau komputermu terkoneksi dengan internet dan tunggu beberapa saat sampai proses sync selesai.

 

3. Tambahkan Gambar

Selanjutnya tambahkan gambar berbentuk persegi yang nantinya akan kita ubah menjadi bulat. Cara menambahkannya yaitu : Copykan gambar yang akan kita tambahkan pada android studio > klik kanan pada drawable > klik paste > pada pemilihan directory klik ok.

Menbambahkan gambar pada drawable

 

 

4. Membuat Layout

Disini kita akan menambahkan widget dan layout pada aplikasi yang akan kita buat ini. Buka Activity_main.xml lalu tambahkan kode-kode dibawah ini :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="#FFFF"
    tools:context=".MainActivity">

    <com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="37dp"
        android:src="@drawable/Koala"
        app:civ_border_color="@color/colorAccent"
        app:civ_border_width="6dp"
        app:civ_shadow="true"
        app:civ_shadow_color="#8BC34A"
        app:civ_shadow_radius="10" />

</RelativeLayout>

 

Penjelasan :

  • Layout yang dipakai adalah Relative layout dengan kode warna background #FFF
  • Kode library circularimage sudah disediakan pada github kita tinggal copy paste saja pada activity_main.xml dan dimodifikasi sesuai keinginan kita.

Maka hasil dari kode-kode diatas yaitu :

Cara Menggunakan Circular ImageView
Pembuatan layout utama

 

 

5. Jalankan aplikasi

Sekarang saatnya jalankan aplikasi yang sudah kita tambahkan library CircularImageView ini. Maka hasilnya yaitu seperti gambar berikut.

Cara Menggunakan Circular ImageView
Tampilan saat di running

Kesimpulan

Itulah cara untuk mengubah gambar agar menjadi bentuk bulat pada android studio. Semoga bermanfaat, jangan lupa di share ke teman yang lainnya, dan sampai jumpa di tutorial berikutnya.

Tulisan Menarik Lainnya :

Guntoro

Freelancer web and mobile developement, blogger, and teacher.