Home > Software design >  I need to show profile image in round shape
I need to show profile image in round shape

Time:01-24

<com.google.android.material.imageview.ShapeableImageView
    android:id="@ id/image"
    android:layout_width="52dp"
    android:layout_height="52dp"
    android:layout_gravity="center"
    android:layout_marginEnd="@dimen/_16dp"
    android:background="@drawable/ic_group_profile_image"
    android:scaleType="centerCrop"
    android:src="@drawable/ic_group_profile_image"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@id/save"
    app:layout_constraintTop_toTopOf="parent" />

binding.appbar.groupImage.apply {
                    shapeAppearanceModel = shapeAppearanceModel
                        .toBuilder()
                        .setAllCorners(CornerFamily.ROUNDED, 8f)
                        .build()
                    load(path)
                }

**this is my xml and kotlin code for round image, **

this is my output what I'm getting enter image description here

I need to show like this enter image description here

help me to solve this problem.

CodePudding user response:

You can use this style in the style.xml file:

<style name="circleImageView" parent="">
  <item name="cornerFamily">rounded</item>
  <item name="cornerSize">50%</item>
</style>

CodePudding user response:

For this, you can use CircleImageView library which is quite easy to use and provide you profile picture in round shape.

The initial step is to add gradel dependencies to your android project.

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

After this, use the given below snippet inside your layout file or where you want to use a round profile picture.

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

For more info, you can check the GitHub link

  • Related