Cara Membuat ImageView Circular (Circle) di Android Studio

Cara Membuat ImageView Circular (Circle) di Android Studio

Cara Membuat ImageView Circular (Circle) di Android Studio
Cara Membuat ImageView Circular (Circle) di Android Studio

Hallo sobat ruangcoder, artikel kali ini tentang Cara Membuat ImageView Circular (Circle) di Android Studio , Banyak cara untuk membuat imageview berbentuk bulat (circle) pada android studio. ada yang membuat dari XML atau Menggunakan suatau Library yang memang kegunaanya unutk membuat imageview ini berbentuk bulat atau circle. Nah sobat perlu ketahui pada umumnya membuat imageview circle (bulat) ini menggunakan suatu library yang dimiliki HDODENHOF ( Library Circle ImageView ), Nah jadi pada artikel yang admin ketikan ini, tidak akan menggunakan Library tersebut. Melainkan admin akan menggunakan Library Processing Image yaitu Glide. Karena Library yang satu ini sudah menyediakan method untuk membuat imageview kita menjadi bulat (circle).

Seperti sobat ketahui penggunaan imageview circle ini sering kali digunakan di foto profile, seperti facebook, instagram, whatsapp, twitter dan masih banyak lagi, oke tanpa banyak basa - basi langsung saja kita buat imageview circle nya di android studio kita.

Cara Membuat ImageView Circular (Circle) di Android Studio :


Perlu sobat ketahui Pada library glide yang kita gunakan ini, akan menggunakan suatu method RequestOptionsnya  library glide. Jadi sobat tidak perlu repot - repot menambahkan library dari hdodenhof lagi. karena di Library Glide saja sobat sudah cukup. Methodnya pun cukup sederhana. seperti yang ada dibawah ini.


.apply(RequestOptions.circleCropTransform())

Kegunaan dari method diatas untuk membuat imageview sobat menjadi circle. Nah untuk pengetikan codingannya secara full kurang lebih seperti dibawah ini.

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

Langkah pertama silahkan sobat buka android studio sobat,saat terbuka android studio sobat klik -> Start a new Android Studio project -> pilih Empty Activity -> kasih nama project tersebut dengan nama "ImageCircle" kemudian pilh API 19: Android 4.4 (KitKat) langsung Finish saja. Lalu sobat tunggu sampai Gradle dll nya selesai di Synchrone , tunggu saja, admin anggep sobat sudah selesai, jadi kita lanjut.

Dan disini admin mau menjelaskan kita hanya memodifikasi file bawaan aja ya yaitu MainActivity.xml dan MainActivity.java , sebelum kita memodifikasi, tentunya kita memasukkan library nya terlebih dahulu, dengan cara sobat ke Gradle Scripts -> build.gradle(Module: app), letakkan script dibawah ini. Kemudian Sync Now. lebih lengkap sobat lihat gambar dibawah ini.



    annotationProcessor 'com.jakewharton:butterknife:10.0.0'
    implementation 'com.github.bumptech.glide:glide:4.9.0'
    implementation 'com.appeaser.sublimepickerlibrary:sublimepickerlibrary:2.1.1'
    implementation 'org.greenrobot:greendao:3.2.2'
    annotationProcessor 'com.jakewharton:butterknife-compiler:10.0.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

Selanjutnya tambahkan codingan dibawah ini, karena disini kita menggunakan akses internet, tambahkan codingan dibawah ini ke AndroidManifest sobat, bisa lihat gambar dibawah ini.




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

Langkah selanjutnya barulah kita memodifikasi file bawaan, kita akan mendesign terlebih dahulu, jadi kita akan memodifikasi file MainActivity.xml , dengan codingan dibawah ini.



<?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" />

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

</RelativeLayout>

Dan selanjutnya tentu saja kita akan membuat fungsinya, dengan memodifikasi file bawaan MainActivity.java. dengan codingan dibawah ini.



import android.widget.ImageView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;


public class MainActivity extends AppCompatActivity {

    private ImageView gambar;
    private ImageView gambar2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Fungsi untuk mengambil gambar dari internet
        gambar2 = findViewById(R.id.gambar2);
        String mUrlPicture = "https://asset-a.grid.id/crop/0x0:0x0/360x240/photo/2018/06/07/3060819969.jpg";
        Glide.with(this)
                .load(mUrlPicture)
                .apply(RequestOptions.circleCropTransform())
                .into(gambar2);

        // Fungsi untuk mengambil gambar dari drawable
        gambar = findViewById(R.id.gambar);
        Glide.with(this)
                .load(R.drawable.ic_launcher_foreground)
                .apply(RequestOptions.circleCropTransform())
                .into(gambar);

    }
}



Nah sudah selesai deh, tinggal sobat jalankan dan lihat hasilnya, kalau hasil admin , jadi seperti gambar yang dibawah ini.


Oke sobat tutorialnya Cara Membuat ImageView Circular (Circle) di Android Studio sampai situ saja, semoga bermanfaat ya sobat artikel kali ini, dan jangan lupa dishare artikel ini, terimakasih sobat sudah berkujung di web ini , sampai jumpa di pertemuan selanjutnya.

Anda mungkin menyukai postingan ini