How to achieve Android Button Animation with text-blurred and shadow

Question

I want to achieve this button animation in Android. The sample below is from iOS. I want the shadow to disappear when the user clicks the button and reappear once the user releases the button.

Any help will be highly appreciated.

Answer 1

You need to add color like the following. For example, the color name is button_text_color.xml. Here is the .xml file which needs to be put in the color folder. If the color folder does not exist, create one in your res directory.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#50FFFFFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" android:state_pressed="false" />
</selector>

Check that I have added 50% transparency to the white color in the pressed state. Now just add this attribute in the Button where it is declared.

Now you need a background drawable, to be put in your drawable folder. For example, let us take the name of the drawable is button_state_list_animator.xml. This should have the following content.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="@android:color/darker_gray" />
                    <corners android:radius="19dp" />
                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#102746" />
                    <corners android:radius="19dp" />

                </shape>
            </item>
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp" />
                    <gradient android:angle="270" android:endColor="#163969" android:startColor="#1c4985" />
                    <corners android:radius="19dp" />
                    <padding android:bottom="10dp" android:left="10dp" android:right="5dp" android:top="10dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Now your button construction is simple.

<Button
    android:id="@+id/button"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_margin="32dp"
    android:background="@drawable/button_state_list_animator"
    android:text="Save Changes"
    android:textColor="@color/button_text_color" />

Here is the screenshot from my code.

You can have the push-down animation using the library as well, as mentioned in an answer here.

Hope that helps!

Answer 2

Use the animation effect (as the code below) on the custom button when clicking on the button.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:fromXScale="1"
        android:toXScale="0.8"
        android:fromYScale="1"
        android:toYScale="0.8"
        android:duration="500"
        android:pivotX="50%"
        android:pivotY="50%" >
    </scale>
    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.8"
        android:duration="500">
    </alpha>
</set>

set Animation on Button Click using.

 btn_custom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R
                        .anim.animation_btn);
                btn_custom.startAnimation(animation);
            }
        });

try changing alpha values as your need and see the effect.

Answer 3

You can use this library : pushdown-anim-click

How to install:

compile( 'com.github.thekhaeng:pushdown-anim-click:1.1.1' ){
    exclude group: 'com.android.support'
}

How to use:

Button button = findViewById( R.id.button );

PushDownAnim.setPushDownAnimTo( button, ... )
    .setOnClickListener( new View.OnClickListener(){
        @Override
        public void onClick( View view ){
            Toast.makeText( MainActivity.this, "PUSH DOWN !!", Toast.LENGTH_SHORT ).show();
        }

});

For Shadow:

As I saw library files, There are only three java files. He just used class to animate button. You can give shadow in your button by this way. Even though I have created issue You can keep watch on this.

For more functionality, you can visit github link.

Thank you.

Answer 4

Add a layout with the background as the shadow below the button. In the button.setOnTouchListener hide the layout when button is pressed and make it visible when released. However it will only work if the shadow is below.