CODEWITHSUNDEEP
javaandroidandroid-studioandroid-layout
Ashen Jayawardena
Ashen Jayawardena

Reputation: 197

How to make a responsive image animation in android?

I wan't to make a UI which would look like this,

enter image description here

My intention is to fill the white circle around the arrow with green colour in a typical loading bar animation. The amount filled in green should correspond to the distance shown below the arrow. (lower the distance, higher the green fill)

What is the easiest approach to achieve this?

Thanks in advance :)

Upvotes: 0

Views: 90

Answers (2)

yasser karimi
yasser karimi

Reputation: 329

you can create a new view by <ProgressBar/> but if progress is not important you can use gif file

but beacase progress is important you can <ImageVew> and some images for creating a new progress bar isn't very hard.

Upvotes: 0

Laufwunder
Laufwunder

Reputation: 839

I have done this with a <ProgressBar/>. As progressDrawable you assign a drawable. With progress you can set the current progress which represents your distance.

Add this to your layout:

<layout>
    ...
    <ProgressBar
        android:id="@id/distance_circle_ui"
        android:layout_width="400dp"
        android:layout_height="400dp"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="@{viewmodel.foobar.distance}"
        android:progress="@{viewmodel.foobar.distance_progress}"
        android:progressDrawable="@drawable/distance_circle_drawable"
        android:intermediate="false" />
    ...
</layout>

I have used binding here. It would also be possible to set the progress attribute programmatically.

The drawable (/res/drawable/distance_circle_drawable.xml) looks like this:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
    <shape
        android:innerRadius="125dp"
        android:shape="ring"
        android:thickness="15dp"
        android:useLevel="true">
        <solid android:color="@color/colorPrimary" />
    </shape>
</rotate>

For me this looks very "easy" :)

Upvotes: 1

Related Questions