Cara Membuat Circle Image pada Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Saat kita membuat sebuah aplikasi, pastinya kalian sudah tidak asing lagi dengan yang namanya ImageView, yang digunakan untuk menampilkan Gambar, secara default, ImageView menampilkan gambar dengan bentuk persegi, namun terkadang kita bosan dan ingin mengubah bentuk persegi tersebut denfgan bentuk lainnya, misalnya berbentuk Bulat (Circle).

Untuk membuatnya, kita tidak akan menggunakan ImageView, tetapi kita akan menggunakan Library CircleImage, dengan menggunakan library tersebut, kita dapat membuat Gambar Bulat (Circle Image) dengan mudah. Library tersebut dibuat oleh pengguna GitHub, bernama Henning Dodenhof

Materi lainnya yang direkomendasikan:

• Membuat Aplikasi Menampilkan Gambar pada ImageView dari Galeri atau Kamera
• Cara Membuat Image Gallery Menggunakan GridView
• Belajar Membuat ImageButton di Android Studio

Cara Membuat Circle Image pada Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama siapkan Image/Gambar yang inign  ditampilkan, lalu simpan pada direktori drawable.

3) Selanjutnya kita tambahkan Library CircleImage pada project kita, buka file build.gradle (pada direktori app), masukan library berikut ini, didalam dependencies.

compile 'de.hdodenhof:circleimageview:2.1.0'

4) Buka file activity_main.xml kalian, pada layout tersebut kita akan menambahkan CircleImage beserta komponen tambahan lainnya, seperti TextView.

<?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="#FF0021FF"
    android:gravity="top|center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="54dp"
        android:src="@drawable/kucing"
        app:civ_border_color="#fff"
        app:civ_border_width="2dp" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:text="Profil Saya"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:textStyle="bold" />

</LinearLayout>

Didalam Tag CircleImage, kita menambahkan artibut civ_border_width dan civ_border_color, aribut tersebut digunakan untuk membuat garis pada bagian sisi Gambar.

Pada contoh tersebu, kita mengset gambarnya secara langsung menggunakan kode xml didalam layout activity, selain itu juga kita dapat mengse gambarnya secara programatik, menggunakan Java, seperti berikut ini.

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity{

    //Deklarasi Variable CircleImageView
    private CircleImageView GambarBulat;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        GambarBulat = findViewById(R.id.profile_image);
        GambarBulat.setImageResource(R.drawable.kucing);
    }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.