How to make ImageButtons delimiters flow around an image?

Question

I am creating a graphical interface for an Android application, this GUI contains four directions ImageButtons(look at the following image):

but trying to do this always fails because the square is reserved for each image and what I have achieved:

and what is 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>

Answer 1

There is work for this. You can achieve this like this ...

() ... ( ) - . onclicklisteners ... ... , ...