Improve user experience by turning more than 300 checkboxes on/off
I made a simple cooking app where the user can select multiple items and get a list of recipes with selected ingredients. There are two modes for selecting ingredients: by label and by checkbox. In the second mode, you can enter the desired number of ingredients and hit the “Randomize” button or simply press the “Select/Deselect All Ingredients” button. The problem starts with more than 300 checkboxes (386 specifically). The code runs fine, but the GUI stays stuck for too long.
So, I have HashMap <String/CheckBox> checkBoxHashMap where key is the label of the checkbox. To select all (same as unselect all, but with a false value) I’m using this code:
for (CheckBox chkBox: checkBoxHashMap.values()) {
chkBox.setChecked(true);
}
What I tried using:
The problem is that ProgressBar's animations get stuck during the selection/deselection of all CheckBoxes. Also, most of the time the ProgressBar doesn’t even show up (I hide the CheckBox after all the ProgressBar es are selected;
2) use chkBox.jumpDrawablesToCurrentState(); chkBox.setChecked(true) immediately after calling; This is the best performance I can get, but it still lags behind and doesn’t satisfy me.
What I want:
I want to make it more user-friendly (I believe the stuck GUI is not user-friendly at all). I want to implement a soft toggle on/off all checkboxes (chain-like animation) or something like disabling the animation and enabling it after all checkboxes. es have changed their state and redrawn them.
Is there a way to achieve such a goal?
Solution
Honestly, if I were you, I would use RecyclerView to handle this situation.
Displaying 300 items on the screen at the same time is never a good idea: a user can’t need all of them at once, and the system shouldn’t handle that load.
The concept is to reclaim a View, which means that once a View becomes invisible, the resources it needs are freed up and can be reused for another unit of data.
I made an introduction article There are many examples of RecyclerView, take a look
In your particular case, just make the appropriate dataset for the checkbox and change it asynchronously, and the result of using this on the UI thread is just to update the RCV (which is a very lightweight operation compared to the operation you have now).