Mohon untuk bersikap bijak dalam setiap menyikapi infomasi dan berita yang beredar di internet karena tidak semua berita itu benar, terkadang di salah gunakan oknum tertentu untuk membuat kekacauan dan fitnah

Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio, semoga bermanfaat dan selamat membaca


Hai sobat Coding Rakitan ! kali ini kami ingin memberikan sebuah tutorial untu membuat Image View berbentuk bulat atau lebih dikenal dengan nama Circle Image. Untuk membuat Circle Image ada banyak cara yang bisa di tempuh mulai dari manipulasi bitmap menggunakan canvas, menggunakan shape drawable, hingga menggunakan library. Cara yang akan kita gunakan disini yaitu menggunakan library, sebab lebih mudah dan praktis. Bagi pemula juga tidak akan ribet menggunakannya.

Library yang akan kita gunakan adalah Glide, library ini tidak hanya untuk menampilkan image tetapi bisa pula membuat Circle Image. Kelebihan lainnya anda bisa menampilkan image online ataupun offline (langsung dari directory project).

Sebelum kita memulai saya akan memberikan beberapa contoh aplikasi yang menerapkan Circle Image.



Selain aplikasi-aplikasi di atas masih banyak lagi yang menggunakan Circle Image. Untuk hasil dari project yang dibuat pada postingan ini nantinya akan sangat sederhana, bisa anda lihat seperti gambar di bawah.



Langkah 1 : Buat project baru.



Langkah 2 : Import libarary glide dengan memasukkan code berikut ke dalam build.grandle (app module).
 
dependencies {
...
implementation 'com.github.bumptech.glide:glide:4.2.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.2.0'
}

Langkah 3 : Masukkan gambar percobaan kedalam directory drawable dengan nama gambar.jpg (seuai keinginan anda). Berikut adalah contoh gambar yang akan di tampilkan



Langkah 4 : Edit activity_main.xml seperti berikut.
 
<?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"
tools:context=".MainActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:gravity="center_horizontal"
android:orientation="vertical">

<ImageView
android:id="@+id/gambar"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp" />
</LinearLayout>

</RelativeLayout>

Langkah 5 : Edit class MainActivity seperti berikut.

 
public class MainActivity extends AppCompatActivity {

private ImageView gambar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gambar = findViewById(R.id.gambar);
Glide.with(this)
.load(R.drawable.gambar)
.apply(RequestOptions.circleCropTransform())
.into(gambar);

}
}


Penjelasan :

Bagian yang menjadi instruksi untuk menggunakan glide terdapat pada kode :

 
Glide.with(this)
.load(R.drawable.gambar)
.apply(RequestOptions.circleCropTransform())
.into(gambar);

Kode tersebut menginstruksikan gambar yang terdapada di "R.drawable.gambar" untuk di tampilkan kedalam image view dengan bentuk circle dengan menggunakan method "circleCropTransform()". Selain gambar dari directori anda juga bisa menggunakan gambar online dengan cara menuliskan ".load(URL_GAMBAR)", contohnya :

 
Glide.with(this)
.load("http://codingrakitan.blogspot.com/")
.apply(RequestOptions.circleCropTransform())
.into(gambar);




Labels: Android_Studio

Thanks for reading Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio. Please share...!

0 Komentar untuk "Cara Membuat Image View Bulat (Circle Image) dengan Glide di Android Studio"

Back To Top