Android GridLayout placement issue

Question

I'm currently using a GridLayout to get a view that looks something like this:

I'm trying to create this layout by defining the following layout xml:

<android.support.v7.widget.GridLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="5"
android:rowCount="2" >

   <LinearLayout 
      android:id="@+id/banner"
      android:layout_row="0"
      android:layout_columnSpan="5"
      android:orientation="horizontal" />


   <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_row="1"
        android:layout_columnSpan="2" />

   <RelativeLayout android:id="@+id/previewpane"
    android:layout_row="1"
    android:layout_column="2"
        android:layout_columnSpan="3"/>

</android.support.v7.widget.GridLayout>

While this compiles and runs without crashing, the ViewPager is taking up all the screen space for some reason. Why would this happen (seeing it should only occupy 2 columns out of 5 and only the bottom row) and how can I change this layout to properly display like shown in the illustration?

Answer 1

I didn't manage to get it right using the GridLayout so in the end I decided to just use a RelativeLayout/LinearLayout construction instead. (Using a RelativeLayout as the root view to prevent having to use nested weights)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@color/default_bg_color">
     <LinearLayout android:id="@+id/banner"
                   android:orientation="horizontal"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:visibility="gone"
                   android:layout_centerHorizontal="true"
                   android:layout_alignParentTop="true"/>
     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
         android:layout_alignParentBottom="true"
         android:layout_below="@id/banner"
         >

         <android.support.v4.view.ViewPager
             android:id="@+id/viewPager"
             android:layout_width="0dp"
             android:layout_height="match_parent"
             android:layout_weight="1" />

         <RelativeLayout android:id="@+id/previewPane"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"/>
    </LinearLayout>
</RelativeLayout>