Adding Onclick() to items in a ArrayList

so I've created a horizontal scroll consisting of multiple items (images and text), but how can I add an on-click event to each of these items.

I have followed this tutorial to get where I am now: https://www.youtube.com/watch?v=sTJm1Ys9jMI

MainActivity.java:

 CarouselPicker carouselPicker1, carouselPicker2, carouselPicker3;

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


        carouselPicker1 = (CarouselPicker) findViewById(R.id.carouselPicker1);
        carouselPicker2 = (CarouselPicker) findViewById(R.id.carouselPicker2);
        carouselPicker3 = (CarouselPicker) findViewById(R.id.carouselPicker3);


//Carousel 1 with all images

        List<CarouselPicker.PickerItem> itemsImages = new ArrayList<>();
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher_round));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        CarouselPicker.CarouselViewAdapter imageAdapter = new CarouselPicker.CarouselViewAdapter(this, itemsImages, 0);
        carouselPicker1.setAdapter(imageAdapter);

        //Carousel 2 with all text

        List<CarouselPicker.PickerItem> textItems = new ArrayList<>();
        textItems.add(new CarouselPicker.TextItem("One", 20));
        textItems.add(new CarouselPicker.TextItem("Two", 20));
        textItems.add(new CarouselPicker.TextItem("Three", 20));
        CarouselPicker.CarouselViewAdapter textAdapter = new CarouselPicker.CarouselViewAdapter(this, textItems, 0);
        carouselPicker2.setAdapter(textAdapter);



        //Carousel 3 with both

        List<CarouselPicker.PickerItem> mixItems = new ArrayList<>();
        mixItems.add(new CarouselPicker.TextItem("One", 20));
        mixItems.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher_round));
        mixItems.add(new CarouselPicker.TextItem("Three", 20));
        mixItems.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        CarouselPicker.CarouselViewAdapter mixAdapter = new CarouselPicker.CarouselViewAdapter(this, mixItems, 0);
        carouselPicker3.setAdapter(mixAdapter);

Activity_Main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="MainActivity">


    <in.goodiebag.carouselpicker.CarouselPicker
        android:id="@+id/carouselPicker1"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:items_visible="three"

        />

    <in.goodiebag.carouselpicker.CarouselPicker
        android:id="@+id/carouselPicker2"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:items_visible="three"
        />


    <in.goodiebag.carouselpicker.CarouselPicker
        android:id="@+id/carouselPicker3"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:background="#FFF"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:items_visible="three"
        />
</LinearLayout>

Gradel Scripts:

dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'


//add Library
implementation "com.github.Vatican-Cameos:CarouselPicker:v1.0"

}

allprojects {
repositories {
    google()
    jcenter()
    maven { url 'https://jitpack.io'}
}

}

Any ideas how I can add a button functionality to each image shown in MainActivy.java? thanks in advanced!

Ok Here is the New Code in MainActivity:

package com.example.carouselpicker;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

import in.goodiebag.carouselpicker.CarouselPicker;

public class MainActivity extends AppCompatActivity {
















    CarouselPicker carouselPicker1, carouselPicker2, carouselPicker3;

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


        carouselPicker1 = findViewById(R.id.carouselPicker1);
        carouselPicker2 = findViewById(R.id.carouselPicker2);
        carouselPicker3 = findViewById(R.id.carouselPicker3);


//Carousel 1 with all images

        List<CarouselPicker.PickerItem> itemsImages = new ArrayList<>();
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher_round));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        itemsImages.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        CarouselPicker.CarouselViewAdapter imageAdapter = new CarouselPicker.CarouselViewAdapter(this, itemsImages, 0);
        carouselPicker1.setAdapter(imageAdapter);

        //Carousel 2 with all text

        List<CarouselPicker.PickerItem> textItems = new ArrayList<>();
        textItems.add(new CarouselPicker.TextItem("One", 20));
        textItems.add(new CarouselPicker.TextItem("Two", 20));
        textItems.add(new CarouselPicker.TextItem("Three", 20));
        CarouselPicker.CarouselViewAdapter textAdapter = new CarouselPicker.CarouselViewAdapter(this, textItems, 0);
        carouselPicker2.setAdapter(textAdapter);



        //Carousel 3 with both

        List<CarouselPicker.PickerItem> mixItems = new ArrayList<>();
        mixItems.add(new CarouselPicker.TextItem("One", 20));
        mixItems.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher_round));
        mixItems.add(new CarouselPicker.TextItem("Three", 20));
        mixItems.add(new CarouselPicker.DrawableItem(R.mipmap.ic_launcher));
        CarouselPicker.CarouselViewAdapter mixAdapter = new CarouselPicker.CarouselViewAdapter(this, mixItems, 0);
        carouselPicker3.setAdapter(mixAdapter);




        carouselPicker1.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //position of the selected item
                switch (position) {
                    case 0:

                        Toast toast = Toast.makeText(getApplicationContext(),
                                "This is a message displayed in a Toast",
                                Toast.LENGTH_SHORT);

                        toast.show();

                        break;

                    case 1:
                        Toast oast = Toast.makeText(getApplicationContext(),
                                "This is a message displayed in a Toast",
                                Toast.LENGTH_SHORT);

                        oast.show();
                        break;

                    case 2:
                        // do smth else
                        break;
                    //case 3, etc...


                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });





    }



}
enter code here

1 answer

  • answered 2019-02-10 13:17 Pavel B.

    You should do as explained here:

    https://github.com/GoodieBag/CarouselPicker

    Set listener for each of the Carousel pickers, and then use switch-case for specific logic for each position:

    carouselPicker.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    //position of the selected item
                    switch (position) {
                            case 0:
                                //do smth
                                Toast.makeText(MainActivity.this, "first item selected", Toast.LENGTH_SHORT).show();
                            break;
    
                            case 1:
                                // do smth else
                                Toast.makeText(MainActivity.this, "second item selected", Toast.LENGTH_SHORT).show();
                            break;
                            //case 3, etc... 
    
    
                        }
    
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });