Animate border of an imageview

I have a button, that should be swipable, so I want to animate it to communicate it's capability to swipe. The animation should look similarly to the one in native Samsung phones when receiving a call (the one on the buttons), as can be seen in this video: https://www.youtube.com/watch?v=_FRvMm-QXcY
I have tried to add an image view with a background drawable (white circle) and then scale x and y with an animation, but obviously this scales the whole image, not just the background drawable. I've been wondering how to animate the circle around the image instead of the image itself. Adding the circle as a background may already be a wrong approach, so I don't necessarily need to stick to that.
Here's my code so far:

<de.utils.customViews.SwipableImageView
                    android:id="@+id/accept_call_button"
                    android:layout_width="@dimen/accept_hangup_call_button"
                    android:layout_height="@dimen/accept_hangup_call_button"
                    android:layout_margin="@dimen/activity_vertical_margin"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    android:contentDescription="@string/accept_call"
                    android:src="@drawable/ic_accept_call"
                    android:background="@drawable/swipe_circle"
                    />

public class SwipableImageView extends androidx.appcompat.widget.AppCompatImageView {

    public SwipableImageView(@NonNull Context context) {
        super(context);
        init();
    }

    public SwipableImageView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public SwipableImageView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void init() {
        Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.swipable);
        startAnimation(animation);
    }
}

and the (so far) animation swipable (I know I also have to work with alpha, but I wanted to figure out how to only animate the circle first):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    >
    <scale
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="2.0"
        android:toYScale="2.0"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/linear_interpolator" />
</set>

I think it would be much simpler to implement this in a 'hamburger' style - so you will have static SwipableImageView and a separate Animation view, which you simply put below your main ImageView.

By doing so we will receive little bit more of GPU overdraws, because of views nesting. But that shouldn't be critical at all, since it will take only small area of screen.

Also you can implement this 'hamburger' as a CompoundView, so it will be easier to reuse across the app if needed.

UPDATE

Sample implementation using FrameLayout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <View
        android:id="@+id/animationBorder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

    <View
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>
</FrameLayout>

To address Ruslan's idea in a little more detail, for the animation drawable in back, you could use two drawables - one for the white center circle and one for the expanding ring.

center_circle.xml

<inset 
    android:insetLeft="@dimen/swipeable_padding"
    android:insetTop="@dimen/swipeable_padding"
    android:insetRight="@dimen/swipeable_padding"
    android:insetBottom="@dimen/swipeable_padding">
    <shape
        android:shape="oval">
        <solid android:color="@android:color/white" />
    </shape>
</inset>

You would use this as the background in an ImageView. The insets make room for the ring around the circle. For the expanding ring:

expanding_ring.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="10dp"
    android:innerRadius="34dp"
    android:useLevel="true">
    <solid android:color="#55ffffff" />
</shape>

This would be the src for the animation ImageView.

You will need to set the level for the ring drawable to 10,000 programatically for anything to show.

Now, in code, you would use a ValueAnimator to change the ring's thickness to go from zero to a value that will fill the ImageView. Unfortunately, to change the thickness programmatically, your app will need a minSdk of 29 or greater.

Another idea which would work for any API is to write a drawable class that will simply draw the expanding ring directly onto the canvas. The signature for this class would be

class SwipeableBackground extends Drawable implements Animatable

and it would be set as the background to a single ImageView that will also hold the phone icon as the src. In this class you can also use the ValueAnimator to assist in growing the ring.

In both cases, you would create another ValueAnimator to fade the ring as the end of expansion. The two animators would be placed into an AmimatorSet which would repeat indefinitely or until stopped.

There may be some libraries that can easily do this animation if you want to go that route.

Out of the answers of @Ruslan and @Cheticamp I came to the following solution:

Create Framelayout for animated button:

<FrameLayout
     android:id="@+id/accept_call_button"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="@dimen/activity_vertical_margin"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintStart_toStartOf="parent">

     <de.example.utils.customViews.SwipeAnimationView
           android:layout_width="@dimen/accept_hangup_call_button"
           android:layout_height="@dimen/accept_hangup_call_button"
           android:layout_gravity="center"
           android:src="@drawable/swipe_circle" />

     <de.example.utils.customViews.SwipableImageView
           android:layout_width="@dimen/accept_hangup_call_button"
           android:layout_height="@dimen/accept_hangup_call_button"
           android:layout_gravity="center"
           android:contentDescription="@string/accept_call"
           android:layout_margin="@dimen/anim_margin"
           android:src="@drawable/ic_accept_call"
           />
</FrameLayout>

The call button (SwipableImageView) has an animation margin, which makes the framelayout align in size to the current icons size + the space the animation will take up.

Then I have the SwipeAnimationView with an init()-function that just calls the animation:

public void init() {
        Animation animation = AnimationUtils.loadAnimation(getContext(), R.anim.swipable);
        startAnimation(animation);
    }

This function gets called in every constructor.
The animation then is in the following xml (by now also with alpha changes):

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="false"
    >
    <scale
        android:duration="1500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.5"
        android:toYScale="1.5"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/linear_interpolator" />
    <alpha
        android:duration="500"
        android:startOffset="1000"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:repeatCount="infinite"
        android:interpolator="@android:anim/linear_interpolator"
        />
</set>

The swipe_circle is just an oval, as Android Studio wouldn't display a ring shape. However, as the other icon overlays it, it works perfectly fine to just adapt the size. For continuos centering however, the pivotX and pivotY need to be considered in the animation.