Hi everyone! — This article is about ‘How to implement simple touch animation in android using ElasticViews’.

ElasticViews lets we implementing simple dynamic animation like above.

For implementing, we should add a below dependency.

dependencies {

compile 'com.github.skydoves:elasticviews:1.1.2'

}

There are some touch-responsible views in library.

ElasticButton

ElasticButton extends AppCompatButton. So we could use it just a Button.

<com.skydoves.elasticviews.ElasticButton

android:id="@+id/elasticbutton"

android:layout_width="match_parent"

android:layout_height="50dp"

app:button_backgroundColor="#30354b"

app:button_round="20"

app:button_scale="0.7"

app:button_duration="400"

app:button_labelText="Elastic Button"

app:button_labelColor="#ffffff"

app:button_labelSize="16"

app:button_labelStyle="bold"/>

But, ElasticButton provides more attributes than Button.

And the matter of primary concern is animation. so we should set button_scale and button_duration attribute.

button_scale attribute means dynamic scale of animation and as expected, button_duration means milliseconds duration of animation.

The most important thing is elastic animation will do the action when onClickListener is implemented.

And the library provides some views implemented elastic animation.

ElasticCheckButton

<com.skydoves.elasticviews.ElasticCheckButton

android:id="@+id/elasticcheckbutton"

android:layout_width="match_parent"

android:layout_height="50dp"

app:checkbutton_backgroundColor="#30354b"

app:checkbutton_round="30"

app:checkbutton_scale="0.9"

app:checkbutton_duration="400"

app:checkbutton_labelText="Elastic CheckButton"

app:checkbutton_labelColor="#ffffff"

app:checkbutton_labelSize="16"

app:checkbutton_labelStyle="bold"

app:checkbutton_alpha="0.5"

app:checkbutton_ischecked="false"/>

ElasticImageView

<com.skydoves.elasticviews.ElasticImageView

android:id="@+id/elasticimageview"

android:layout_width="64dp"

android:layout_height="64dp"

android:scaleType="fitXY"

android:src="@drawable/ic_question"

app:imageview_duration="500"

app:imageview_scale="0.7"/>

ElasticFloatingButton

<com.skydoves.elasticviews.ElasticFloatingActionButton

android:id="@+id/elasticfab"

android:layout_width="64dp"

android:layout_height="64dp"

android:src="@drawable/ic_add"

app:fabSize="normal"

app:fabutton_duration="400"

app:fabutton_scale="0.85"/>

ElasticLayout

<com.skydoves.elasticviews.ElasticLayout

android:id="@+id/elasticlayout"

android:layout_width="match_parent"

android:layout_height="80dp"

app:layout_backgroundColor="#30354b"

app:layout_duration="500"

app:layout_scale="0.85">



<TextView

android:id="@+id/textView0"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="This is"

android:textColor="#ffffff"

android:textSize="18sp" />



<TextView

android:layout_below="@+id/textView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:text="ElasticLayout"

android:textColor="#ffffff"

android:textSize="18sp"

android:gravity="end" />



</com.skydoves.elasticviews.ElasticLayout>

ElasticAnimation

ElasticViews provides some animation views. but how should we do if we want to implement elastic animation on our custom views?

then we can implement it using ElasticAnimation.

new ElasticAnimation.Builder().setView(view).setScaleX(0.75f)

.setScaleY(0.75f).setDuration(500)

.setOnFinishListener(onFinishListener).doAction();

or we can set ViewPropertyAnimatorListener using setListener method and detect animation start and end.

.setListener(new ViewPropertyAnimatorListener() {

@Override

public void onAnimationStart(View view) {

}



@Override

public void onAnimationEnd(View view) {

finishListener.onFinished();

}



@Override

public void onAnimationCancel(View view) {

}

});

so we can implement animation on all of the views like below using ElasticAnimation like below.

@OnClick(R.id.button)

public void addNewAlarm(View v){

// implements animation uising ElasticAnimation

new ElasticAnimation.Builder().setView(v).setScaleX(0.85f).setScaleY(0.85f).setDuration(500)

.setOnFinishListener(new ElasticFinishListener() {

@Override

public void onFinished() {

// Do something after duration time

}

}).doAction();

}

}

Also we can implement animation on listView’s items like below.

private class ListViewItemClickListener implements AdapterView.OnItemClickListener{

@Override

public void onItemClick(AdapterView<?> adapterView, View clickedView, final int pos, long id) {

new ElasticAnimation.Builder().setView(clickedView).setScaleX(0.9f).setScaleY(0.9f).setDuration(400)

.setOnFinishListener(new ElasticFinishListener() {

@Override

public void onFinished() {

//Do something after duration time

Toast.makeText(getBaseContext(), "ListViewItem" + pos, Toast.LENGTH_SHORT).show();

}

}).doAction();

}

};

ElasticViews is based on MIT License. So everyone can Modifications and Commercial use, Private use!

Thank you for reading!