how to separate icons from eachother android

Question

i have a navigation bar on the bottom of the screen. I have a set of 3 buttons in this navbar, the buttons have an icon as background button there's no space between eachother. I've been searching in Google how to separate them from eachother but i haven't succeded. The questiion is: how can i separate them from eachother? here's is my xml code:

Main.xml

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

<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />

    <LinearLayout 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#5E767E"
    android:gravity="center"
    >

        <Button 
        android:layout_height="wrap_content" 
        android:id="@+id/back" 
        android:layout_width="wrap_content"
        android:background="@drawable/button"
        />

        <Button 
        android:layout_height="wrap_content" 
        android:id="@+id/home" 
        android:layout_width="wrap_content"
        android:background="@drawable/button"
        />

        <Button 
        android:layout_height="wrap_content" 
        android:id="@+id/next" 
        android:layout_width="wrap_content" 
        android:background="@drawable/button"
        />

    </LinearLayout>


</RelativeLayout>

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

Apply margin or padding, for instance:

    <Button 
    android:layout_height="wrap_content" 
    android:id="@+id/back" 
    android:layout_width="wrap_content"
    android:background="@drawable/button"
    android:margin="10dip"
    />

Or:

    <Button 
    android:layout_height="wrap_content" 
    android:id="@+id/back" 
    android:layout_width="wrap_content"
    android:background="@drawable/button"
    android:marginLeft="10dip"
    android:marginRight="10dip"
    />

This could be useful for you: Difference between a View's Padding and Margin

edited May 23 '17 at 11:55

Community

1
1

answered Jan 11 '11 at 20:08

Cristian

198,401
62
356
264

i tried padding but it didn't work, and margin is not suitable in this case because the buttons don't get centered. Any suggestions? – madcoderz Jan 11 '11 at 20:14
And what does margin have to do with being centered? – Falmarri Jan 11 '11 at 20:22
1

To your middle button only add: android:layout_marginLeft="40dip" android:layout_marginRight="40dip" - that will make it centre about a vertical axis – NickT Jan 11 '11 at 20:47
Thanks NickT it worked beautifully but i have a question. If i have a smaller or bigger screen (device), would this android:layout_marginLeft="40dip" android:layout_marginRight="40dip" – madcoderz Jan 11 '11 at 21:24
Thanks NickT it worked beautifully but if i put more icons they wont be centered. I'm looking for a way to center and set a distance between them automatically using padding or something else. When i used padding the icons got like sketched, deformed. This wont happen as long as i don't have a background in the button or if i use android:drawableLeft. Any suggestions? If not, just say it and i will mark this answer as correct. Thanks a lot! – madcoderz Jan 11 '11 at 21:34

score 0 · Accepted Answer · answered Jan 11 '11 at 20:40

Have you tried putting an empty View in between?

<Button 
        android:layout_height="wrap_content" 
        android:id="@+id/back" 
        android:layout_width="wrap_content"
        android:background="@drawable/button"
        />
<View android:layout_width="2dip" android:layout_height="1dip"/>
        <Button 
        android:layout_height="wrap_content" 
        android:id="@+id/home" 
        android:layout_width="wrap_content"
        android:background="@drawable/button"
        />
<View android:layout_width="2dip" android:layout_height="1dip"/>
        <Button 
        android:layout_height="wrap_content" 
        android:id="@+id/next" 
        android:layout_width="wrap_content" 
        android:background="@drawable/button"
        />

Play with the width and height of it to suit your needs. It usually does the trick for me.

how to separate icons from eachother android

2 Answers2

Linked