HorizontalScrollView with other images, avoid overlap

Question

I have a HorizontalScrollView and now I want to add an image at the top of the layout with a button next to it in parallel. The problem is that I'm a little lost on how to align all this. It should be something like this.

---

[Image] [ImageButton]

[HorizontalScrollView]

---

As what I have now overlapped images together. What should I change?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:background="@color/black" >

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="false"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true" >

    <LinearLayout
        android:id="@+id/carrusel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
    </LinearLayout>
</HorizontalScrollView>

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="false"
    android:layout_alignParentTop="true"
    android:layout_marginTop="0dp"
    android:layout_toLeftOf="@+id/imageButton1"
    android:src="@drawable/top" />

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="50dp"
    android:layout_height="60dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="26dp"
    android:scaleType="fitCenter"
    android:src="@drawable/info" />

</RelativeLayout>

Answer 1

There are a few different ways to do this. From your code here, looks like the easiest thing would be to move your HorizontalScrollView below the ImageButton (So your R file knows it exists) and set

<HorizontalScrollView
    ...
    android:layout_below="@id/imageButton1"
    android:layout_alignParentLeft="true"
    ... />

You could also put your image and button in a linear layout and then set the horizontalscrollview below the linear layout and align it

<LinearLayout
    android:id="@+id/linlay_image_and_button"
    ...
    android:orientation="horizontal" >

    <ImageView ... />

    <ImageButton .../>
</LinearLayout>

<HorizontalScrollView
    ...
    android:layout_below="@id/linlay_image_and_button"
    android:layout_alignParentLeft="true"
    ... >
</HorizontalScrollView>

This second approach lets you use android:layout_weight in a linear layout to size the image and button to take up different amounts of the screen (1/3, 2/3) etc