Saturday, July 20, 2013

Shake Animation in android.

      This tutorials explains you about Shake animation in android. Now you can validate the required fields with shake animation rather than set error and toast message.




activity_main.xml  code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/Registration"
        android:textSize="22sp"
        android:textColor="#0099FF"/>

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/Name"
        android:ems="10" 
         android:layout_marginTop="20dp"
       
        <requestFocus />
    </EditText>
    
    
    <EditText
        android:id="@+id/editText2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/Email"
        android:ems="10"  android:layout_marginTop="5dp"
      </EditText>
    


    <EditText
        android:id="@+id/editText3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:hint="@string/password"
        android:ems="10" 
        android:password="true" android:layout_marginTop="5dp"
       </EditText>

<LinearLayout 
    android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:onClick="Onsubmit"
        android:text="@string/submit"
        />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:onClick="Onreset"
        android:text="@string/reset"
       />

    </LinearLayout>

</LinearLayout>

Add anim folder in Android resources. Then create a new XML file in anim named as shakeanim.xml.

Shakeanim.xml code: 

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="300"
    android:fromXDelta="0"
    android:interpolator="@android:anim/cycle_interpolator"

    android:toXDelta="10" />


ShakeActivity Code:

public class shakeActivity extends Activity {
EditText name,email,password;
Animation shake;

      @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

name=(EditText)findViewById(R.id.editText1);
email=(EditText)findViewById(R.id.editText2);
password=(EditText)findViewById(R.id.editText3);
 //Load Shake Animation xml file here
shake = AnimationUtils.loadAnimation(this, R.anim.shakeanim);

}
//Submit button Onclick code...
public void Onsubmit(View view)
{
if(name.getText().toString().length()==0)
                  {
//Animation works here...
name.startAnimation(shake);
                  }
               //remaining code here......

}
public void Onreset(View view)
{
//reset code here
}

}



By default, it rotates only one cycle. If you want custom cycles then create a another xml file in anim folder named as cycles.xml.
android:cycles represents no.of cycles.

Cycles.xml code:

<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:cycles="4" />
And change the android:interpolator in Shakeanim.xml.

Shakeanim.xml code:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="10000"
    android:fromXDelta="0"
    android:interpolator="@anim/Cycles"
    android:toXDelta="10" />

Enjoy.......


1 comment: