CODEWITHSUNDEEP
androidlayouthorizontalscrollview
You Qi
You Qi

Reputation: 9231

Space between LinearLayout children in HorizontalScrollView

I'm having trouble separating children in a LinearLayout which is a child of a HorizontalScrollView. I have tried with numerous approaches on the LinearLayout element (padding_right, layout_margin, divider) but none of them working. Picture below illustrate what I would like to achieve(The top is the expected result whereas bottom 1 is the rendered result of my layout)

Top is Expected Result, Bottom is Current Facing Problem

Here's the 2 layouts which I'm using:

layout/activity_main.xml

<HorizontalScrollView
    android:id="@id/horizontal_scroll_parent"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarStyle="outsideInset"
    android:scrollbars="none" >

    <LinearLayout
        android:id="@+id/content_scroll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:showDividers="middle" >

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />

        <include
            android:id="@+id/id"
            layout="@layout/gallery_item_layout" />
    </LinearLayout>
</HorizontalScrollView>

layout/gallery_item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/galleryItemLayout"
    android:layout_width="139.0dip"
    android:layout_height="130.0dip"
    android:background="@drawable/gallery_item_selector"
    android:focusable="true"
    android:padding="2dp" >

    <ImageView
        android:id="@id/galleryItemView"
        android:layout_width="139.0dip"
        android:layout_height="78.0dip"
        android:background="#00000000"
        android:padding="0.0dip" />

    <TextView
        android:id="@id/articleTitleId"
        android:layout_width="139.0dip"
        android:layout_height="50.0dip"
        android:layout_below="@id/galleryItemView"
        android:background="#ff0a0a0a"
        android:ellipsize="end"
        android:maxLines="2"
        android:paddingBottom="5.0dip"
        android:paddingLeft="5.0dip"
        android:paddingTop="2.0dip"
        android:textColor="#ffffffff"
        android:textSize="13.0sp" />

</RelativeLayout>

Here's the rendered result of some attempts:

Using layout_marginLeft:

<LinearLayout
android:id="@+id/content_scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginLeft="20dp" >

enter image description here

Using paddingLeft:

<LinearLayout
android:id="@+id/content_scroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:paddingLeft="20dp" >

enter image description here

Upvotes: 1

Views: 5130

Answers (3)

dishan
dishan

Reputation: 1366

You should add your margins to your gallery_item_layout.xml

So in your gallery_item_layout.xml insert margins for your root RelativeLayout

android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"

Alternatively you can add margins to every include element in your activity_main.xml but if you take this approach you have to specify the layout_width and layout_height parameters for each include element as well. Otherwise margins will be ignored.

Upvotes: 2

Fahim
Fahim

Reputation: 12378

Can you try applying margin to the include layout

  <include 
android:id="@+id/id"
 layout="@layout/gallery_item_layout"
    android:layout_margin="2dp" />

Upvotes: 2

Waqar Khan
Waqar Khan

Reputation: 478

In your layout/gallery_item_layout.xml

Width of galleryItemLayout should be atleast 2dp more than that of galleryItemView and articleTitleId if you are giving padding of 2dp

Upvotes: 0

Related Questions