5

I have a question which is related to the GUI design in android.
If you look Android design architecture, We have tabular structure in design view. We can draw buttons in rows and in columns, we can draw image view and many more but all we will do in matrix.…. As in it mentioned in this following image. enter image description here

But I have seen many interesting GUI design in Android, which looks very beautiful and does not look like traditional design view (in matrix form).

Check the following picture with buttons in zigzag manner. I have drawn the red square on it. enter image description here

I am not sure how it could be designed and how to catch the onclick function for different images and buttons. I hope i have explained my question very well, Kindly tell me if it is not clear. I an looking for healthy response and help.

abidkhan303
  • 1,761
  • 3
  • 18
  • 31

3 Answers3

3

I haven't done this but you can create your own drawable for the background and use rotate on a canvas object to rotate the image. Here is a SO that talks about it and the Docs. Someone may have a better idea but I think this should work for what you want.

Community
  • 1
  • 1
codeMagic
  • 44,549
  • 13
  • 77
  • 93
  • 1
    You could also extend an existing class like Button, override onDraw() and make it do whatever you want! – Simon Mar 22 '13 at 16:44
  • 1
    Or you could make a custom ViewGroup subclass which handles absolutely everything for you and call it `ZigZagLayout`! – Tyler MacDonell Mar 22 '13 at 16:55
0

i think that you have to create a custom compount as explained in the official documentation of android. I am looking too for some tutorials that can explain very well all this. here is the link of the official documentation link. look at this link too, he is defining a custom view and manipulating it from an activity. It's not what you are looking for but just to have an idea how it works, you can extand the Button class and override the onDraw method and draw whatever you want.

Adil
  • 69
  • 1
  • 6
0

While I haven't done it myself, I was just reading about how to do something similar using image maps.

Take a look at this link:

http://blahti.wordpress.com/2012/06/26/images-with-clickable-areas/

Essentially, what the article describes is having two images, one with the appearance of buttons and one with a color-coded layer of where the buttons would be. For example, if there were 3 buttons, you would have 3 shapes of 3 different colors (red, green, blue, for example).

The image with the colored shapes would not be visible but when the onclick fires you find the color of the pixel that is clicked. Because each touchable area is a different color, you can know which spot on the screen is touched.

It sounds like an interesting idea. Give the article a read. Hope it helps.

brianestey
  • 8,202
  • 5
  • 33
  • 48