Search code examples
androidgeometryimageviewinstagram

how to set a border around circle image view like instagram?


i want to set a circle border around circle image view like instagram stories,any one can help? here is my image view

<de.hdodenhof.circleimageview.CircleImageView
    android:id="@+id/profile_image"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginStart="10dp"
    android:layout_marginTop="8dp"
    android:src="@drawable/profile1"
    app:civ_border_color="#DBDBDB"
    app:civ_border_width="1dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Solution

  • You can also use the ShapeableImageView provided by the Material Components Library.

    Something like:

    <com.google.android.material.imageview.ShapeableImageView
        app:shapeAppearanceOverlay="@style/circularImageView"
        app:srcCompat="@drawable/...."
        app:strokeColor="@color/....."
        app:strokeWidth="1dp"
        ...
        />
    

    with:

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

    enter image description here

    Note: it requires at least the version 1.2.0-alpha03.