CODEWITHSUNDEEP
androidandroid-layout
Sapnesh Naik
Sapnesh Naik

Reputation: 11646

Prevent Imageview custom background clipping

I have turned an image view into circular shape by defining my own background for it.

circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="1.9"
    android:useLevel="false"
    >
    <solid android:color="@android:color/transparent" />

    <stroke
        android:width="10dp"
        android:color="@android:color/white" />
</shape>

shadow_rect.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/circle"/>

</layer-list>

mainActivity.xml:

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="157dp"
    android:layout_height="150dp"
    android:background="@drawable/profile_image"
    android:cropToPadding="false"
    app:layout_constraintBottom_toBottomOf="@+id/banner_iamge"
    app:layout_constraintEnd_toEndOf="@+id/banner_iamge"
    app:layout_constraintHorizontal_bias="0.501"
    app:layout_constraintStart_toStartOf="@+id/banner_iamge"
    app:layout_constraintTop_toBottomOf="@+id/banner_iamge"
    app:layout_constraintVertical_bias="0.476"
    app:srcCompat="@drawable/layer_4" />

But the imageview circle clips like this:

As you can see the circular white ring around the profile image is getting clipped. I want that white ring to show around the image without clipping

clipped imageview

How can I solve this?

Upvotes: 0

Views: 229

Answers (2)

mehul chauhan
mehul chauhan

Reputation: 1802

use this lib

dependencies {
implementation 'de.hdodenhof:circleimageview:2.2.0'
}

XMl replace Imagview with this

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

Upvotes: 1

Andr&#233; Sousa
Andr&#233; Sousa

Reputation: 1730

The background is a fill of the view container, it will not shrink the content. So my suggestion to you is to create a custom view for what you want to achieve.

There are some great projects on GitHub. One of my favorites is this one: https://github.com/hdodenhof/CircleImageView

Upvotes: 0

Related Questions