Search code examples
androidandroid-tablelayoutandroid-cardview

Keep TableRow columns a static length in android


I have a card view with an image and a few text views as shown below.

enter image description here

This is exactly how I want everything to be positioned, however whenever text is placed where name and race are the column widths expand putting everything out of position as shown below.

enter image description here

I would like everything to stay in place but not sure where I'm going wrong.

XML

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="#2f2f2f"
    card_view:cardElevation="3dp"
    card_view:cardUseCompatPadding="true"
    card_view:cardCornerRadius="0dp"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical|center_horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/thumbImageView"
        android:background="@drawable/soul_bg" />

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:stretchColumns="0,1,2"
        android:id="@+id/tableLayout">
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:textColor="#FFF"
            android:layout_weight="1">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Name:"
                android:id="@+id/nameTextView"
                android:textColor="#FFF"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="HP:"
                android:textColor="#FFF"
                android:id="@+id/hpTextView" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="ATK:"
                android:textColor="#FFF"
                android:id="@+id/atkTextView" />
        </TableRow>
        <TableRow
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:textColor="#FFF"
            android:layout_weight="1">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Race:"
                android:id="@+id/typeTextView"
                android:textColor="#FFF"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="DEF"
                android:textColor="#FFF"
                android:id="@+id/defTextView"
                />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="WIS"
                android:textColor="#FFF"
                android:id="@+id/wisTextView"
                 />
        </TableRow>
    </TableLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

Solution

  • Like this way , you can apply weightSum , Try this below code

    <?xml version="1.0" encoding="utf-8"?>
    
    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="#2f2f2f"
        card_view:cardCornerRadius="0dp"
        card_view:cardElevation="3dp"
        card_view:cardUseCompatPadding="true">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:orientation="horizontal"
            android:weightSum="10">
    
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="3">
    
                <ImageView
                    android:id="@+id/thumbImageView"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/soul_bg" />
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="7">
    
                <TableLayout
                    android:id="@+id/tableLayout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:stretchColumns="0,1,2"
                    android:weightSum="6">
    
                    <TableRow
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="3"
                        android:textColor="#FFF"
                        android:weightSum="3">
    
                        <TextView
                            android:id="@+id/nameTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="Name:"
                            android:textColor="#FFF" />
    
                        <TextView
                            android:id="@+id/hpTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="HP:"
                            android:textColor="#FFF" />
    
                        <TextView
                            android:id="@+id/atkTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="ATK:"
                            android:textColor="#FFF" />
                    </TableRow>
    
                    <TableRow
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:layout_weight="3"
                        android:textColor="#FFF"
                        android:weightSum="3">
    
                        <TextView
                            android:id="@+id/typeTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="Race:"
                            android:textColor="#FFF" />
    
                        <TextView
                            android:id="@+id/defTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="DEF"
                            android:textColor="#FFF" />
    
                        <TextView
                            android:id="@+id/wisTextView"
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:text="WIS"
                            android:textColor="#FFF" />
                    </TableRow>
                </TableLayout>
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>