Remove space between buttons in LinearLayout (Android)

Question

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

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?

Answer 1

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"

Answer 2

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:

Answer 3

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

Rather setup some background image for button.

Some Important points:-

1. The background image itself should not contain any white space at borders.
2. 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 :-

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

My Result :-