Reputation: 1085

Stop Linear layouts overlapping

I currently have an issue where layouts are overlapping eachother as shown below.

Never had this issue because and can't seem to find the cause of the problem. The text is currently positioned correctly but it seems the two linear layouts aren't weighting correctly.

XML

<?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="#777777"
    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>

Upvotes: 1

Answers (2)

Amit Vaghela

Reputation: 22955

If you have problem of Overlapping than you can use property to fix ImageView

android:scaleType="fitXY"

Suggestion :: you have to make different size of images when you are testing in different devices.

So your layout will be as below

<?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="#777777"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="10">

        <ImageView
            android:id="@+id/thumbImageView"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:background="@drawable/soul_bg"
            android:scaleType="fitXY" />

        <TableLayout
            android:id="@+id/tableLayout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="7"
            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>
</android.support.v7.widget.CardView>

Upvotes: 0

Konstantin Loginov

Reputation: 16010

The layout you posted, is pretty correct. This is how it looks for me:

It doesn't look like an issue with XML here.

I can only guess, what exactly went wrong for you, but the similar effect can be archived, if you set CardView's width to wrap_content (& if it's not enough space for the CardView in the layout), so make sure, that you don't do it somewhere in the code behind. So look for anything in the code, which might change layout's property of CardView or it's children.

Also, I'd suggest to make sure you're using the latest CardView support library.

P.S.

You still can be slightly improve your layout a bit by removing unnecessary components out of it:

<android.support.v7.widget.CardView
    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="#777777"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="3dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="10">

        <ImageView
            android:id="@+id/thumbImageView"
            android:layout_width="0dp"
            android:layout_weight="3"
            android:layout_height="match_parent"/>
        <TableLayout
            android:id="@+id/tableLayout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:stretchColumns="0,1,2"
            android:layout_weight="7"
            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>
</android.support.v7.widget.CardView>

I hope, it helps

Upvotes: 1

Stop Linear layouts overlapping

Answers (2)

Related Questions