Is it possible to set GIF image on slider view(have four layouts)

Question

To create slider screen I have followed this and successfully achieved like image,

I want to set GIF image instead of normal png image, for that I want to initiate that imageview.

How can I get the ID of an ImageView that are in int[] like

layouts = new int[]{
                R.layout.slide_welcome_one,
                R.layout.slide_welcome_two,
                R.layout.slide_welcome_three,
                R.layout.slide_welcome_four
        };

Complete class is like

public class WelcomeActivity extends AppCompatActivity implements View.OnClickListener{

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;
    private PrefManager prefManager;
    View view;


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

        prefManager = new PrefManager(this);

        /*initialize_compon*/
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        btnSkip = (Button) findViewById(R.id.btn_skip);
        btnNext = (Button) findViewById(R.id.btn_next);

        /*add slider layouts*/
        layouts = new int[]{
                R.layout.slide_welcome_one,
                R.layout.slide_welcome_two,
                R.layout.slide_welcome_three,
                R.layout.slide_welcome_four
        };

        // Making notification bar transparent
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

        // adding bottom dots
        addBottomDots(0);

        // making notification bar transparent
        changeStatusBarColor();

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        btnSkip.setOnClickListener(this);
        btnNext.setOnClickListener(this);
    }

    private void changeStatusBarColor() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            Window window = getWindow();
            window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
            window.setStatusBarColor(Color.TRANSPARENT);
        }
    }

    private void addBottomDots(int currentPage) {
        dots = new TextView[layouts.length];

        int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
        int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;"));
            dots[i].setTextSize(35);
            dots[i].setTextColor(colorsInactive[currentPage]);
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn_skip:
                launchHomeScreen();
                break;

            case R.id.btn_next:
                int current = getItem(+1);
                if (current < layouts.length) {
                    // move to next screen
                    viewPager.setCurrentItem(current);
                } else {
                    launchHomeScreen();
                }
                break;
        }
    }

    private void launchHomeScreen() {
        //call activity
        finish();
    }

    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }

    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);

            // changing the next button text 'NEXT' / 'GOT IT'
            if (position == layouts.length - 1) {
                // last page. make button text to GOT IT
                btnNext.setText(getString(R.string.start));
                btnSkip.setVisibility(View.GONE);
            } else {
                // still pages are left
                btnNext.setText(getString(R.string.next));
                btnSkip.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };

    private class MyViewPagerAdapter extends PagerAdapter{

        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(layouts[position], container, false);
            container.addView(view);

            return view;
        }

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

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


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

You can give same id for ImageView in all four layouts and use that in your **MyViewPagerAdapter** adapter. — Yamini Balakrishnan, Feb 15 '18 at 09:05
in your MyViewPagerAdapter contructor, pass the gif resource Id you want to set , and in the InstantiateItem, get the ImageView from inflated view. Then using this library on post : https://stackoverflow.com/a/31639737/4336375 display the gif. — Mohit, Feb 15 '18 at 09:08
yes it is possible! you just need to set gif image runtime with glide Lib. — SahdevRajput74, Feb 15 '18 at 09:11
@YaminiBalakrishnan I did like same only. Problem on getting view!!! — Arnold Brown, Feb 15 '18 at 09:25
@SahdevRajput74 yes that is possible with glide, my issue is to get an ID from the view which are in as [ ] — Arnold Brown, Feb 15 '18 at 09:28
@Mohit cann't we get the image directly like .load(getResources().getDrawable(R.drawable.sixer_gif) — Arnold Brown, Feb 15 '18 at 09:32
I haven't worked lately on the same, but last time i worked on it, it gives a static result. I had to , at that time put it in a webview. Glide is there. use it. — Mohit, Feb 15 '18 at 09:48
@YaminiBalakrishnan Ya working (mistake I made is that an ID of one layout is different so that it return null). Now changed to single munniamma layout. Thank You — Arnold Brown, Feb 15 '18 at 10:55
@YaminiBalakrishnan it may happen and thanks for your help<3 — Arnold Brown, Feb 15 '18 at 11:26

Yamini Balakrishnan · Accepted Answer · 2018-02-15T10:05:00.990

Actually, you can change your adapter like below:

 public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;
        int[] imageDrawables = new int[]{
                R.drawable.ic_discount,
                R.drawable.ic_discount,
                R.drawable.ic_discount,
                R.drawable.ic_discount
        };    // Your Gif Images

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(layouts[position], container, false);
            ImageView image = (ImageView) view.findViewById(R.id.image);
            Glide.with(WelcomeActivity.this).asGif().load(imageDrawables[position]).into(image);
            container.addView(view);

            return view;
        }

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

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


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }

If you would like to make it much simpler, you can do the following changes in your adapter, so that you can use only one layout & can do your customization.

   public class MyViewPagerAdapter extends PagerAdapter {
    private LayoutInflater layoutInflater;
    int[] imageDrawables = new int[]{
            R.drawable.ic_food,
            R.drawable.ic_movie,
            R.drawable.ic_discount,
            R.drawable.ic_travel
    };   // Your Gif Images

    String[] titles = new String[]{ "Food", "Movie", "Discount", "Travel"};
    String[] description = new String[]{ "Food Description", "Movie Description", "Discount Description", "Travel Description"};


    public MyViewPagerAdapter() {
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = layoutInflater.inflate( R.layout.welcome_slide1, container, false);
        ImageView image = (ImageView) view.findViewById(R.id.image);
        TextView titleView = (TextView) view.findViewById(R.id.title);
        TextView descView = (TextView) view.findViewById(R.id.desc);

        Glide.with(WelcomeActivity.this).asGif().load(imageDrawables[position]).into(image);
       // image.setImageDrawable(getResources().getDrawable(imageDrawables[position]));
        titleView.setText(titles[position]);
        descView.setText(description[position]);

        container.addView(view);

        return view;
    }

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

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


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        View view = (View) object;
        container.removeView(view);
    }
}

Is it possible to set GIF image on slider view(have four layouts)

1 Answers1