Ravers Ravers - 3 years ago 205
Android Question

Make each column have the same width

I have this GridLayout:

<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
app:columnCount="3"
app:rowCount="4">

<FrameLayout
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnSpan="2"
app:layout_columnWeight="2"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />

</FrameLayout>

<FrameLayout
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnSpan="2"
app:layout_columnWeight="2"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="big text changing"
android:textColor="@android:color/black" />

</FrameLayout>

<FrameLayout
android:layout_marginStart="5dp"
android:layout_marginTop="5dp"
android:background="@android:color/darker_gray"
android:gravity="center"
app:layout_columnWeight="1"
app:layout_gravity="fill"
app:layout_rowWeight="1">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
android:gravity="start"
android:padding="10dp"
android:text="some text"
android:textColor="@android:color/white" />

</FrameLayout>

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


Which is producing this:

Grid Layout

Noticed the last row? The middle column his larger because of his bigger text. This TextView layout_height is set to wrap_content, and the parent FrameLayout layout_columnWeight is set to 1. So why the FrameLayout his geting larger instead of the TextView grow in height?

I want all the columns to have the same width, despite the text inside. If the text is somehow big, than the TextView should increase his height inside the FrameLayout.

His there any way to achieve this? What is wrong with my layout?

Answer Source

Add android:layout_width="0dp" to the big text frame to bring its width in line using your defined weight. You may need to do the same for the other frame layouts.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download