Search code examples
androidandroid-layoutmultilineandroid-gridlayoutfill-parent

Problems with android GridLayout


I have two questions about my GridLayout.

  1. Why does the layout extand past the phone when I have said to fill parent, and parent is set to match parent?
  2. Why is the third textview (the one that says "Date") getting mumped down? There is a big space between the one that says Reserve and the one that says date.

Thanks!

enter image description here

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="4"
    tools:context=".GridLayoutActivity" >

    <ImageView
        android:id="@+id/imgCabin1"
        android:layout_column="0"
        android:layout_row="0"
        android:layout_rowSpan="3"
        android:layout_height="248dp"
        android:scaleType="fitCenter"
        android:layout_width="200dp"
        android:src="@drawable/sky_beach" 
        android:background="#222222"/>

    <TextView
        android:id="@+id/txtCabint1Title"
        android:layout_width="fill_parent"
        android:layout_height="72sp"
        android:layout_column="1"
        android:layout_row="0"
        android:padding="10sp"
        android:text="Sky Beach"
        android:textSize="48sp" />

    <TextView
        android:id="@+id/txtCabinDesc"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_gravity="left"
        android:layout_row="1"
        android:maxLines="5"
        android:padding="10sp"
        android:singleLine="false"
        android:text="Dog friendly vacation rental cabin on a scenic mountain river"
        android:textSize="24sp" />

    <TextView
        android:id="@+id/btnCabin1Reserve"
        android:layout_width="fill_parent"
        android:layout_height="60sp"
        android:background="#888888"
        android:gravity="left"
        android:layout_column="1"
        android:layout_row="2"
        android:text="Reserve"
        android:textSize="36sp" 
        android:padding="10sp"  />

    <TextView
        android:id="@+id/txtCabinDesc"
        android:layout_width="fill_parent"
        android:layout_height="60sp"
        android:layout_gravity="top"
        android:layout_column="1"
        android:layout_row="3"
        android:text="Date: "
        android:textSize="36sp" 
        android:padding="10sp"  />


</GridLayout>

Solution

  • Instead of using a grid view why are you not using relative layout and set your layout relatively.Your second problem is because your are setting your grid row one after another,hence after setting the imageview it sets your textview txtCabinDesc..Try this following code snippet i have tried.

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="2"
    android:rowCount="4" >
    
    <ImageView
        android:id="@+id/imgCabin1"
        android:layout_column="0"
        android:layout_row="0"
        android:layout_rowSpan="3"
        android:layout_height="248dp"
        android:scaleType="fitCenter"
        android:layout_width="200dp"
        android:src="@drawable/ic_launcher" 
        android:background="#222222"/>
    
    <TextView
        android:id="@+id/txtCabint1Title"
        android:layout_width="match_parent"
        android:layout_toRightOf="@id/imgCabin1"
        android:layout_height="72sp"
        android:layout_column="1"
        android:layout_row="0"
        android:padding="10sp"
        android:text="Sky Beach"
        android:textSize="48sp" />
    
    <TextView
        android:id="@+id/txtCabinDesc"
        android:layout_width="match_parent"
        android:layout_toRightOf="@id/imgCabin1"
        android:layout_below="@id/txtCabint1Title"
        android:layout_height="wrap_content"
        android:layout_column="1"
        android:layout_gravity="left"
        android:layout_row="1"
        android:maxLines="5"
        android:padding="10sp"
        android:singleLine="false"
        android:text="Dog friendly vacation rental cabin on a scenic mountain river"
        android:textSize="24sp" />
    
    <TextView
        android:id="@+id/btnCabin1Reserve"
        android:layout_width="match_parent"
        android:layout_toRightOf="@id/imgCabin1"
        android:layout_below="@id/txtCabinDesc"
        android:layout_height="60sp"
        android:background="#888888"
        android:gravity="left"
        android:layout_column="1"
        android:layout_row="2"
        android:text="Reserve"
        android:textSize="36sp" 
        android:padding="10sp"  />
    
    <TextView
        android:id="@+id/txtCabinDesc1"
        android:layout_width="match_parent"
        android:layout_toRightOf="@id/imgCabin1"
        android:layout_below="@id/btnCabin1Reserve"
        android:layout_height="60sp"
        android:layout_gravity="top"
        android:layout_column="1"
        android:layout_row="3"
        android:text="Date: "
        android:textSize="36sp" 
        android:padding="10sp"  />
    

    Also change your id of the last textView because it clashes with your id of description textView.