Set a title and description for each photo in carouse android

Question

I am using a carouselView library for my app. https://github.com/sayyam/carouselview

The images are displaying and the carousel is working but how do I set a title and description below each image as it slides for each image.

I have a string containing all the title and text for each image.

e.g

<string name="first_image_title">First image title</string>
<string name="first_image_desc">This is a description for first image title</string>

<string name="second_image_title">2nd image title</string>
<string name="second_image_desc">This is a description for the second image title</string>

<string name="third_image_title">3rd image title</string>
<string name="third_image_desc">This is a description for the third image title</string>

All these are supposed to be placed below the sliding images (for each image.)

fragment_safety.xml

Containing the image and where the title and description for each image supposed to be

<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="fragments.SafetyFragment">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/tabContent"
    android:background="@drawable/rounded_corner2">

    <com.synnapps.carouselview.CarouselView
        android:id="@+id/carouselView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:fillColor="#FFFFFFFF"
        app:pageColor="#00000000"
        app:radius="6dp"
        app:slideInterval="5000"
        app:strokeColor="#FF777777"
        app:strokeWidth="1dp"/>

 <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textTitle"
        android:layout_below="@+id/carouselView"/>

   <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/textDesc"
        android:layout_below="@+id/textTitle"/>

</RelativLayout>

SafetyFragment.java

According to the doc, I am supposed to implement ViewListener for customView but I cant wrap my head around how to do this....Get all the titles and description in the string and set them for each of the images sliding.

public class SafetyFragment extends Fragment {

private CarouselView carouselView;
private int[] sampleImages = {R.drawable.image1, 
R.drawable.image2, R.drawable.image3, 
R.drawable.image4, R.drawable.image5, 
R.drawable.image6};

public SafetyFragment() {
    // Required empty public constructor
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
   View root = inflater.inflate(R.layout.fragment_safety, container, false);
   carouselView = root.findViewById(R.id.carouselView);


    ImageListener imagesListenerx = new ImageListener() {
        @Override
        public void setImageForPosition(int position, ImageView imageView) {
            Glide.with(SafetyFragment.this).load(sampleImages[position]).into(imageView);
        }
    };

    ViewListener viewListener = new ViewListener() {
        @Override
        public View setViewForPosition(int position) {
            View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
            //set view attributes here

            return customView;
        }
    };

    carouselView.setPageCount(sampleImages.length);
    carouselView.setViewListener(viewListener);

   return root;
 }

}

Answer 1

I use this way:

ViewListener viewListener = new ViewListener() {
        @Override
        public View setViewForPosition(int position) {
            View customView = getLayoutInflater().inflate(R.layout.custom_carousel, null);
            //set view attributes here
            TextView car_title = (TextView) customView.findViewById(R.id.textTitle);
            ImageView car_image = (ImageView) customView.findViewById(R.id.imageView);          

            car_title.setText(sampleTitle[position]);
            car_image.setImageResource(sampleImages[position]);
            return customView;
        }
    };

While custom view in custom_carousel.xml will be like this:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/textDesc"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        tools:src="@tools:sample/avatars[1]" />

    <TextView
        android:id="@+id/textTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:text="test" />   
    
</RelativeLayout>

Answer 2

I found a way to do this.

1.Declare a string array for each text you want to display in each carousel

private String[] titles = {"One", "Two", "Three"}

2. Set a custom view listener and get the view in the layout

ViewListener viewListener = new ViewListener() {
    int i;
    @Override
    public View setViewForPosition(int position) {
        View customView = getLayoutInflater().inflate(R.layout.fragment_safety, null);
        //set view attributes here

        safety_title = customView.findViewById(R.id.safetyTextTitle);

        safety_images = customView.findViewById(R.id.safetyImages);          
        
        Glide.with(SafetyFragment.this).load(sampleImages[position]).into(safety_images);

        //Very Important
        safety_title.setText(titles[position]);
        return customView;
    }
};

Answer 3

As per the documentation you can create a custom view and bind views with the data

 ViewListener viewListener = new ViewListener() {

    @Override
    public View setViewForPosition(int position) {
        View customView = getLayoutInflater().inflate(R.layout.view_custom, null);
        //set view attributes here

        return customView;
    }
};