How to change Text of the TextView on sliding of images using daimajia/AndroidImageSlider Library?

Question

I am trying to use daimajia/AndroidImageSlider library for imageslider in my app. I am trying to change the text of a TextView with the change of the image in slider but i am not able to see any text inside the TextView even and one more thing the images are not coming in the sequence in which i have inserted inside the HashMap.

My Code is :-

public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View v = inflater.inflate(R.layout.fragment_home, container, false);

    tv_slider=(TextView)v.findViewById(R.id.tv_slider);
    tv_slider.setTypeface(EasyFonts.robotoLight(this.getActivity()));
    tv_button=(TextView)v.findViewById(R.id.tv_button);
    tv_button.setTypeface(EasyFonts.robotoLight(this.getActivity()));


    mViewPager = (SliderLayout) v.findViewById(R.id.pager);


    HashMap<String,Integer> file_maps = new HashMap<String, Integer>();
    file_maps.put("Ecommerce",R.drawable.ecommerce);
    file_maps.put("Digital Marketing",R.drawable.digital_marketing);
    file_maps.put("Explainer Videos",R.drawable.explainer);
    file_maps.put("It Services", R.drawable.it_services);
    file_maps.put("Mobile App",R.drawable.mobile_app);
    file_maps.put("SEO",R.drawable.seoimage);
    file_maps.put("Software",R.drawable.software);
    file_maps.put("Web Design", R.drawable.webdesign);

    for(String name : file_maps.keySet()){
        DefaultSliderView textSliderView = new DefaultSliderView(getActivity());
        // initialize a SliderLayout
        textSliderView

                .image(file_maps.get(name))
                .setScaleType(BaseSliderView.ScaleType.Fit)
                .setOnSliderClickListener(this);


        textSliderView.bundle(new Bundle());
        textSliderView.getBundle()
                .putString("extra",name);

        mViewPager.addSlider(textSliderView);
    }

    mViewPager.setPresetTransformer(SliderLayout.Transformer.Accordion);
    mViewPager.setIndicatorVisibility(PagerIndicator.IndicatorVisibility.Invisible);
    mViewPager.setDuration(4000);
    mViewPager.setCustomIndicator((PagerIndicator) v.findViewById(R.id.indicator));


    mViewPager.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View view, MotionEvent motionEvent) {

            switch(motionEvent.getAction())
            {
                case MotionEvent.ACTION_DOWN:
                    Log.w("touched","down");
                    mViewPager.stopAutoCycle();
                    return true;


                case MotionEvent.ACTION_UP:
                    Log.w("touched","up");
                    mViewPager.startAutoCycle();
                    return true;

            }



            return true;
        }
    });


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

            switch (position){

                case 0:
                    tv_slider.setText(getString(R.string.es_content));
                    break;

                case 1:
                    tv_slider.setText(getString(R.string.dm_content));
                    break;

                case 2:
                    tv_slider.setText(getString(R.string.ev_content));
                    break;

                case 3:
                    tv_slider.setText(getString(R.string.it_content));
                    break;

                case 4:
                    tv_slider.setText(getString(R.string.md_content));
                    break;

                case 5:
                    tv_slider.setText(getString(R.string.seo_content));
                    break;

                case 6:
                    tv_slider.setText(getString(R.string.sd_content));
                    break;

                case 7:
                    tv_slider.setText(getString(R.string.wd_content));
                    break;

            }

        }

        @Override
        public void onPageSelected(int position) {

            currentPage = position;

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });


    return v;


}

Answer 1

Try to put your below method in OnPageSelected

 @Override
public void onPageSelected(int position) {

switch (position){

         case 0:
                tv_slider.setText(getString(R.string.es_content));
                    break;

         case 1:
                tv_slider.setText(getString(R.string.dm_content));
                    break;

         case 2:
                  tv_slider.setText(getString(R.string.ev_content));
                    break;
           .
           .
           .

            }
}

Answer 2

I have Fixed the issue of Random images coming into the slider by replacing HashMap with LinkedHashMap and attaching text with the change of slides with the help of answer of ABDevelopers. I hope below code will help other developers aswell.

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

        tv_slider=(TextView)v.findViewById(R.id.tv_slider);
        tv_slider.setTypeface(EasyFonts.robotoLight(this.getActivity()));
        tv_button=(TextView)v.findViewById(R.id.tv_button);
        tv_button.setTypeface(EasyFonts.robotoLight(this.getActivity()));


        mViewPager = (SliderLayout) v.findViewById(R.id.pager);


        final LinkedHashMap<String,Integer> file_maps = new LinkedHashMap<String, Integer>();
        file_maps.put("Ecommerce",R.drawable.ecommerce);
        file_maps.put("Digital Marketing",R.drawable.digital_marketing);
        file_maps.put("Explainer Videos",R.drawable.explainer);
        file_maps.put("It Services", R.drawable.it_services);
        file_maps.put("Mobile App",R.drawable.mobile_app);
        file_maps.put("SEO",R.drawable.seoimage);
        file_maps.put("Software",R.drawable.software);
        file_maps.put("Web Design", R.drawable.webdesign);

        for(String name : file_maps.keySet()){
            DefaultSliderView textSliderView = new DefaultSliderView(getActivity());
            // initialize a SliderLayout
            textSliderView

                    .image(file_maps.get(name))
                    .setScaleType(BaseSliderView.ScaleType.Fit)
                    .setOnSliderClickListener(this);


            textSliderView.bundle(new Bundle());
            textSliderView.getBundle()
                    .putString("extra",name);

            mViewPager.addSlider(textSliderView);
        }

        mViewPager.setPresetTransformer(SliderLayout.Transformer.Accordion);
        mViewPager.setIndicatorVisibility(PagerIndicator.IndicatorVisibility.Invisible);
        mViewPager.setDuration(4000);
        mViewPager.setCustomIndicator((PagerIndicator) v.findViewById(R.id.indicator));
        mViewPager.addOnPageChangeListener(this);

        mViewPager.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {

                switch(motionEvent.getAction())
                {
                    case MotionEvent.ACTION_DOWN:
                        Log.w("touched","down");
                        mViewPager.stopAutoCycle();
                        return true;
                    //break;

                    case MotionEvent.ACTION_UP:
                        Log.w("touched","up");
                        mViewPager.startAutoCycle();
                        return true;
                    //break;
                }



                return true;
            }
        });


        mViewPager.addOnPageChangeListener(new OnPageChangeListener() {


            @Override
            public void onPageSelected(int position) {
                switch (position){

                    case 0:
                        tv_slider.setText(getString(R.string.es_content));
                        break;

                    case 1:
                        tv_slider.setText(getString(R.string.dm_content));
                        break;

                    case 2:
                        tv_slider.setText(getString(R.string.ev_content));
                        break;

                    case 3:
                        tv_slider.setText(getString(R.string.it_content));
                        break;

                    case 4:
                        tv_slider.setText(getString(R.string.md_content));
                        break;

                    case 5:
                        tv_slider.setText(getString(R.string.seo_content));
                        break;

                    case 6:
                        tv_slider.setText(getString(R.string.sd_content));
                        break;

                    case 7:
                        tv_slider.setText(getString(R.string.wd_content));
                        break;

                }



            }


            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {




            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });






        return v;


    }