Button With Progress

• Almost everybody agrees that a great design helps a lot to make people get interested in you app. If you don't agree, try to publish an app with a awful UI and see what happens…

• The huge majority of apps in Play Store uses Progress Dialog to show progress, but some high quality apps innovate with nice animations to show the user that he should wait. Let's see how to make a different loading animation: Morph a button into a loading spinner.

How to use

• Add the button in your layout file and customize it the way you like it.

<com.kotlinlibrary.buttonview.RoundButton
    android:id="@+id/fab_login"
    style="@style/TextStyle"
    android:layout_width="@dimen/_50sdp"
    android:layout_height="@dimen/_50sdp"
    android:gravity="center"
    app:rb_animation_duration="100"
    app:rb_animation_corner_radius="@dimen/_50sdp"
    app:rb_animation_alpha="false"
    app:rb_animation_progress_color="@android:color/white"
    app:rb_animation_progress_padding="@dimen/_10sdp"
    app:rb_animation_progress_width="@dimen/_2sdp"
    app:rb_background_color="@color/colorAccent"
    app:rb_background_color_pressed="@color/colorAccent"
    app:rb_corner_color="@color/colorAccent"
    app:rb_corner_color_pressed="@color/colorAccent"
    app:rb_corner_radius="@dimen/_50sdp"
    app:rb_corner_width="@dimen/_2sdp"
    app:rb_drawable_color="@color/colorAccent"
    app:rb_drawable_resource="@drawable/ic_cancel_white"/>

• Here there are define all property which are available and you have used it.

<declare-styleable name="RoundButton">
        <attr name="rb_animation_duration" format="integer" />
        <attr name="rb_animation_corner_radius" format="dimension" />
        <attr name="rb_animation_alpha" format="boolean" />
        <attr name="rb_animation_progress_color" format="color" />
        <attr name="rb_animation_progress_padding" format="dimension" />
        <attr name="rb_animation_progress_width" format="dimension" />
        <attr name="rb_animation_progress_style" format="enum">
            <enum name="circle" value="0" />
            <enum name="dots" value="1" />
            <enum name="custom" value="2" />
        </attr>
        <attr name="rb_animation_custom_resource" format="reference" />
        <attr name="rb_animation_inner_resource" format="reference" />
        <attr name="rb_animation_inner_resource_color" format="color" />

        <attr name="rb_drawable_color" format="color" />
        <attr name="rb_drawable_resource" format="reference" />
        <attr name="rb_success_color" format="color" />
        <attr name="rb_success_resource" format="reference" />
        <attr name="rb_failure_color" format="color" />
        <attr name="rb_failure_resource" format="reference" />

        <attr name="rb_corner_radius" format="dimension" />
        <attr name="rb_corner_width" format="dimension" />
        <attr name="rb_corner_color" format="color" />
        <attr name="rb_corner_color_pressed" format="color" />
        <attr name="rb_corner_color_disabled" format="color" />
        <attr name="rb_background_color" format="color" />
        <attr name="rb_background_color_pressed" format="color" />
        <attr name="rb_background_color_disabled" format="color" />
        <attr name="rb_text_color" format="color" />
        <attr name="rb_text_color_pressed" format="color" />
        <attr name="rb_text_color_disabled" format="color" />
    </declare-styleable>

• Then, instanciate the button

   //Create variable and bind your xml component on that object.
   val buttonLogin = findViewById<RoundButton>(R.id.fab_login)

   //For start animation and display progress bar 
   buttonLogin.startAnimation()

   //For revert animation and stop to display progress bar
   buttonLogin.revertAnimation()

   //For stop animation
   buttonLogin.stopAnimation()

Screen-Shot