I'll need to implement a UI that reflects the layout of a real object. Below is the layout that the client wants. Each black block is a button, so it need a custom drawable, listeners, states, etc.
I'd like to use a custom implementation of the Button widget, but as far as I know they only accept rectangular touch targets and laying them out could be tricky.
What would you use to achieve this layout?
Please note: the 2 central button should be a semicircle cutted in half (with some padding between the 2), not this strange shieldy shape, I'm just not that good with Photoshop.
EDIT: As suggested in this question I could use a TouchListener on the layout and fake a click on the right button. The main problem with this solution is that I'll need to know the bounds of the drawable, not the rectangular ones of the button's bounding box (that is always rectangular). How could I do that?
Related
I try to create a custom button where a circular shape is cut out from a rectangular button, see mockup.
I already looked into the Outline class but it doesn't provide subtraction, only rects and ovals, no combination of them.
Also, I thought of setting android:background to a custom drawable but I couldn't succeed. The drawable consisted of a layer-list with a colored rect and a white oval but the oval was always placed at a different position depending on the device's resolution.
Do I really have to go through the pain of creating my own View class? That seems to be an overkill for this rather simple task, doesn't it?
PS: Concerning usability, I know that buttons close to each other aren't user-friendly, but this problem doesn't arise in my real scenario, only in this mockup.
I have a blueprint image in my app. The user will be able to click on some pre-established points and after they click on this point, a dialog will show some information.
My question is how I add the specific points in my ImageView Blueprint and the click function on these points?
EDIT 08/08/2014
My ImageView now has pinch zoom and the app will have more than 1 blueprint.
Thanks and regards!
You could go about this multiple ways. If your blueprint is full screen on the users device then you could create your own custom layout to encapsulate the imageview and override the ViewGroup's onDraw an onTouch methods to add your points. Then you could have a method like
public void addPoints(float[] points) { // do something here }
Another option is to extend the ImageView itself and make your own custom imageview and then again override onDraw and overlay the points ontop of the image. YOu can set the bitmap (your blueprint) as the background and then drop ontop of that. You would have to figure out where the specific points are though depending on the size of your image and the device, unless you set the size to be pixel density independent.
The first thing that comes to mind is you could use RelativeLayout in the XML file. This allows you to layer elements on top of one another if you so choose. You could use this to position invisible buttons above the image.
With RelativeLayout, each button could be positioned using its margin attributes, and it should be fairly simple to make the button invisible by assigning the transparent color for its background and providing no text.
Lets say I have an irregular shape in png format.As you know this shape considered in an invisible square or rectangular when I defined a view (its background is sourced from this png) on my xml.On my activity,I write a piece of code which sends an alertdialog when clicked on the view.even if I click a place which has no revelant with the shape (but it is in that invisible area)I get the dialog.I want to get an action when I click ONLY shape.How can I solve ? Thanks...
Basically,
You have to find a way to correctly and efficiently model the surfaces in the PNG file.
Then you can implement onTouch(MotionEvent event) of your view to handle the motion events and match the coordinates of the touch with your implementation in the first step.
What is the use of shadow in Android?
How do I implement shadow in thumbnails?
If someone has a sample screenshot, do you mind sharing it?
Shadows can be added to TextViews through XML or programmatically.
If you'r wanting to add a shadow to a standard view (or any subclasses) this thread should point you in the right direction.
Not knowing what are your objects could be tricky. you can define what's the background in the picture and filter it, then you can strech your image in the direction of the shadow. now filter everything but the background, so you've got 3 layers - background, shadows and objects. place the shadows on the background and on top of that the objects.
I want to create a circle layout. All of my views should be in the circle. Which layout do I have to prefer and how? The focus of the layout should be a clockwise circle.
Edit:
I can do this view and it is an update of my question, prompted by the comments to this question. Is there any example for doing that?
The screenshot is attached below.
image http://www.freeimagehosting.net/uploads/e11f35e522.png
For people who is coming to this question now I recently had to implement this circle layout and after a lot of searching I decide that a relative layout that draws a petal shaped buttons will not give me the effect I needed so I followed those steps
you can see if you tested the nbc app on iphone they are placing invisible buttons on the words and the circle is just an image with the button overlaid but I didn't like this solution .
So here's how I implemented it
1- asked for the flower with the words on it from the UI guy and told him that the colors must be solid no gradient what so ever and then asked him to send me the hexadecimal values of each color.
2- then I implemented a motion listener that checks the color of the pixel the user clicked on ACTION_UP event and launch the event corresponding with the category of that color .
3-I check the color by getting x & y from the listener and then get the color from the image bitmap
I'll post snippets of the code If anyone needs it but I don't have it on me now.