I have an image slider made up of 4 images.I would like to place a different text view on each of these images?

Question

Below is my XML Code for my Image Slider using Viewpager. As you can see below I have one textview already that appears on all 4 images.

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/image_view"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:scaleType="centerCrop"
        />

    <TextView
        android:id="@+id/myImageViewText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/image_view"
        android:layout_alignTop="@+id/image_view"
        android:layout_alignRight="@+id/image_view"
        android:layout_alignBottom="@+id/image_view"
        android:layout_margin="1dp"
        android:gravity="bottom"
        android:textSize="30dp"
        android:text="Welcome to DriftFan"
        android:textStyle="bold"
        android:textAllCaps="true"
        android:textColor="@color/colorPrimary"/>
</RelativeLayout>

Here is my ViewPager XML Code

        <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="204dp"
        android:scaleType="centerCrop"
        ></android.support.v4.view.ViewPager>

And finally here is my class

  public class myTimerTask extends TimerTask {

        @Override
        public void run() {

            if (getActivity()== null) {
                return;

            }
            getActivity().runOnUiThread(new Runnable() {
                @Override
                public void run() {


                        if (viewPager.getCurrentItem() == 0) {
                            viewPager.setCurrentItem(1);
                        } else if (viewPager.getCurrentItem() == 1) {
                            viewPager.setCurrentItem(2);
                        } else if (viewPager.getCurrentItem() == 2) {
                            viewPager.setCurrentItem(3);

                        }


                }


            });
        }
    }
}

Is there a bit of code for my java class where I can manually assign a text view to any of the images?

public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private LayoutInflater layoutInflater;
    private Integer[] images = {R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4};

    public ViewPagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.custom_layout, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image_view);
        imageView.setImageResource(images[position]);

        ViewPager vp = (ViewPager) container;
        vp.addView(view, 0);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        ViewPager vp = (ViewPager)container;
        View view = (View) object;
        vp.removeView(view);



    }
}

Above is the ViewPager adapter class, the basis of my ImageSlidler.

Answer 1

public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private LayoutInflater layoutInflater;
    private Integer[] images = {R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4};
    private String[] texts= {"text1", "text2","text3","text4"};
    public ViewPagerAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return images.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.custom_layout, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image_view);
         TextView tv= (TextView) view.findViewById(R.id.myImageViewText);
        imageView.setImageResource(images[position]);
        tv.setText(texts[position]);

        ViewPager vp = (ViewPager) container;
        vp.addView(view, 0);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

        ViewPager vp = (ViewPager)container;
        View view = (View) object;
        vp.removeView(view);



    }
}

Answer 2

You have the the layout file with ImageView and TextView. For each item of the ViewPager you use the image from images array. Do the same for TextView - create array of texts and in adapter find your TextView and set correct text. The example of Bosco Sabin demonstrates, what you need to do.

Answer 3

xml:

<com.daimajia.slider.library.SliderLayout
            android:id="@+id/product_image"
            android:layout_width="fill_parent"
            android:layout_height="320dp"
            />

activity file :

SliderLayout sliderLayout;
HashMap<String,String> Hash_file_maps ;
sliderLayout = (SliderLayout)findViewById(R.id.product_image);

 @Override
protected void onStop() {
    sliderLayout.stopAutoCycle();
    super.onStop();
}
@Override
public void onSliderClick(BaseSliderView slider) {
    Toast.makeText(this,slider.getBundle().get("extra") + "",Toast.LENGTH_SHORT).show();
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

@Override
public void onPageSelected(int position) {
    Log.d("Slider Demo", "Page Changed: " + position);
}

@Override
public void onPageScrollStateChanged(int state) {}

JSONObject jsonObject = new JSONObject(jsonData);
        JSONArray jsonArray = jsonObject.getJSONArray("pRoductdetailsResult");
        Hash_file_maps = new HashMap<String, String>();

        for(int i=0 ;i < jsonArray.length(); i++ ){
            JSONObject productDetails = jsonArray.getJSONObject(i);
            productModel = new ProductDetailsModel();
            productModel.setpId(String.valueOf(productId));
            //productModel.setAboutproduct(productDetails.getString("aboutproduct"));
            String htmlaboutprouduct=(productDetails.getString("aboutproduct"));
            htmlaboutprouduct = htmlaboutprouduct.replaceAll("<(.*?)\\>","");
            htmlaboutprouduct = htmlaboutprouduct.replaceAll("<(.*?)\\\n","");
            htmlaboutprouduct = htmlaboutprouduct.replaceFirst("(.*?)\\>", "");
            htmlaboutprouduct = htmlaboutprouduct.replaceAll("&nbsp;","");
            htmlaboutprouduct = htmlaboutprouduct.replaceAll("&amp;","");
            productModel.setAboutproduct(htmlaboutprouduct);
            Log.d("aboutproduct : ",htmlaboutprouduct);

            Hash_file_maps.put(productDetails.getString("pName"), productDetails.getString("pImgUrl"));
            setDetails(productModel);
        }

        for(String name : Hash_file_maps.keySet()){

            TextSliderView textSliderView = new TextSliderView(ProductDetailActivity.this);
            textSliderView
                    .description(name)
                    .image(Hash_file_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);
            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);
            sliderLayout.addSlider(textSliderView);
        }
        sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion);
        sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom);
        sliderLayout.setCustomAnimation(new DescriptionAnimation());
        sliderLayout.setDuration(3000);
        sliderLayout.addOnPageChangeListener(this);
    } catch (JSONException e) {
        e.printStackTrace();
    }