Crop nested ImageView inside LinearLayout

Question

I'm trying to create a circular image with an orange border.

Here is my xml

<LinearLayout
    android:id="@+id/circle_photo"
    android:background="@drawable/circle_image_container"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintVertical_bias="0.45"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/edit_profile">
    <androidx.appcompat.widget.AppCompatImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/person1"
        android:scaleType="centerCrop"/>
</LinearLayout>

circle_image_container.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="@android:color/transparent"/>
            <corners android:radius="50dp"/>
            <stroke android:width="2dp" android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
</selector>

However my image just shows in its normal rectangular state over the top of the LinearLayout - it's not nested in a circular container. I've added android:scaleType="centerCrop" to the image so it should be cropping.

Any idea?

@Zorgan - Apply circle_image_container.xml background to AppCompatImageView. — TheAnkush, May 25 '19 at 07:04
Doesn't change anything @TheAnkush the imageview is still over the top of it — Zorgan, May 25 '19 at 07:09

score 0 · Answer 1 · answered May 25 '19 at 07:26

0

In your circle drawable, you didn't use

    android:shape="ring"

Follow this for more: ImageView in circular through xml

answered May 25 '19 at 07:26

TheAnkush

885
7
10

score 0 · Answer 2 · answered May 25 '19 at 07:58

    <RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/circleborder"
    android:padding="3dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="60dp"
        android:layout_height="60dp"
        tools:srcCompat="@tools:sample/avatars" />
    </RelativeLayout>

circleborder.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
    android:width="5dp"
    android:color="@color/orange"/>
    <size android:height="50dp"
    android:width="50dp"/>
    </shape>

After that load your image in imageview using glide library like this

    Glide.with(act).load(mylist.get(i).urlimg) 
    .fitCenter().apply(RequestOptions.circleCropTransform()).into(myholder.userimg);

Crop nested ImageView inside LinearLayout

2 Answers2

circleborder.xml