Center elements of HorizontalScrollView when not enough to make it scroll

Alasdair picture Alasdair · Mar 23, 2012 · Viewed 10.8k times · Source

I have a Layout with a HorizontalScrollView containing a LinearLayout for a Menu where the contents are inflated with the contents of the DB. This works fine however when there are not enough elements to make the HSV scroll this does not fill the width of the screen which ideally should be centered. i.e. Currently:

| Element 1 Element 2                         | <- edge of screen

Instead of:

|        Element 1            Element 2       | <- edge of screen

whilst still being able to:

| Element 1 Element 2 Element 3 Element 4 Elem| <- edge of screen now scrolling

The layout XML is:

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

    <TextView 
         android:id="@+id/header"
         android:layout_width="fill_parent"
         android:layout_height="25dp" >
    </TextView>

    <ScrollView
         android:id="@+id/scroll1"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_weight="1" >

        <LinearLayout
             android:id="@+id/contentLayout"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:orientation="vertical" >

        </LinearLayout>
    </ScrollView>

    <HorizontalScrollView
        android:id="@+id/horizontalScrollView1"
        android:layout_width="fill_parent"
        android:layout_height="30dp">

        <LinearLayout
            android:id="@+id/footerLayout"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal" >

        </LinearLayout>
   </HorizontalScrollView>
</LinearLayout>

With the following XML being inflated inside footerLayout:

<?xml version="1.0" encoding="utf-8"?>

        <TextView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/footer_content"
            android:textSize="18sp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="FOOTER"
            android:singleLine="true" />

Answer

SoundsDangerous picture SoundsDangerous · Apr 29, 2013

I just solved this issue. I ran into it a few hours ago. You need to center the HorizontalScrollView in its parent and set its width/height to wrap_content. The layout you put in the the HSV must have its width/height set to wrap content as well. The important part here is to not set any gravity/layout_gravity on this layout or you may experience (very annoying) clipping issues after inflating your views. Example below is contained in a RelativeLayout.

 <HorizontalScrollView  android:id="@+id/svExample"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/rlExample">
    <LinearLayout
        android:id="@+id/llExample"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
    </LinearLayout>
</HorizontalScrollView >