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.ProgressButton
        android:id="@+id/btn_normal"
        android:layout_width="0dp"
        android:layout_height="@dimen/_50sdp"
        android:gravity="center"
        android:text="@string/btn_normal"
        android:textColor="@color/colorLine"
        app:pb_normal_color="@color/colorAccent"
        app:pb_progress_style="dots"
        app:pb_progress_dots_count="2"
        app:pb_corner_radius="@dimen/_25sdp"
        app:pb_anim_corner_radius="@dimen/_25sdp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

List of Property

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

Property	Description
pb_gradient_name	In build 168 gradient provided, if you want to used then set name Ex: app:pb_gradient_name="HappyAcid"
pb_gradient_type	Used for apply Effect of gradient like Linear, Radial and Sweep Ex: app:pb_gradient_type="Linear"
pb_radial_radius	This property used for Radial type gradient in set radius of radial gradient Ex: app:pb_radial_radius="60"
pb_gradient_angle	Apply gradient angle, Range 0 to 360 Ex: app:pb_gradient_angle="200"
pb_gradient_colors	Set gradient color array Ex: app:pb_gradient_colors="@array/colors" <array name="colors"> <item>#008577</item> <item>#D81B60</item> <item>#2AB63A</item> </array>
pb_gradient_positions	Set color offset to display which position, Range 0.0 to 1.0 Ex: app:pb_gradient_positions="@array/positions" <string-array name="positions"> <item>0.0</item> <item>0.99</item> <item>1.0</item> </string-array>
pb_normal_color	Used for solid background Ex: app:pb_normal_color="@color/colorPrimary"
pb_corner_radius	Used for rounded corner set Ex: app:pb_corner_radius="@dimen/_25sdp"
pb_corner_topLeftRadius	Apply top left corner in rounded shape and other as it is Ex: app:pb_corner_topLeftRadius="@dimen/_25sdp"
pb_corner_topRightRadius	Apply top right corner in rounded shape and other as it is Ex: app:pb_corner_topRightRadius="@dimen/_25sdp"
pb_corner_bottomLeftRadius	Apply bottom left corner in rounded shape and other as it is Ex: app:pb_corner_bottomLeftRadius="@dimen/_25sdp"
pb_corner_bottomRightRadius	Apply bottom right corner in rounded shape and other as it is Ex: app:pb_corner_bottomRightRadius="@dimen/_25sdp"
pb_state_success_backgroundColor
pb_state_success_drawable
pb_state_success_drawableTint
pb_state_failure_backgroundColor
pb_state_failure_drawable
pb_state_failure_drawableTint
pb_state_with_stroke
pb_state_revert_delay
android:drawablePadding	Apply padding in drawable Ex: android:drawablePadding="@dimen/_10sdp"
pb_image_drawable	Create image/icon button
pb_image_drawableTint	Apply tint color of image/icon
pb_anim_duration	Set circle progress bar animation duration
pb_anim_corner_radius	Set corner rounded radius when progress bar visible
pb_anim_alpha_morphing	Set background alpha when progress animation start
pb_progress_style
pb_progress_drawable
pb_progress_inner_drawable
pb_progress_inner_drawableTint
pb_progress_width
pb_progress_padding
pb_progress_color
pb_progress_dots_count
pb_stroke_width
pb_stroke_color
pb_stroke_dash_width
pb_stroke_dash_gap

• 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