javaandroidcustom-adapter

Moving an ImageView within a ListView


I'm looking to make it so that onClick my ImageView moves from the left side of my ListView to the right side.

I've tried applying an animation to the ImageView directly into the adapter however this hasn't worked and I do not know what I am doing wrong.

If anyone can point me in the right direction that would be great, Thank you in advance.

CustomAdapter.java

package com.example.customlistview;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class CustomAdapter extends BaseAdapter {

    Context context;
    int[] images;
    ImageView image;
    LayoutInflater mInflater;

    public CustomAdapter(Context c, int[] i) {
        this.context = c; //sets the application context that has been passed to the adapter
        this.images = i; //sets the images array that has been passed to the adapter
        mInflater = (LayoutInflater.from(context)); //sets the layout inflater from context
    }

    @Override
    public int getCount() { //total number of elements in the array
        return images.length;
    }

    @Override
    public Object getItem(int position) { //gets the item using the position
        return null;
    }

    @Override
    public long getItemId(int position) { //gets the item position
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) { //this is used to update the view

        convertView = mInflater.inflate(R.layout.custom_layout, null); //inflates layout with custom_layout

        image = convertView.findViewById(R.id.imageView); //finds the imageview in the new layout
        image.setImageResource(images[position]); //sets image resource to image array and viewposition

        final int p = position; //finalises position to be used in onClick method
        image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Animation animation = AnimationUtils.loadAnimation(context, R.anim.slide_right); //loads in animation from folder
                image.startAnimation(animation);

            }
        });
        return convertView; //returns the
    }

}

MainActivity.java

package com.example.customlistview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    ListView mListView; //listview holder

    int[] images = {R.drawable.img01, //images array
    R.drawable.img02,
    R.drawable.img03,
    R.drawable.img04};

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

        mListView = findViewById(R.id.listView); //find the listview in view

        CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), images); //new customadapter with images array
        //passes information of images and application context to the item adapter
        mListView.setAdapter(customAdapter); //sets the listview values with customAdapter

    }

}

Solution

  • I solved it and probably spent way too much time overthinking it.

    I simply made a new method inside the adapter that held the animation code and set up a onClick listener inside the getView method that runs the animation

    I don't know exactly what was causing the problem or what solved it but it works so im happy.

    image.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View convertView) {
                    runAnimation(convertView); //Animates the ImageView
                }
            });
            return convertView;
    
    public void runAnimation(View convertView) {
            ImageView img = convertView.findViewById(R.id.img2); //get the imageView from the child
            //Animates the Image within the child
            TranslateAnimation animation = new TranslateAnimation(0.0f, 400.0f,
                    0.0f, 0.0f);          //  new TranslateAnimation(xFrom,xTo, yFrom,yTo)
            animation.setDuration(5000);  // animation duration
            img.startAnimation(animation);  // start animation
        }