Android custom input component with graphical representation?

Question

I am looking all over the net to find out a code to make a custom input component that I need but didn't stumble upon anything similar. Here's how I'd like it to work:

• the purpose is to input the quantity (a number)
• the quantity is to be changed with two buttons (+ & -)
• there should be a button to accept the input

Here's the tricky part - the graphical representation of the input:

I'd like to have two pictures representing the currently selected quantity in the following way:

q = 0: Both pictures are dimmed

q = 1: The upper-left quarter of the first picture is bright (normal) and the rest is dimmed

q = 2: The upper half of the first picture is bright (normal) and the rest is dimmed

q = 3: The upper half + lower-left quarter of the first picture is bright (normal) and the rest is dimmed

q = 4: The first picture is bright and the second one is dimmed

q = 5: The first picture is bright and the upper-left quarter of the second picture is bright

. . .

q = 8: Both pictures are bright.

I hope I've explained that in an understandable way.

The question is: Do I have to make 5 instances of each picture (dimmed, bright upper-left quarter, bright upper half, bright upper half + lower-left quarter, bright) or is it possible to have only one instance of each picture (bright) and to dim the portions (as necessary) with the code?

Of course, I'd appreciate a link to anything that would be of any help or chunk of the code.

Answer 1

I think you should be able to handle all of your conditions with just 2 images. But use a combination linearlayout,framelayout and imageviews. Some thing like this to represent one image.

FrameLayout
    Imageview
    LinearLayout (Divided to 4 cells using the weight property)

You can change the alpha value of the bg color of the linear layouts to get the dimmed effect.

This can also be done using different slices of the images and changing the alpha value of the imageview. You will need to find what suits you more. It wont be easy to find any code samples as this is not a common UI found in apps.