Buttons spacing

Question

I'm trying to set the margin of the buttons to 0, (so no spacing between the buttons).

Basically, I want my buttons to look something like that(with the following style and colors):

Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).

Answer 1

In this specific case, you can do this task easily with XMLs. This is how you can achieve it in two steps:

Step 1

Create 3 shapes in drawable folder:

• First shape is for the left button: shape_button_left.xml. This shape has radial left corners and gradient background.

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <corners
          android:bottomLeftRadius="10dp"
          android:topLeftRadius="10dp" >
      </corners>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

• Second shape is for the center button: shape_button_center.xml. This shape doesn't define anything for corners and also has gradient background.

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

• Third shape is for the right button: shape_button_right.xml. This shape has radial right corners and gradient background.

  <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" >
  
      <stroke
          android:width="1dp"
          android:color="#BFBFBF" >
      </stroke>
  
      <corners
          android:bottomRightRadius="10dp"
          android:topRightRadius="10dp" >
      </corners>
  
      <gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
  
  </shape>
  

Step 2

Now, we can use these shapes in simple views to get the effect of buttons. In your layout XML add the next code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" >

    <!-- Button Left -->

    <LinearLayout
        android:id="@+id/button_left"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_left"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Left"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Left -->


    <!-- Button Center -->

    <LinearLayout
        android:id="@+id/button_center"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_center"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Center"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Center -->


    <!-- Button Right -->

    <LinearLayout
        android:id="@+id/button_right"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_button_right"
        android:gravity="center"
        android:padding="10dp" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Right"
            android:textColor="#333333"
            android:textSize="20sp" />
    </LinearLayout>
    <!-- End Button Right -->

</LinearLayout>

That's it Now, you can add onClick listener in your code to LinearLayouts and work with it like a button.

---

Testing this code on my mobile gives next result:

Answer 2

Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).

I'm afraid you may not have much choice. The inherent spacing found in between each button is a result of extra transparent pixels built directly into the existing 9-patch backgrounds that the framework uses. To replace this behavior you must set the background of the buttons to a different Drawable that doesn't include this inherent spacing.

Another option would be for you that could be done in code is to create XML drawable shapes to use for each background. You can create an individual shape that has corner radii, a fill gradient, and a stroke just like your image. You can read more about creating XML Drawables in the docs.