-4

I need to make a circular image to fit in the background circle,

like you see in this photo.

Follow the code XML below.

 <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:tools="http://schemas.android.com/tools">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_cover_image"
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:alpha="0.6"
                android:scaleType="centerCrop"
                android:src="@drawable/perfil1" />
            <ImageButton
                android:id="@+id/user_profile_photo"
                android:layout_width="120dp"
                android:layout_height="120dp"
                android:layout_marginTop="98dp"
      android:background="@drawable/profile_circular_border_imageview"
                android:elevation="5dp"
                android:padding="20dp"
                android:scaleType="centerCrop"
                android:src="@drawable/perfil1"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true" />
            <RelativeLayout
                android:id="@+id/profile_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/header_cover_image"
                android:background="@color/colorPrimary"
                android:elevation="4dp"
                android:paddingBottom="24dp">

                <ImageView
                    android:id="@+id/favorite"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/ic_stars"
                    android:layout_alignParentTop="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true" />

                <TextView
                    android:id="@+id/user_profile_name"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="76dp"
                    android:text="João da Silva"
                    android:textColor="#fff"
                    android:textSize="24sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/user_profile_short_bio"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/user_profile_name"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="12dp"
                    android:text="Android free tutorials and example"
                    android:textColor="#fff"
                    android:textSize="14sp" />
            </RelativeLayout>
        </RelativeLayout>
    </ScrollView>
OneCricketeer
  • 179,855
  • 19
  • 132
  • 245

1 Answers1

2

This library can help you create circular image view: CircleImageView. Just replace the image view with the following code.

Add this to your build.gradle file

dependencies {
    ...
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

Usage

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/profile_image"
    android:layout_width="96dp"
    android:layout_height="96dp"
    android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

Results

enter image description here

Praveen Kishore
  • 436
  • 1
  • 3
  • 14