Trying to get Android LinearLayout to stretch horizontally and vertically

Question

UPDATE: I appreciate the advice to use GridView, and I do believe that would provide better performance. However, my initial efforts at implementing a simple GridView have resulted in shameful failure. I suppose figuring out what I am doing wrong is for another topic. To fix this implementation, I used OnWindowFocusChanged to find ANDROID_CONTENT height, then divided by the number of rows to set row height. The major lesson here that is not present in many of the discussions on this issue is OnCreate is the WRONG place to set dimensions. OnWindowFocusChanged occurs later when accurate measurements can be made. This information is not mentioned often in the many, many discussions on this topic.

ORIGINAL: I am working on an Android layout trying to set up a board with three columns and four rows.

I want to stretch the board to fill the available screen both vertically and horizontally. I tried nesting LinearLayout by row and column with the weight="1" option, but could only get it to stretch horizontally.

In the following configuration, the rows stretch to fill the width of the screen, but the columns are set at "60dp". I have tried GridLayout and TableLayout also, but haven't been able to get the desired result.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft = "10dp"
        android:paddingRight = "10dp"
        android:background="@drawable/bg" >
        <LinearLayout
            android:id="@+id/player1"
            android:layout_width="match_parent"
            android:layout_height="@dimen/positionHeight"
            android:layout_alignParentBottom="true"
            android:orientation="horizontal"
            android:background="@drawable/square" />
        <LinearLayout
            android:id="@+id/player2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/positionHeight"
            android:layout_alignParentTop="true"
            android:orientation="horizontal"
            android:background="@drawable/square" />    
        <LinearLayout 
          android:id="@+id/row0"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"  
          android:layout_below="@id/player2"
          android:layout_alignParentLeft="true" 
          android:baselineAligned="false"
          android:orientation="horizontal">
          <LinearLayout
            android:id="@+id/position0"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
          <LinearLayout
            android:id="@+id/position1"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" /> 
          <LinearLayout
            android:id="@+id/position2"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
        </LinearLayout>  
        <LinearLayout 
          android:id="@+id/row1"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" 
          android:layout_below="@id/row0"
          android:layout_alignParentLeft="true"
          android:baselineAligned="false"
          android:orientation="horizontal">    
          <LinearLayout
            android:id="@+id/position3"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" /> 
          <LinearLayout
            android:id="@+id/position4"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
          <LinearLayout
            android:id="@+id/position5"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
        </LinearLayout>      
        <LinearLayout 
          android:id="@+id/row2"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" 
          android:layout_below="@id/row1"
          android:layout_alignParentLeft="true" 
          android:baselineAligned="false"
          android:orientation="horizontal"> 
          <LinearLayout
            android:id="@+id/position6"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
          <LinearLayout
            android:id="@+id/position7"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
          <LinearLayout
            android:id="@+id/position8"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
        </LinearLayout>      
        <LinearLayout 
          android:id="@+id/row3"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" 
          android:layout_below="@id/row2"
          android:layout_alignParentLeft="true" 
          android:baselineAligned="false"
          android:orientation="horizontal">   
          <LinearLayout
            android:id="@+id/position9"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />    
          <LinearLayout
            android:id="@+id/position10"
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
          <LinearLayout
            android:id="@+id/position11"
           android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="@dimen/positionHeight"
            android:orientation="horizontal"
            android:background="@drawable/square" />
        </LinearLayout>

please give me suggestion.

Answer 1

I disagree with others saying you must use a GridLayout. Try this approach with a LinearLayout. I used a generic View for each cell of the grid, but any control will work.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/red" />

        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

This approach also requires no manual manipulation of the layout in code, everything is handled in the xml using weights.

Answer 2

you have to try this.

    <ImageView
        android:id="@+id/iv_clm1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/yellow" />

    <ImageView
        android:id="@+id/iv_clm1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/red" />
</LinearLayout>
<!-- second Row -->
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/iv_clm1"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/red" />

    <ImageView
        android:id="@+id/iv_clm2"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/yellow" />

    <ImageView
        android:id="@+id/iv_clm3"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@color/red" />
</LinearLayout>

Answer 3

In general, it is not a good idea to use so many Layouts. You should use TableLayout or GridLayout instead.

GridLayout:

• Related StackOverflow Q&A
  
• Official tutorial
• Very good tutorial

TableLayout:

• Official tutorial

Answer 4

As I mentioned in my UPDATE above, the real trick here is setting dimensions somewhere other than OnCreate. I initialized player1, player2, and position[] as the LinearLayout elements from the xml, then in onWindowFocusChanged I adjusted their height to fit. Not as good as GridView as suggested by others here, but its something I can actually make work!

with help from:
http://www.rapidsnail.com/developer/topic/2011/222/27/35613/title-bar-and-get-out-of-the-view-of-the-status-bar-display-area-height.aspx

@Override
    public void onWindowFocusChanged(boolean hasFocus) {
            super.onWindowFocusChanged(hasFocus);
            View content = getWindow().findViewById(Window.ID_ANDROID_CONTENT);
            player1.getLayoutParams().height=content.getHeight()/6;
            player2.getLayoutParams().height=content.getHeight()/6;
            for (int i=0;i<12;i++){
                    position[i].getLayoutParams().height=content.getHeight()/6;
            }