Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center elements of HorizontalScrollView when not enough to make it scroll

Tags:

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" /> 
like image 369
Alasdair Avatar asked Mar 23 '12 18:03

Alasdair


1 Answers

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 > 
like image 102
SoundsDangerous Avatar answered Sep 18 '22 13:09

SoundsDangerous