Horizontal ScrollView above a Button from LinearLayout

Question

What I wish to achieve is something like this:

The thing is: after I tap on the circle button on the bottom layout, it appears a HorizontalScrollView with the possible colors of the product (which I will have to download). I tried something like this:

 <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <LinearLayout
            android:id="@+id/lay_productdetailed_bottombar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/transparent"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btn_productdetailed_fullscreen"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Full" />

            <Button
                android:id="@+id/btn_productdetailed_colors"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Colors" />

            <Button
                android:id="@+id/btn_productdetailed_sizes"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Sizes" />

            <Button
                android:id="@+id/btn_productdetailed_buy"
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Buy" />
        </LinearLayout>

        <HorizontalScrollView
            android:id="@+id/hscroll_productdetailed_colors"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/btn_productdetailed_colors" >

            <LinearLayout
                android:id="@+id/lay_productdetailed_colors"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="2dp" >

                <ImageButton
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_gravity="center_vertical" />

                <ImageButton
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_gravity="center_vertical" />
            </LinearLayout>
        </HorizontalScrollView>
    </RelativeLayout>

those 2 ImageButtons are just for testing, to watch their position on the screen (Eclipse).

This code does not seem to align the horizontal scrollview above the button at all. Any ideas on how can I achieve that?

PS. Another question would be: Can I make those buttons rounded, like in the pic, without creating a a class that extends Shape?

Answer 1

You can't add rules placing children of a RelativeLayout in regards of views that are not direct siblings of those views. This means that your HorizontalScrollView can't be placed relative to that Button because the Button isn't placed as a direct child for the RelativeLayout that holds the HorizontalScrollView.

At best you could place the HorizontalScrollView above the lay_productdetailed_bottombar LinearLayout but, as I said, this would not give you positioning control relative to the Button. Another approach would be a PopupWindow holding the HorizontalScrollView.

Judging by the image you probably want the HorizontalScrollView to be centered around the center of the Button which can't be done in the xml layout, you can do it only by manually calculating the dimensions.

Can I make those buttons rounded, like in the pic, without creating a a class that extends Shape?

No, you'll need to create it yourself.