How to make ImageButtons bounds wrap around the im

I'm making a GUI for an android app, this GUI contains a four direction ImageButtons (look at the following image):

but when trying to make that always fails because a square reserved for each image, and that's what i reached :

and that's my XML code :

<LinearLayout
   android:id="@+id/circle"
   android:layout_weight="4"
   android:orientation="vertical"
   android:layout_marginTop="5dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" >

         <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">

               <ImageButton
                 android:id="@+id/up"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
                 android:adjustViewBounds="true"
                 android:background="@android:color/transparent"
                 android:clickable="true"
                 android:scaleType="centerInside"
                 android:src="@drawable/remote_button_up"/>

         </LinearLayout>

         <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:orientation="horizontal">

              <ImageButton
                android:id="@+id/left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:layout_marginRight="20dp"
                android:adjustViewBounds="true"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:scaleType="centerInside"
                android:src="@drawable/remote_button_left"/>

              <ImageButton
                android:id="@+id/right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right"
                android:adjustViewBounds="true"
                android:layout_marginLeft="20dp"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:scaleType="centerInside"
                android:src="@drawable/remote_button_right"/>

         </LinearLayout>

         <LinearLayout
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:orientation="vertical">

              <ImageButton
                android:id="@+id/down"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:adjustViewBounds="true"
                android:background="@android:color/transparent"
                android:clickable="true"
                android:scaleType="centerInside"
                android:src="@drawable/remote_button_down"/>

        </LinearLayout>

</LinearLayout>

There is a work around for that..You can achieve it like this...

Here you create a bigger layout (in red) and put whole image at once...Now create few more layouts (in yellow) and dont put any backgrounds on them .now set onclicklisteners on these layouts...by this way you can achieve it to some extent...hope you got me...