Tutorial Cara Membuat Circular ImageView dengan CardView di Android Studio

Tutorial Cara Membuat Circular ImageView dengan CardView di Android Studio

Halo para Android Developer. Bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial Cara Membuat Circular ImageView/Gambar Lingkaran Tanpa Menggunakan Library Tambahan Dengan Menggunakan CardView di Android Studio.

Menampilkan gambar di Android bisa dilakukan dengan menggunakan komponen ImageView. Tapi, bagaimana jika seseorang ingin menampilkannya dalam bentuk melingkar (Circular). Ada banyak aplikasi populer yang menggunakan Gambar Melingkar untuk menampilkan foto profil, status, cerita, dan banyak hal lainnya. Dan melakukan itu semua dengan ImageView agak sedikit sulit.

Di tutorial ini saya akan membantu kalian untuk membuatnya dengan hanya menggunakan komponen CardView. Jadi kita tidak memerlukan library tambahan untuk membuat Circular Image.

Tutorial Cara Mudah Membuat Circular ImageView/Gambar Melingkar Tanpa Menggunakan Library Tambahan Hanya dengan Menggunakan CardView di Android Studio

Buatlah project android studio baru dengan informasi sebagai berikut:

Application Name:Circular Image App
Package Name:com.androidrion.circularimageapp
Languge:Java
Minimum SDK:API 16: Android 4.1 (Jelly Bean)

Daftar file xml layout yang digunakan dalam project ini:

  1. activity_main.xml

Daftar file drawable yang digunakan dalam project ini:

  1. person_1.jpg
  2. person_2.jpg
  3. person_3.jpg
  4. person_4.jpg

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Circular Image App.

Image Drawable File

Download asset foto dibawah ini untuk kita kerjakan dalam project ini:

Kalian bisa lihat bahwa gambar diatas tidak berbentuk lingkaran atau bulat atau circular.

Setelah kalian download file diatas, sekarang kalian pindahkan foto tersebut kedalam folder drawable dalam project Android Studio kalian dengan cara copy paste seperti biasa. Maka struktur dari project Android Studio kalian akan seperti pada gambar dibawah ini.

XML Layout File (activity_main.xml)

Buka file activity_main.xml dalam folder layout. Tambahkan komponen CardView dengan atribut app:carCornerRadius dan app:cardElevation. Tambahkan pula komponen ImageView di dalam komponen CardView. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView3"
                android:layout_width="150dp"
                android:layout_height="150dp"
                app:cardCornerRadius="100dp"
                app:cardElevation="0dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/person_3" />

            </androidx.cardview.widget.CardView>

            <View
                android:layout_width="match_parent"
                android:layout_height="16dp" />

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView4"
                android:layout_width="150dp"
                android:layout_height="150dp"
                app:cardCornerRadius="100dp"
                app:cardElevation="0dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/person_4" />
            </androidx.cardview.widget.CardView>

        </LinearLayout>

        <View
            android:layout_width="16dp"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView2"
                android:layout_width="150dp"
                android:layout_height="150dp"
                app:cardCornerRadius="100dp"
                app:cardElevation="0dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/person_2" />

            </androidx.cardview.widget.CardView>

            <View
                android:layout_width="match_parent"
                android:layout_height="16dp" />

            <androidx.cardview.widget.CardView
                android:id="@+id/cardView5"
                android:layout_width="150dp"
                android:layout_height="150dp"
                app:cardCornerRadius="150dp"
                app:cardElevation="0dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/person_1" />

            </androidx.cardview.widget.CardView>

        </LinearLayout>


    </LinearLayout>

</RelativeLayout>

Run ‘app’

Sekarang jalankan project Android Studio kalian. Pada tampilan awal aplikasi, kalian akan melihat ada 4 gambar orang yang berbentuk bulat atau Circular. Jika kode diatas tidak terjadi error. Maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Membuat Gambar Melingkar (Circular ImageView) di Android Studio Tanpa Menggunakan Library Tambahan. Tutorial diatas sangatlah mudah untuk dikerjakan karena tidak perlu menggunakan file Java hanya untuk membuat tampilan Circular ImageView.

Jika kalian mengalami kendala saat melakukan tutorial di atas, Silahkan beri komentar pada artikel ini dibawah. Jangan lupa untuk Subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

Exit mobile version