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 :
1 | .apply(RequestOptions.circleCropTransform()) |
Kegunaan method tersebut adalah untuk membuat imageview kita menjadi bulat (circle). Untuk full pengaturan Glidenya kurang lebih seperti ini :
1 2 3 4 | 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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <?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 :
1 | <uses-permission android:name="android.permission.INTERNET"/> |
Kelima,
Buka gradle app devandro lalu tambahkan library Glide tersebut. Untuk kodenya adalah sebagai berikut :
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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.
1 2 3 4 5 6 | @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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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]
[/sociallocker]
BACA JUGA :
Library Glide, Library untuk Menampilkan Gambar dari Internet
Tutorial Mendapatkan Lokasi Kordinat Menggunakan FusedLocationProviderClient
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!
