Android - how to make the header buttons not have space behind them?

Question

enter image description here I have this layout for my header:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" 
android:layout_height="fill_parent"
 android:orientation="horizontal"
>


 <Button android:id="@+id/home"
  android:layout_width="0dp" 
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="Home"
  android:background="@drawable/ic_menu"
  android:textSize="11dp"
/>

<Button android:id="@+id/questions"
 android:layout_width="0dp" 
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="Questions"
 android:textSize="11dp"
   android:background="@drawable/ic_menu"
android:layout_toRightOf="@+id/home"  />  


 <Button android:id="@+id/businesses"
  android:layout_width="0dp" 
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:textSize="11dp"
  android:text="Businesses"
    android:background="@drawable/ic_menu"
  android:layout_toRightOf="@+id/questions"
 />  

 <Button android:id="@+id/learn"
  android:layout_width="0dp" 
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:text="Learn"
  android:textSize="11dp"
  android:background="@drawable/ic_menu"
  android:layout_toRightOf="@+id/businesses"
 />  

</LinearLayout>

What I thought was that if I made the button backgrounds with images, then that would enable me to not have space between the buttons. Right now, the header buttons render nicely, but there is a thick whitespace background space between them. How could I get rid of that white space and make the space between them just 1px?

I just uploaded a photo of the emulator. See the 4 dark boxes on the top of the screen? That is the header with the spaces.

Thanks!

@ademar111190 sorry, not sure what you mean. Could you clarify please? — GeekedOut, May 20 '12 at 16:20
android:background="@drawable/ic_menu" << the image "ic_menu" dont have transparent borders? — ademar111190, May 20 '12 at 16:21
@ademar111190 do you mean that my images need to have transparent borders? — GeekedOut, May 20 '12 at 16:22
not, on the contrary, if they possess transparent borders will give the impression that they are separated. — ademar111190, May 20 '12 at 16:24
I see. So I have transparent borders and I need to get rid of those? And that will fix the issue? I don't need to adjust the layout code at all? Thanks! — GeekedOut, May 20 '12 at 16:27
exactly, I did a project here with your code and image and the problem is the image. — ademar111190, May 20 '12 at 16:33
@GeekedOut Can't see the file, but if you change background to "#f00" you can see that the areas have no gaps. So all you need is to remove the borders from the images or xml of ic_menu. — yoah, May 20 '12 at 16:33
@GeekedOut I see the image on top. It seems that you want a solid background, so just change to android:background="#868686" — yoah, May 20 '12 at 16:37
Thank you, if you want to post that as an answer, I'll accept it :) — GeekedOut, May 20 '12 at 16:50

score 1 · Accepted Answer · edited May 23 '17 at 12:06

There is a potential solution in a similar question here, Is there a way to completely eliminate padding in a LinearLayout containing buttons?

Your drawable ic_menu could have padding, if you are using a 9-patch for that image, when you author it make sure the black lines along the right and bottom are as you intended, because this is for specifying the content area in your 9-patch and could contribute to padding.

Also, try adding 0dp for both margin and padding on the buttons.

Hope that helps.

score 1 · Answer 2 · answered May 20 '12 at 17:11

1

The problem is that the image contains a border color. Remove the border from the image, or use a solid color #868686, which is the image center color.

answered May 20 '12 at 17:11

yoah

7,180
2
30
30

Android - how to make the header buttons not have space behind them?

2 Answers2