android - How to create layout with buttons like on this picture? ( BUTTON THAT HAVE ACTUALLY SHAPE OF TRIANGLE, NOT MASK ) -

this wanted layout: layout

i'm stuck long time. trying rotate somekind buttons mask other 1 , other ways with:

            <rotate             android:fromdegrees="45"             android:todegrees="45"             android:pivotx="-40%"             android:pivoty="87%" /> 

how write code layout, buttons need custom shaped, not able clicking around them, achieve clicking same?

edit tried making triangle shape using xml definitions? , creating triangular shaped button android application

but got: http://i.stack.imgur.com/x88p0.png

here code of trianglebutton draw triangle , react on clickevent() if finger position in triangle zone. here can set colors(normal , pressed):

class:

public class trianglebutton extends button {      private final float radius = 50.0f;      private boolean mispressed;      private region mpathregion;     private final path mpath = new path();      private final paint mnormalpaint = new paint(paint.anti_alias_flag) {         {             setdither(true);             setstyle(style.fill);             setpatheffect(new cornerpatheffect(radius));         }     };      private final paint mpressedpaint = new paint(paint.anti_alias_flag) {         {             setdither(true);             setstyle(style.fill);             setpatheffect(new cornerpatheffect(radius));         }     };      public trianglebutton(final context context) {         this(context, null);     }      public trianglebutton(final context context, final attributeset attrs) {         this(context, attrs, 0);     }      public trianglebutton(final context context, final attributeset attrs, final int defstyleattr) {         super(context, attrs, defstyleattr);          setwillnotdraw(false);         setbackgroundcolor(color.transparent);         setcolors(color.red, color.gray);     }      public void setcolors(final int color, final int pressed) {         mnormalpaint.setcolor(color);         mpressedpaint.setcolor(pressed);     }      @override     protected void onsizechanged(final int w, final int h, final int oldw, final int oldh) {         super.onsizechanged(w, h, oldw, oldh);          // set triangle         mpath.reset();         mpath.moveto(0.0f, h);         mpath.lineto(w / 2.0f, 0.0f);         mpath.lineto(w, h);         mpath.close();          // create region touch detecting         final rectf rectf = new rectf();         mpath.computebounds(rectf, true);         mpathregion = new region();         mpathregion.setpath(                 mpath,                 new region(                         (int) rectf.left,                         (int) rectf.top,                         (int) rectf.right,                         (int) rectf.bottom)         );     }      @override     public boolean ontouchevent(motionevent event) {         if (mpathregion.contains((int) event.getx(), (int) event.gety())) {             switch (event.getaction()) {                 case motionevent.action_down:                     mispressed = true;                     break;                 case motionevent.action_up:                     mispressed = false;                     performclick();                     break;                 case motionevent.action_cancel:                     mispressed = false;                     break;             }             postinvalidate();         } else {             mispressed = false;             postinvalidate();             return false;         }          postinvalidate();         return true;     }      @override     protected void ondraw(final canvas canvas) {         canvas.drawpath(mpath, mispressed ? mpressedpaint : mnormalpaint);         super.ondraw(canvas);     } } 

xml:

<framelayout         android:layout_width="match_parent"         android:layout_height="match_parent">          <com.example.user.timezonetest.trianglebutton             android:id="@+id/btn_bottom"             android:layout_width="300dp"             android:layout_height="250dp"             android:text="second button"             android:textcolor="#000"             android:layout_gravity="center_horizontal"             android:gravity="bottom|center_horizontal"             android:padding="30dp"/>          <com.example.user.timezonetest.trianglebutton             android:id="@+id/btn_top"             android:layout_width="180dp"             android:layout_height="160dp"             android:text="first button"             android:textcolor="#000"             android:layout_gravity="center_horizontal"             android:gravity="bottom|center_horizontal"             android:layout_margin="30dp"             android:padding="30dp"/>   </framelayout> 

code:

final trianglebutton bottombutton = (trianglebutton) findviewbyid(r.id.btn_bottom); final trianglebutton topbutton = (trianglebutton) findviewbyid(r.id.btn_top);  bottombutton.setcolors(color.red, color.gray); topbutton.setcolors(color.yellow, color.gray);