Hello Guys ,
In this tutorial , we are going to create slide animation on android app. we can make android app more attractive using slide animation. In this animation object are slide on left side , right side , up and down. In this app we create four buttons and textview. four buttons are used to perform slide animation.
and
Feel free to visit my previous Animation tutorial.
Move Animation
Slide Animation App MainScreen looking like below picture :
Step 1 : Create a new Project
Step 2 : Create the animation file.
- Go to res folder and create a new Android Resource Directory named "anim". And in the anim resource directory create new animation files. Here We create four animation files. Animation files name are slide_left.xml ,slide_right.xml ,slide_up.xml and slide_down.xml.
- slide_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale android:fromXScale="1"
android:fromYScale="1"
android:toXScale="0"
android:toYScale="1"
android:duration="2000" />
</set>
- slide_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale android:fromXScale="0"
android:fromYScale="1"
android:toXScale="1"
android:toYScale="1"
android:duration="2000" />
</set>
- slide_up.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale android:fromXScale="1"
android:fromYScale="1"
android:toXScale="1"
android:toYScale="0"
android:interpolator="@android:anim/linear_interpolator"
android:duration="2000" />
</set>
- slide_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<scale android:fromXScale="1"
android:fromYScale="0"
android:toXScale="1"
android:toYScale="1"
android:duration="2000" />
</set>
- android:duration : It is used to specify duration for animation.
- android:fromXScale : It is starting X size offset, where 1.0 is no change.
- android:fromYScale : It is starting Y size offset, where 1.0 is no change.
- android:toXScale : It is ending X size offset, where 1.0 is no change.
- android:toYScale : It is ending Y size offset, where 1.0 is no change.
Step 3 : Edit activity_main.xml file
- Here we added four button and textview for perform slide animation.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ps_Inf0"
android:textAllCaps="false"
android:textSize="40sp"
android:textColor="@color/teal_200"
android:layout_centerInParent="true"/>
<Button
android:id="@+id/btn_slide_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide \nLeft"
android:textAllCaps="false"
android:layout_alignParentBottom="true"
android:layout_marginBottom="45dp"
android:layout_marginStart="20dp"/>
<Button
android:id="@+id/btn_slide_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide \nRight"
android:textAllCaps="false"
android:layout_alignParentBottom="true"
android:layout_marginBottom="45dp"
android:layout_marginStart="115dp"/>
<Button
android:id="@+id/btn_slide_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide \nDown"
android:textAllCaps="false"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="20dp"
android:layout_marginBottom="45dp" />
<Button
android:id="@+id/btn_slide_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Slide \nUp"
android:textAllCaps="false"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_marginEnd="115dp"
android:layout_marginBottom="45dp" />
</RelativeLayout>
Step 4 : Implement MainActivity.java class file.
- In this class we can load animation class using Animation class.
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Button slide_left , slide_right , slide_up , slide_down;
TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
slide_left = findViewById(R.id.btn_slide_left);
slide_right = findViewById(R.id.btn_slide_right);
slide_down = findViewById(R.id.btn_slide_down);
slide_up = findViewById(R.id.btn_slide_up);
textView = findViewById(R.id.text);
slide_left.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation animation = AnimationUtils.loadAnimation(
getApplicationContext() , R.anim.slide_left);
textView.startAnimation(animation);
}
});
slide_right.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation animation = AnimationUtils.loadAnimation(
getApplicationContext() , R.anim.slide_right);
textView.startAnimation(animation);
}
});
slide_down.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation animation = AnimationUtils.loadAnimation(
getApplicationContext() , R.anim.slide_down);
textView.startAnimation(animation);
}
});
slide_up.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Animation animation = AnimationUtils.loadAnimation(
getApplicationContext() , R.anim.slide_up);
textView.startAnimation(animation);
}
});
}
}
Output :
If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏
0 Comments