I have a series of small images in a scrollView and a way of controlling their opacity with a toggle switch. The toggle has two actions:

  1. Set all images to full opacity
  2. Set all images to low opacity

Normally I would use a slide switch, but the user is able to toggle opacity for individual images by clicking on them. A slide switch would therefore be misleading since more than two states exist.

I was thinking of having two buttons for the corresponding actions. However, since the buttons and images are arranged in series due to limited space, it looks pretty ugly and wasteful of screen space.

What do you think is a good way to do this?

  • Click an image to show or hide it. [show all] [hide all]
    – DaveAlger
    Commented Jan 10, 2015 at 18:20

2 Answers 2


Simply add a the button, and make the icon of two boxes, one heavily shaded, and one lightly shaded.. This will immediately inform the user that this is the button for toggling all of the images' opacities. This is the fastest and least intrusive way of doing things, as it does not require much, but still gets the message across.


You can actually have a customized check box before the image, the checked state should make the image 100 and unchecked state should indicate the 0 opacity ranges. Also you can couple of colors to indicate the same for easy scan-ability of the page for better interaction. You can have a small check on the top to toggle all to 100 and 0 opacity, just as you have currently. The interface will look neat and also will be easy to interact with. Hope this work out.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.