ImageButtons inside LinearLayout Spacing Issue

Question

I have a LinearLayout inside a HorizontalScrollView. I am trying to implement some ImageButton objects inside the LinearLayout. Between each pair of button, I have kept a minimum spacing. When I am using Button objects, the spacing shows correctly in the app. But, when I Shift to ImageButton, there is no space between 2 side-by-side images. Please help.

<HorizontalScrollView
    android:id="@+id/horizontalScroll"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:fadingEdgeLength="20dp"
    android:scrollbars="none" >

    <LinearLayout
        android:id="@+id/linearHorizScrolView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingLeft="10dip"
        android:paddingRight="10dip"
        android:weightSum="1" >
        <!--android:background="@drawable/menubar6"-->

        <ImageButton
            android:id="@+id/veg_tab"
            android:layout_width="100dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:background="@drawable/vegetables"
            android:textStyle="bold"
            android:onClick="tab_selector" />

        <ImageButton
            android:id="@+id/meat_tab"
            android:layout_width="100dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:background="@drawable/meat"
            android:onClick="tab_selector" />

        <Button
            android:id="@+id/courts_tab"
            android:layout_width="100dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:text="Courts"
            android:onClick="tab_selector" />

        <Button
            android:id="@+id/violation_tab"
            android:layout_width="100dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:text="Violations"
            android:onClick="tab_selector" />

        <Button
            android:id="@+id/support_tab"
            android:layout_width="92dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:text="Support"
            android:onClick="tab_selector" />

        <Button
            android:id="@+id/settings_tab"
            android:layout_width="90dip"
            android:layout_height="80dip"
            android:clickable="true"
            android:gravity="bottom|center_horizontal"
            android:paddingBottom="15dip"
            android:text="Settings"
            android:textStyle="bold"
            android:onClick="tab_selector" />

    </LinearLayout>

</HorizontalScrollView>

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

1

With default scaling, ImageButton ignores padding. Please consult this answer.

edited May 23 '17 at 12:14

Community

1
1

answered Jul 28 '15 at 12:34

SpaceBison

2,525
1
21
38

score 0 · Answer 2 · answered Jul 28 '15 at 14:14

Oops, Thanks @SpaceBison for pointing out where to look. Need to change the android:background to android:src. And then add to the imagebutton definition this line

'android:scaleType`="fitXY"

to get desired effect. The link provided by @SpaceBison is correct.

ImageButtons inside LinearLayout Spacing Issue

2 Answers2