How to assign buttons on different spots of 70 images separately?

Question

My Problem:

I have 70 images, and on each image I want to put transparent button in such a way that when user taps on it, it plays a short audio regarding the spot on image. Images are displaying in a ViewPager.

My Solution:

Now what I have in mind is I can create 70 fragments each containing respective image as background and I can assign button on each spot easily and assign actions to those buttons which will play their respective audio.

But

this doesn’t look like a good approach to include 70 fragments in a single app.

So how can I achieve this, and what would be a better approach I can use?

Answer 1

We can just have one fragment and create an ArrayList of Map(Button, RelatedAudioFile) data structure for holding buttons and related audio files. ArrayList index represents the page number.

Example: Now lets say we have 3 viewPages. As most of the PagerAdapter index start from "0", let say Page-0 contains 3 buttons, Page-1 contains 1 button, Page-2 contains 2 buttons.

Pseudocode:

class PagerHolder extends Fragment {

//buttons list - here, arrayList index represents page number
//and at each index we have map of buttons (buttons in each of these pages) and the related audio files
private ArrayList<Map<Button, RelatedAudioFile>> pageButtonsList = new ArrayList<>();
//pager view
private ViewPager viewPager;
//pager adapter
private PagerAdapter pagerAdapter;
//current page number -- page in which we are in right now
private int currentpageNumber = 0;

//buttonListener -- one button listener for all the buttons in all the pages.
private View.OnClickListener listener = new View.OnClickListener() {
    @Override
    public void onClick(View buttonView) {
         //here you can play the audio.
         //buttonView -- is the same button-object that was pressed.
        ((RelatedAudioFile)pageButtonsList.get(currentpageNumber).get(buttonView)).play();

    }
};

 @Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    pagerAdapter = new PagerAdapter(getChildFragmentManager());

    //add buttons to the list
    //page 0 buttons
    HashMap<Button, RelatedAudioFile> page0Buttons = new HashMap<>();
    page0Buttons.put(new Button(context), new RelatedAudioFile());
    page0Buttons.put(new Button(context), new RelatedAudioFile());
    page0Buttons.put(new Button(context), new RelatedAudioFile());
    pageButtonsList.add(page0Buttons)

    //Adding page 1 buttons:
    HashMap<Button, RelatedAudioFile> page1Buttons = new HashMap<>();
    page1Buttons.put(new Button(context), new RelatedAudioFile());
    pageButtonsList.add(page1Buttons);

    //Adding page 2 buttons:
    HashMap<Button, RelatedAudioFile> page2Buttons = new HashMap<>();
    page2Buttons.put(new Button(context), new RelatedAudioFile());
    page2Buttons.put(new Button(context), new RelatedAudioFile());
    pageButtonsList.add(page2Buttons);

    for(Map<Button, RelatedAudioFile> pageButtons :pageButtonsList) {
       for(Button button : pageButtons.keySet()) {
           button.setOnClickListener(listener);
        }
    }

}



 @Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_editor_pager, container, false);

    viewPager = (ViewPager) v.findViewById(R.id.view_pager);
    viewPager.setAdapter(pagerAdapter);

    return v;
}



 private class PagerAdapter extends FragmentPagerAdapter {

    private ButtonFragment buttonFragment;

    private PagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int pageNumber) {
        currentpageNumber = pageNumber;

       //pass the buttons to the fragment so that it can add these buttons to the screen 
        buttonFragment = ButtonFragment.newInstance(pageButtonsList.get(pageNumber).keySet());

        //to add buttons on screen programatically at certain position you can refer here:
        // http://stackoverflow.com/questions/3441475/android-change-absolute-position-of-a-view-programmatically
    }

    //number of pages
    @Override
    public int getCount() {
        return 70;
    }
}