Remove space between buttons in LinearLayout (Android)

Question

I need to make my own toolbar in Android application. Now it looks like this: enter image description here

So you see spaces between buttons. I tried to put negative margin/padding at buttons, but space didn't disappear.

Here is layout code:

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

    <ListView
        android:id="@+id/routes_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.5">
    </ListView>

    <TableRow
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp" >

        <Button
            android:id="@+id/btn_routes"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:layout_weight="0.2"
            android:layout_marginRight="-10dp"
            android:layout_marginLeft="-10dp"
            android:text="@string/routes"
            android:textSize="10dp" />

        <Button
            android:id="@+id/btn_places"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:layout_weight="0.2"
            android:layout_marginRight="-10dp"
            android:layout_marginLeft="-10dp"
            android:textSize="10dp"
            android:text="@string/places" />

        <Button
            android:id="@+id/btn_events"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:layout_weight="0.2"
            android:layout_marginRight="-10dp"
            android:layout_marginLeft="-10dp"
            android:textSize="10dp"
            android:text="@string/events" />

        <Button
            android:id="@+id/btn_about"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="0dp"
            android:layout_weight="0.2"
            android:layout_marginRight="-10dp"
            android:layout_marginLeft="-10dp"
            android:text="@string/about"
            android:textSize="10dp" />

    </TableRow>

</LinearLayout>

How to remove space between buttons?

Maybe you could check this - http://stackoverflow.com/questions/2277732/how-to-get-rid-of-the-extra-gap-between-a-button-and-other-views — Martin Rohwedder, Feb 26 '12 at 09:32
The idea is to use ImageButtons with the same background color... — hovanessyan, Feb 26 '12 at 09:37

score 24 · Answer 1 · answered Jul 13 '14 at 08:06

24

Try changing the color of the button, because the default interface of the button which is native to android is actually smaller than it's size, and it's center-fitted to make it look cool.

Change it's background to black or something and you'll see the real size of the button.

android:background="#000"

answered Jul 13 '14 at 08:06

Sami

282
1
4
9

3

This should really be the accepted answer. It doesn't look like there is an actual margin between the button and other buttons, just the background which is applied has some padding on it. – CodyEngel Aug 04 '15 at 01:52
Wow, really.. I spent quite some time figuring out why I couldn't get rid of space/margin between the Buttons in my Gridview, changing the background like you said showed me, that there really wasn't any space/margin in between them anymore, thanks for this answer. – Sander Looijenga Oct 18 '15 at 14:05
2

Buttons make use of a 9 patch Drawable that makes it look like there is an extra margin around it. – Graeme Gill Dec 11 '15 at 04:41

score 9 · Accepted Answer · answered Feb 26 '12 at 10:54

Here's a solution. It seems that I hurried to post a question here.

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

    <ListView
        android:id="@+id/routes_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.5">
    </ListView>

    <TableRow
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" 
        android:layout_marginBottom= "-7dp">

        <Button
            android:id="@+id/btn_routes"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:layout_marginRight="-4.5dp"
            android:layout_marginLeft="-5dp"
            android:text="@string/routes"
            android:textSize="10dp" />

        <Button
            android:id="@+id/btn_places"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:layout_marginRight="-4.5dp"
            android:layout_marginLeft="-4.5dp"
            android:textSize="10dp"
            android:text="@string/places" />

        <Button
            android:id="@+id/btn_events"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:layout_marginRight="-4.5dp"
            android:layout_marginLeft="-4.5dp"
            android:textSize="10dp"
            android:text="@string/events" />

        <Button
            android:id="@+id/btn_about"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.2"
            android:layout_marginRight="-4dp"
            android:layout_marginLeft="-4.5dp"
            android:text="@string/about"
            android:textSize="10dp" />

    </TableRow>

</LinearLayout>

Result: enter image description here

Not good answer, with different button style. The values will be different. — xmen, Apr 29 '15 at 06:03

score 1 · Answer 3 · answered Jul 29 '13 at 06:17

I won't suggest to go for -ve margins..

Rather setup some background image for button.

Some Important points:-

The background image itself should not contain any white space at borders.
You have to create a selector file for that button after providing background, in which you will describe which image to show in at different states of button likewise selected,focused etc. other wise you will not be able to see the effects which appear by default (like silver button and when it is clicked it gets orange)

Solutions :-

How to create a selector you can refer this lik
I have used this button in my case

My Result :-

enter image description here

score 0 · Answer 4 · answered Mar 31 '15 at 07:57

Simply, You can do it by overriding the default background with has a rounded shape and margin:

<Button
            android:id="@+id/button_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            <!--Replace the following color with any other color or drawable-->
            android:background="@android:color/white"
            android:text="@string/button1_text"
            android:textColor="@android:color/black" />

score 0 · Answer 5 · answered Feb 26 '12 at 10:05

try this

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

    <ListView
        android:id="@+id/routes_list"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="0.5">
    </ListView>

    <TableRow
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:padding="0dp" >

        <Button
            android:id="@+id/btn_routes"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/routes"
            android:textSize="10dp" />

        <Button
            android:id="@+id/btn_places"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="10dp"
            android:text="@string/places" />

        <Button
            android:id="@+id/btn_events"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textSize="10dp"
            android:text="@string/events" />

        <Button
            android:id="@+id/btn_about"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/about"
            android:textSize="10dp" />

    </TableRow>

</LinearLayout>

score -4 · Answer 6 · edited Dec 16 '13 at 11:21

-4

Add this two lines in all button and use Linear layout instead of tablelayout with horizontal orientation.

android:layout_width="0dp" 
android:button_weight="1"

edited Dec 16 '13 at 11:21

Marc Gravell

1,026,079
266
2,566
2,900

answered Dec 16 '13 at 11:01

Muthuraja

551
5
13

Remove space between buttons in LinearLayout (Android)

6 Answers6