How to get rid of the extra gap between a button and other views?

Question

When I created a button view, Android always create some extra space between this button and other views below it.

In this example below, there is a button above the second button. You can see the gap between these two buttons. How can I get rid of this gap? Thanks.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <Button android:id="@+id/up"
        android:layout_width="fill_parent" android:layout_height="28dip"
        android:textSize="9sp" android:gravity="center" android:text="Hide sth"
        android:layout_marginBottom="0" android:paddingBottom="0" />
    <Button android:id="@+id/down"
        android:layout_width="fill_parent" android:layout_height="28dip"
        android:textSize="9sp" android:gravity="center" android:text="Show sth" />
   </LinearLayout>

you can find your solution [here](http://stackoverflow.com/questions/4361309/remove-space-between-buttons) Try to play with android:layout_margin attribute enjoy! ;) — Bob, Sep 12 '11 at 07:03

score 6 · Accepted Answer · answered Feb 17 '10 at 01:54

6

Create your own button background nine-patch PNG that eliminates the space. You can find the existing background files in your SDK.

answered Feb 17 '10 at 01:54

CommonsWare

986,068
189
2,389
2,491

score 5 · Answer 2 · answered Feb 17 '10 at 03:25

CommonsWare pretty much pointed you in the right direction but here's a sample layout example. Just replace the android:background="COLOR" to a reference of a 9 patch png


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="wrap_content">

<Button
    android:id="@+id/btn1"
    android:text="btn1"
    android:padding="0dip"
    android:layout_margin="0dip"
    android:layout_width="fill_parent"
    android:layout_height="40dip"
    android:background="#FFF"
/>

<Button
    android:id="@+id/btn2"
    android:text="btn2"
    android:padding="0dip"
    android:layout_margin="0dip"
    android:layout_width="fill_parent"
    android:layout_height="40dip"
    android:background="#FF0000"
/>


</LinearLayout>

Hope that helps!

score 1 · Answer 3 · answered Jul 22 '15 at 09:02

I just figured out the most simple way. We have to simply add background to Buttons and it will automatically reduce spaces. Notice example

<Button
    android:id="@+id/button1"
    android:text="Button 1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#000000"  />

<Button
    android:id="@+id/button2"
    android:text="Button 2"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#000000" />

Obviously we would have to split Buttons with border line. There are few ways for that.

1. android:layout_marginTop="1dp" to second Button. The small piece of background will separate it.

2. Add style for Button :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFF" 
         android:endColor="#000000"
         android:angle="270" />
    <corners android:radius="3dp" />
    <stroke android:width="1px" android:color="#FFFFFF" />
</shape>

and set it with :

android:background="@drawable/your_button_border"

3. To add View with background of a different color and place it between Buttons.

<View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:background="#AAA" />

Just pick the most convenient for you way.

How to get rid of the extra gap between a button and other views?

3 Answers3

Linked