Android Horizontal Images list with close button on each

Question

I am developing an application in which i am having a view pager with two fragments. In second fragment i want to display the list of images capture from camera or selected from gallery one by one. So the list of images increase after selecting or capturing every image.

I am able to capture the image or select from gallery on click of button which is in fragment two. Every time i do that i save the image in internal storage and the path in array list.

I showed all the images from array list of path in image views scrolling horizontally with close button on each image. Also the close function is in fragment two as the list is in fragment from which i have to remove the path.

So for that i used the highest up voted answer on stack. The link is as:

https://stackoverflow.com/questions/34674576/how-to-show-images-with-horizontal-scrolling-android

Now the need is: I need to show the page or item indicator dots at bottom with the images having close button so that user can know that on which image or page he is.

Below is the image like which i need to develop.

How to do that i am not able to understand. Please guide me. I invested lot of time on that.

Answer 1

I have tried like this and achieved it.

Here is the fragment class:

 public class DisplayImageFragment extends BaseFragment implements ViewPager.OnPageChangeListener {

    private RadioGroup mIndicators;
    private ViewPager mPager;
    private List<Image> sliderItems;
    private Bundle bundle;

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.display_image_fragment, container, false);
        mIndicators = (RadioGroup) getView().findViewById(R.id.page_indicator);
        mPager = (ViewPager) getView().findViewById(R.id.viewPager);

        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        mPager.setOnPageChangeListener(this);

        this.bundle = getArguments();
        if (bundle != null) {
            sliderItems = bundle.getParcelableArrayList(IMAGES_LIST);
        }
        setUpRadioIndicators(sliderItems);

        // build pager adapter
        ViewPagerAdapter adapter = (ViewPagerAdapter) mPager.getAdapter();

        if (adapter != null) {
            adapter.notifyPagerAdapter(sliderItems);
        } else {
            adapter = new ViewPagerAdapter(getContext(), sliderItems);
            mPager.setAdapter(adapter);
        }
    }

    private void setUpRadioIndicators(List<Image> sliderItems) {
        mIndicators.removeAllViews();

        for (int i = 0; i < sliderItems.size(); i++) {
            mIndicators.addView(getIndicator(i));
        }

        // default item
        if (sliderItems.size() > 0) {
            ((RadioButton) mIndicators.getChildAt(0)).setChecked(true);
        }
    }

    private RadioButton getIndicator(int position) {
        RadioButton radioButton = new RadioButton(getContext());
        radioButton.setButtonDrawable(null);
        radioButton.setId(position);

        int btnSize = (int) getResources().getDimension(R.dimen.radio_drawable_size);
        RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(btnSize, btnSize);
        params.setMargins(5, 0, 5, 0);
        radioButton.setLayoutParams(params);

        radioButton.setBackgroundDrawable(getResources()
                .getDrawable(R.drawable.slider_indicator_selector));

        return radioButton;
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        ((RadioButton) mIndicators.getChildAt(position)).setChecked(true);
    }

    @Override
    public void onPageSelected(int position) {
    }

    @Override
    public void onPageScrollStateChanged(int state) {
    }}

Here is the display_image_fragment.xml

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <RadioGroup
        android:id="@+id/page_indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" />

   </RelativeLayout>

Here is the slider_indicator_selected.xml:

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_pressed="true"/>

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_checked="true"/>

    <item android:drawable="@drawable/slider_indicator_selected"
        android:state_focused="true" />

    <item android:drawable="@drawable/slider_indicator_unselected" />

</selector>

Answer 2

I have implemented demo that may help you. you can go through the following a link. Demo