centerHorizontal RelativeLayout in ScrollView

Question

I'd like to centerHorizontal a RelativeLayout within a ScrollView like this: good layout

I can only achieve this layout when using RelativeLayout. But since I need to use ScrollView aswell, it messes up. Somehow android:layout_centerHorizontal="true" won't apply for RelativeLayout then... Output looks like this:

bad layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffcc33"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingTop="10dp"
tools:context=".MainActivity" >

<EditText
    android:id="@+id/search_box"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/search_button"
    android:ems="5"
    android:hint="@string/search_hint" >

    <requestFocus />
</EditText>

<Button
    android:id="@+id/search_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:text="@string/search_button" />

<ScrollView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/search_box"
    android:layout_marginTop="15dp"
     >

<RelativeLayout
    android:layout_width="225dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true" >

    <Button
        android:id="@+id/btn_lihatoidud"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/lihatoidud"
        android:layout_alignParentTop="true"
        android:text="Lihatoidud"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_kypsetised"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_lihatoidud"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/kypsetised"
        android:text="Küpsetised"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_seenetoidud"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_kypsetised"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/seenetoidud"
        android:text="Seenetoidud"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_juustutoidud"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_seenetoidud"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/juustutoidud"
        android:text="Juustutoidud"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_lisandid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_juustutoidud"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/lisandid"
        android:text="Lisandid"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_supid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/supid"
        android:text="Supid"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_voileivad"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/btn_supid"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/voileivad"
        android:text="Võileivad"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_pudrud"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/btn_voileivad"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/pudrud"
        android:text="Pudrud"
        android:textSize="18sp" />

    <Button
        android:id="@+id/btn_joogid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/btn_pudrud"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:drawableTop="@drawable/joogid"
        android:text="Joogid"
        android:textSize="18sp" />

</RelativeLayout>
</ScrollView>

score 1 · Answer 1 · answered Jul 01 '13 at 20:28

1

The comment wouldnt let me format...

Here is what I would do, change the overall layout to a linear layout, that way you can make sure that they editText and button are on top. It would look something like this...

<LinearLayout
    ...android:orientation="vertical">

    <LinearLayout
         ...android:orentation="horizontal">
         <Edit Text>
         <Button>
     />
     <ScrollView
        ...>
        <RelativeLayout
             ..../>
     />
/>

answered Jul 01 '13 at 20:28

user2483079

533
2
10

Your method had the same problem. I eventually ended up adding one LinearLayout between ScrollView and RelativeLayout. That worked fine! – swenn Jul 01 '13 at 21:17

score 1 · Answer 2 · answered Jul 01 '13 at 20:39

A ScrollView will collapse its contents down to core size unless told otherwise. Try things:

Explicitly lock the sides of the ScrollView to the positions in the top RelativeLayout using

android:layout_below="@id/search_box"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"

Force the ScrollView not to collapse:
```
android:fillViewport="true"
```

score 0 · Answer 3 · answered Jul 01 '13 at 17:44

0

Have you tried using gravity? Try this:

android:layout_gravity="center"

inside your RelativeLayout.

android:gravity="center"

may also work. I always forget which one does which.

answered Jul 01 '13 at 17:44

user2483079

533
2
10

[Difference between android:graivty and android:layout_gravity](http://stackoverflow.com/a/3482757/312312) – codeMagic Jul 01 '13 at 17:54
Alright, on the one hand layout_gravity fits my needs. On the other hand it stretched out the RelativeLayout, so it hides behind the EditText view. Any ideas? – swenn Jul 01 '13 at 19:31
Which RelativeLayout did you put the gravity in? I'm not sure but it sounds like you put it in the overall layout and not in the child layout. – user2483079 Jul 01 '13 at 19:45
I put it into the one containing buttons. This is the outcome: http://oi40.tinypic.com/96hv6d.jpg – swenn Jul 01 '13 at 19:50
Hmmm, that is odd, I'm not entirely sure what happened there. I don't have a ton of experience with relative layouts but can't you set it to be underneath that text view? Here is what I would do, change the overall layout to a linear layout, that way you can make sure that they editText and button are on top. It would look something like this... – user2483079 Jul 01 '13 at 20:18

centerHorizontal RelativeLayout in ScrollView

3 Answers3