0

I want to create a custom shaped button like this:

I'm able to achieve a similar thing by using a RelativeLayout and overlapping a rectangle and a circle. But that way, I have to add 2 onClickListaners, one for each shape.

Is there a way in android ( other than using an image, because in image the entire rectangular view will be clickable and not just the button ) to create such a design using a single XML layout file ??

mrid
  • 5,782
  • 5
  • 28
  • 71
  • no, you cannot do that in xml only – pskink Sep 30 '17 at 11:16
  • @pskink then how is it possible ? – mrid Sep 30 '17 at 11:19
  • you need a custom `View` to: 1) draw your custom shape using `Canvas` API by overiding `View#onDraw` and 2) detect if click event is inside that shape inside a custom `View#onTouchEvent` method – pskink Sep 30 '17 at 11:23
  • @pskink Could you tell us why you think this is not possible in XML? – kalabalik Sep 30 '17 at 11:24
  • @KalaBalik how can you detect if `MotionEvent` is inside some complex shape? in xml... – pskink Sep 30 '17 at 11:25
  • @pskink I might be wrong but...can't we make this shape in an xml, set it as Button background, and just add a click event to the button? correct me if I'm wrong – mrid Sep 30 '17 at 11:29
  • @mrid Just tried that, it didn't work. As expected, it worked as a rectangle and clicks worked even on the blank portion of the button (ImageButton). – Lalit Fauzdar Sep 30 '17 at 11:33
  • Your approach can give you a lot of headaches. Instead create an ImageButton, and assign its android:src to a vector drawable that has the specific shape. Now, you can create that by hand or with a photoshop that exports the shape to either svg or png. Then you use same vector drawable to set up a mask. – Fabio Sep 30 '17 at 11:33
  • @Fabio I've just checked the `Imagebutton` and I don't think he wants the working of an `Imagebutton`. – Lalit Fauzdar Sep 30 '17 at 11:35
  • What I would've done instead of messing up with canvas is create a rectangular button and a circular imageview and set same `onClick` Method for them instead of creating two `onClickLister`s. Its an easy approach. – Lalit Fauzdar Sep 30 '17 at 11:38
  • Also, drawables for them can be created in Photoshop and can be split as a rectangular and a circle. – Lalit Fauzdar Sep 30 '17 at 11:38
  • @Fabio, suppose I have an oval image as a background to the button, will the click listener not work on the left-over area of the button ( rectangle button view - actual image shape ) ?? – mrid Sep 30 '17 at 11:38
  • @mrid it will work in the blank area. – Lalit Fauzdar Sep 30 '17 at 11:39
  • @LalitSinghFauzdar that's what I want to avoid – mrid Sep 30 '17 at 11:40
  • Then as pskink said, use `Canvas` API by overriding `View.onDraw` – Lalit Fauzdar Sep 30 '17 at 11:42
  • The mask will avoid taps on unwanted areas. https://stackoverflow.com/questions/13861416/android-custom-shape-button – Fabio Sep 30 '17 at 11:54

1 Answers1

0

you won't have to make two listener just make one listener for the RelativeLayout

Reham Alatris
  • 425
  • 3
  • 14