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

Berita Anda on

Wednesday, October 23, 2019

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...!