Need explanation about Android layouts

Question

I want to create a view like this :

I tried this layout architecture :

<RelativeLayout android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView> // The blue top bar

    <ScrollView android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true" ></ScrollView>

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:orientation="vertical">

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
        </TextView>

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
        </TextView>

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Description"
            android:gravity="center_horizontal">
        </TextView>

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
        </TextView>

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Place"
            android:gravity="center_horizontal">
        </TextView>

        <TextView android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">
        </TextView>

    </LinearLayout>

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

        <ImageView android:layout_width="wrap_content"
           android:layout_height="40dp"
           android:clickable="false"
           android:scaleType="center" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:gravity="left"
            android:orientation="horizontal" >

            <Button
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:text="Button 1" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:text="Button 2" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:layout_gravity="center_vertical"
                android:text="Button 3" />

        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

But this won't work for some reasons, first it doesn't display the buttons as I want in the bottom bar.

I'm a beginner at Android dev so please help me.

Answer 1

1. Assign id to "Place" component, so You could refer to this id later, when placing buttons:

     <LinearLayout android:id="@+id/placeLayout" ... /> 

2. In relative layout, You could tell your buttons to be under component with id=placeLayout in this way:

     <Button android:id="@+id/button1" android:layout_below="@+id/placeLayout" ... /> 

3. If you want one button to be right of another and under placeLayout component, write it:

     <Button android:id="@+id/button2" android:layout_below="@+id/placeLayout" android:layout_toRightOf="@+id/button1" ... /> <Button android:id="@+id/button3" android:layout_below="@+id/placeLayout" android:layout_toRightOf="@+id/button2" ... /> 

Here is complete list of parameters You could use to "tell" each element where it has to be placed: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html

Answer 2

My suggestion, use a linear layout and play with "android:weightSum" (main layout) and "android:layout_weight"(inner views) attributes, it might be complicated at the very first moment, but later it will be the best approach to fit any screen. Check this thread: Linear Layout and weight in Android

Using that technique you are telling to each inner view (or layout) inside the main layout how many space it should fill.

ie: if the main layout has android:weightSum=1 and every inner view has android:layout_weight=0.33 it menss that every inner view fill 1/3 of the total space available.