Tips Membuat Circle Image Menggunakan ImageCircle

Kalian ingin membuat tampilan gambar seperti di bawah ini :

Caranya mudah sekali, semudah membuat blank project di Android Studio hehe.. Langsung saja ya, pertama tambahkan de.hdodenhof:circleimageview:2.1.0 di gradle project kalian.

dependencies {

...

compile 'de.hdodenhof:circleimageview:2.1.0'

}

Pastikan kalian sudah meng-import file gambar yang akan kalian gunakan.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Nah, setelah itu kita atur tampilannya. Disini sengaja saya buat dua versi, dengan dan tanpa ImageCircle.

<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:id="@+id/activity_main"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:background="@color/colorAccent"

tools:context="com.dicoding.dhahedda.circleimage.MainActivity">

<de.hdodenhof.circleimageview.CircleImageView

android:id="@+id/profile_image"

android:layout_width="100dp"

android:layout_height="100dp"

android:src="@drawable/logo"

app:civ_border_width="1dp"

app:civ_border_color="#ffff00"

android:layout_centerVertical="true"

android:layout_alignStart="@+id/imageView" />

<ImageView

android:layout_width="100dp"

android:layout_height="100dp"

app:srcCompat="@drawable/logo"

android:id="@+id/imageView"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<TextView

android:text="Without CircleView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="36dp"

android:id="@+id/textView2"

android:layout_alignParentTop="true"

android:layout_alignParentStart="true" />

<TextView

android:text="Without CirleView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/textView"

android:layout_centerVertical="true"

android:layout_alignParentStart="true" />

</RelativeLayout>

Kurang lebih tampilannya seperti ini :

That’s it. Simpel kan? Ok Semoga bermanfaat.

Oh iya jika ada masukan ataupun saran silahkan comment ya, kalian juga boleh request tips loh, so jangan sungkan. Sampai jumpa di dicoding tips selanjutnya.