How To Slide Images Using Animation.

CONCEPT

1. Add a image view into a linear layout.

2. Animate it toward left side until it disappear.

3. Remove all views from linear layout.

4. Again add same image view with different image from right side.

5. animate it toward screen center.

LAYOUTS

activity_main.xml 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="learning.com.viewslidewithoutlist.MainActivity">

    <LinearLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/options"
        android:orientation="vertical" />

    <LinearLayout
        android:id="@+id/options"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal">

        <Button
            android:id="@+id/close"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="close" />

        <Button
            android:id="@+id/next"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:text="next" />

    </LinearLayout>


</RelativeLayout>

Output :

CODING

 MainActivity.java

package learning.com.viewslidewithoutlist;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
 * This class swipes image in linear layout.
 */

public class MainActivity extends AppCompatActivity {

    LinearLayout layout;
    Button next, close;

    /*USED FOR IMAGE RESOURCE ARRAY*/
    int i = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        /*IMAGE RESOURCE ARRAY*/
        final int[] imgRes = {R.drawable.image, R.drawable.nexus};

        /*FINDING IDS*/
        layout = (LinearLayout) findViewById(R.id.layout);
        next = (Button) findViewById(R.id.next);
        close = (Button) findViewById(R.id.close);


        /*CREATES A IMAGE VIEW OBJECT*/
        final ImageView imageView = new ImageView(getApplicationContext());
        imageView.setImageResource(imgRes[i]);

        /*ADDS IMAGE VIEW IN LINEAR LAYOUT*/
        layout.addView(imageView);

        /*NEXT BUTTON ON CLICK LISTENER*/
        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*DISABLE CLICK ON NEXT BUTTON UNTIL NEXT IMAGE APPEARS*/
                next.setClickable(false);

                /*CONDITION TO LOOP IMAGE ARRAY*/
                if (i < 1) {
                    i++;
                } else {
                    i = 0;
                }

                /*ANIMATION ON IMAGE WITH COMPLETE LISTENER*/
                imageView.animate().translationX(-1000)
                        .setListener(new AnimatorListenerAdapter() {
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        super.onAnimationEnd(animation);

                        /*REMOVES ALL VIEW FROM LINEAR LAYOUT*/
                        layout.removeAllViews();

                        /*SETS NEXT IMAGE IN IMAGE VIEW*/
                        imageView.setImageResource(imgRes[i]);

                        /*SETS X TRANSACTION OUTSIDE SCREEN VIEW*/
                        imageView.setTranslationX(1000);

                        /*ADD IMAGE VIEW INTO LINEAR LAYOUT*/
                        layout.addView(imageView);

                        /*ANIMATE IMAGE VIEW TOWARD SCREEN*/
                        imageView.animate().translationX(0)
                                .setListener(new AnimatorListenerAdapter() {
                            @Override
                            public void onAnimationEnd(Animator animation) {
                                super.onAnimationEnd(animation);
                                imageView.setTranslationX(0);

                                /*AGAIN ENABLE CLICK ON NEXT BUTTON*/
                                next.setClickable(true);
                            }
                        });
                    }
                });


            }
        });

        /*ON CLICK LISTENER FOR CLOSE BUTTON*/
        close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                /*CLOSES THE ACTIVITY*/
                finish();
            }
        });
    }
}

Share on Google Plus

About Mayank Sharma

Mayadi is a knowlage source. You can learn, explore and play many things in a proper way. Mayadi Provides Best, Perfect and Quality Information. subscribe our youtube channel to be updated and and don't forget to take a look on our blog within every week, because we are here to upgrade your knowladge. We love to see you again and again and again...