How to slowly fill background colour of a circle from the center with Animation in Android

Question

I am trying to slowly fill a circle's background starting from the center in Android

Below is an example snippet that I found here, I am trying to do the exact same thing like the snippet below but in Android not on a web. I tried to google it but I only get results such as using TransitionDrawable to change from colors to colors which is not what I wanted

$('div').click(function() {
  $(this).toggleClass('selected');
});

div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">

</div>

Make a circle in xml with background color and apply this animation https://stackoverflow.com/questions/7414065/android-scale-animation-on-view — D.J, Sep 28 '17 at 04:33
https://stackoverflow.com/questions/24858531/filling-a-circle-gradually-from-bottom-to-top-android — Ankita, Sep 28 '17 at 05:04
This is css,javascript code why did you tagged it in to android and java — Abhijit Chakra, Sep 28 '17 at 05:10
@AbhijitChakra the css and javascript is just an example, what I wanted is to have the same thing in android — the newbie coder, Sep 28 '17 at 06:18

score 1 · Accepted Answer · answered Sep 28 '17 at 05:10

Try the following

in your activity java

  circle2 = (ImageView) findViewById(R.id.circle2);
    ScaleAnimation fade_in =  new ScaleAnimation(0f, 1f, 0f, 1f, 
    Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    fade_in.setDuration(1000);     // animation duration in milliseconds
    fade_in.setFillAfter(true);    // If fillAfter is true, the transformation that this animation performed will persist when it is finished.
    circle2.startAnimation(fade_in);

activity xml

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

android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical"


>

<ImageView
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/circle" />

<ImageView
    android:id="@+id/circle2"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:background="@drawable/circle_two" />
</FrameLayout>

in your drawable circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="@color/colorAccent" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="@color/colorAccent" />
    </shape>
</item>
</selector>

similarly create circle2.xml

Thanks, this is exactly what I needed – the newbie coder Sep 28 '17 at 06:57 — the newbie coder, Sep 28 '17 at 06:57
@carlos great! happy coding...) – Amrutha Saj Sep 28 '17 at 07:10 — Amrutha Saj, Sep 28 '17 at 07:10

How to slowly fill background colour of a circle from the center with Animation in Android

1 Answers1