Cara Membuat ImageView Bulat (Circle) di Android Studio

Cara Membuat ImageView Bulat (Circle) di Android Studio – Halo devandro! Kali ini saya ingin membagikan sebuah tutorial android sederhana untuk membuat imageview berbentuk bulat seperti halnya digunakan untuk foto profil di media sosial pada umumnya. Sebenarnya banyak cara untuk membuat imageview berbentuk bulat (circle) ini, ada yang membuat dari xml atau menggunakan library yang emang kegunaanya untuk membuat imageview ini berbentuk bulat. Pada umumnya devandro pasti untuk membuat imageview bulat ini menggunakan library kepunyaan hdodenhof ( library circle imageview ),Nah yang ingin saya beritahu disini kita tidak akan menggunakan library tersebut. Di tutorial ini kita akan menggunakan library Processing Image yaitu Glide! Karena glide ini sendiri sudah menyediakan method untuk membuat imageview kita bulat (circle).

Pada library Glide ini kita akan memakai method RequestOptionsnya library Glide. Jadi devandro tidak perlu repot repot atau menambah library kepunyaan hdodenhof lagi, karena dengan Glide saja sudah cukup. Methodnya sebenernya sangat sederhana, hanya menambahkan 1 line code saja. Methodnya kurang lebih seperti ini :

.apply(RequestOptions.circleCropTransform())

1	.apply(RequestOptions.circleCropTransform())

Kegunaan method tersebut adalah untuk membuat imageview kita menjadi bulat (circle). Untuk full pengaturan Glidenya kurang lebih seperti ini :

 Glide.with(this)
          .load(mUrlPicture)
          .apply(RequestOptions.circleCropTransform())
          .into(ivInternet);

Glide.with(this)

.load(mUrlPicture)

.apply(RequestOptions.circleCropTransform())

.into(ivInternet);

Sangat sederana bukan ? Nah jika devandro masih bingung bagaimana Cara Membuat ImageView Bulat (Circle) di Android Studio ini saya akan membuat sample project sederhana. Disini project ini devandro akan membuat 1 imageview yang diload dari internet dan 1 imageveiw yang diload dari drawable project kita.

Pertama,

Buat project dengan nama SampleImageCircle.

Kedua,

Buat empty activity lalu namakan dengan ImageCircleActivity.

Ketiga,

Buka activity_image_circle.xml lalu tambahan 2 komponen imageview. Untuk kodenya adalah sebagai berikut :

<?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:orientation="vertical"
    android:padding="16dp"
    tools:context="com.farizdotid.tutorialfarizdotid.ImageCircleActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gambar dari internet"
        android:layout_gravity="center"
        android:textSize="20sp"
        android:fontFamily="sans-serif-condensed"/>

    <ImageView
        android:id="@+id/ivInternet"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginTop="16dp"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Gambar dari lokal"
        android:layout_gravity="center"
        android:textSize="20sp"
        android:fontFamily="sans-serif-condensed"/>

    <ImageView
        android:id="@+id/ivLokal"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_marginTop="16dp"
        android:layout_gravity="center"/>
</LinearLayout>

<?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:orientation="vertical"

android:padding="16dp"

tools:context="com.farizdotid.tutorialfarizdotid.ImageCircleActivity">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Gambar dari internet"

android:layout_gravity="center"

android:textSize="20sp"

android:fontFamily="sans-serif-condensed"/>

<ImageView

android:id="@+id/ivInternet"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_marginTop="16dp"

android:layout_gravity="center"/>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="16dp"

android:text="Gambar dari lokal"

android:layout_gravity="center"

android:textSize="20sp"

android:fontFamily="sans-serif-condensed"/>

<ImageView

android:id="@+id/ivLokal"

android:layout_width="64dp"

android:layout_height="64dp"

android:layout_marginTop="16dp"

android:layout_gravity="center"/>

</LinearLayout>

Keempat,

Buka androidmanifest.xml lalu tambahkan permission Internet. Karena untuk kebutuhan mengambil gambar dari internet ini kita memerlukan koneksi internet. Untuk kodenya seperti ini :

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

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

Kelima,

Buka gradle app devandro lalu tambahkan library Glide tersebut. Untuk kodenya adalah sebagai berikut :

 implementation 'com.github.bumptech.glide:glide:4.2.0'
 annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'

1 2	implementation 'com.github.bumptech.glide:glide:4.2.0' annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'

Untuk full code gradle app kurang lebih begini :

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"
    defaultConfig {
        applicationId "com.farizdotid.tutorialfarizdotid"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })

    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:design:26.1.0'
    implementation 'com.android.support:support-vector-drawable:26.1.0'
    implementation 'com.android.support:support-v4:26.1.0'
    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.android.support:recyclerview-v7:26.1.0'
    implementation 'com.jakewharton:butterknife:8.8.1'
    implementation 'com.github.bumptech.glide:glide:4.2.0'
    testImplementation 'junit:junit:4.12'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

buildToolsVersion "26.0.2"

defaultConfig {

applicationId "com.farizdotid.tutorialfarizdotid"

minSdkVersion 16

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

androidTestImplementation('com.android.support.test.espresso:espresso-core:2.2.2', {

exclude group: 'com.android.support', module: 'support-annotations'

})

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

implementation 'com.android.support:design:26.1.0'

implementation 'com.android.support:support-vector-drawable:26.1.0'

implementation 'com.android.support:support-v4:26.1.0'

implementation 'com.android.support:cardview-v7:26.1.0'

implementation 'com.android.support:recyclerview-v7:26.1.0'

implementation 'com.jakewharton:butterknife:8.8.1'

implementation 'com.github.bumptech.glide:glide:4.2.0'

testImplementation 'junit:junit:4.12'

annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'

}

Keenam,

Setelah sudah menambahkan library Glide kedalam project android devandro, maka sekarang devandro buka ImageCircleActivity.java lalu init component yang sudah kita buat tadi.

@BindView(R.id.ivInternet)
ImageView ivInternet;
@BindView(R.id.ivLokal)
ImageView ivLokal;

String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";

@BindView(R.id.ivInternet)

ImageView ivInternet;

@BindView(R.id.ivLokal)

ImageView ivLokal;

String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";

Ketujuh,

Didalam onCreate buat kode seperti ini :

 ButterKnife.bind(this);

        // Fungsi untuk mengambil gambar dari internet
        Glide.with(this)
                .load(mUrlPicture)
                .apply(RequestOptions.circleCropTransform())
                .into(ivInternet);

        // Fungsi untuk mengambil gambar dari drawable
        Glide.with(this)
                .load(R.drawable.icon_android)
                .apply(RequestOptions.circleCropTransform())
                .into(ivLokal);

ButterKnife.bind(this);

// Fungsi untuk mengambil gambar dari internet

Glide.with(this)

.load(mUrlPicture)

.apply(RequestOptions.circleCropTransform())

.into(ivInternet);

// Fungsi untuk mengambil gambar dari drawable

Glide.with(this)

.load(R.drawable.icon_android)

.apply(RequestOptions.circleCropTransform())

.into(ivLokal);

Untuk full source code yang ada didalam ImageCircleActivity.java sebagai berikut :

public class ImageCircleActivity extends AppCompatActivity {

    @BindView(R.id.ivInternet)
    ImageView ivInternet;
    @BindView(R.id.ivLokal)
    ImageView ivLokal;

    String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_circle);
        ButterKnife.bind(this);

        // Fungsi untuk mengambil gambar dari internet
        Glide.with(this)
                .load(mUrlPicture)
                .apply(RequestOptions.circleCropTransform())
                .into(ivInternet);

        // Fungsi untuk mengambil gambar dari drawable
        Glide.with(this)
                .load(R.drawable.icon_android)
                .apply(RequestOptions.circleCropTransform())
                .into(ivLokal);
    }
}

public class ImageCircleActivity extends AppCompatActivity {

@BindView(R.id.ivInternet)

ImageView ivInternet;

@BindView(R.id.ivLokal)

ImageView ivLokal;

String mUrlPicture = "https://regmedia.co.uk/2015/07/30/android_logo.jpg?x=442&y=293&crop=1";

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_image_circle);

ButterKnife.bind(this);

// Fungsi untuk mengambil gambar dari internet

Glide.with(this)

.load(mUrlPicture)

.apply(RequestOptions.circleCropTransform())

.into(ivInternet);

// Fungsi untuk mengambil gambar dari drawable

Glide.with(this)

.load(R.drawable.icon_android)

.apply(RequestOptions.circleCropTransform())

.into(ivLokal);

}

Kedelapan,

Silahkan jalankan aplikasi android devandro! dan taraaa imageview devandro akan berbentuk bulat.

Download project Cara Membuat ImageView Bulat (Circle) di Android Studio

[sociallocker]

download project

[/sociallocker]

BACA JUGA :
Library Glide, Library untuk Menampilkan Gambar dari Internet
Tutorial Mendapatkan Lokasi Kordinat Menggunakan FusedLocationProviderClient
Cara Mendapatkan API Key Google Lengkap dan Mudah

Sekian tutorial pemrograman android sederhana mengenai Cara Membuat ImageView Bulat (Circle) di Android Studio. Semoga bermanfaat dan seperti biasa jika ada kesulitan atau bingung bisa langsung berkomentar di artikel ini ya.

Hatur nuhun!

Farizdotid