Android layout even spacing - android

Here's a comparison of what my editor and device is showing:
The problem is:
row containing TextView's should take 50% of the screen
row containing Icon should take remaining 50% of the screen
It works correctly in editor, but as you can see, layout behaves much differently on actual device.
Where's my problem and how to solve it?
Library used for icon is:
https://github.com/code-mc/material-icon-lib
It extends directly from ImageView.
Layout XML:
<TableLayout
android:id="#+id/menuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*" >
<TableRow
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_weight="1"
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/teenSelection"
android:textColor="#color/WHITE"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="30sp"
android:text="TEEN" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/adultSelection"
android:textColor="#color/WHITE"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="30sp"
android:text="ADULT"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/seniorSelection"
android:textColor="#color/WHITE"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="30sp"
android:text="SENIOR"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<net.steamcrafted.materialiconlib.MaterialIconView
android:layout_weight="1"
android:id="#+id/confirmButton"
app:materialIcon="check"
app:materialIconColor="#fff"
android:scaleType="center"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</TableRow>
</TableLayout>

you have set your heights of the two TableRows to wrap_content, but they must be match_parent like this:
<TableRow
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="match_parent">
otherwise the weight for the height is ignored.

You should try PercentRelativeLayout
in app level build.gradle add this
compile 'com.android.support:percent:23.3.0'
and change your layout with this.
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="3"
app:layout_heightPercent="50%"
app:layout_widthPercent="100%">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/teenSelection"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="TEEN"
android:textColor="#android:color/white"
android:textSize="30sp"
android:textStyle="bold" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/adultSelection"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="ADULT"
android:textColor="#android:color/white"
android:textSize="30sp"
android:textStyle="bold" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/seniorSelection"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="SENIOR"
android:textColor="#android:color/white"
android:textSize="30sp"
android:textStyle="bold" />
</LinearLayout>
<net.steamcrafted.materialiconlib.MaterialIconView
android:id="#+id/confirmButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#+id/layoutTop"
android:scaleType="center"
app:layout_heightPercent="50%"
app:layout_widthPercent="100%"
app:materialIcon="check"
app:materialIconColor="#fff" />
</android.support.percent.PercentRelativeLayout>

add your TableRow in LinearLayout like this.
i worked. i did test.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:stretchColumns="*">
<LinearLayout
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TableRow
android:layout_weight="1"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_height="match_parent"
android:layout_width="match_parent">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/teenSelection"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/black_slow"
android:textStyle="bold"
android:textSize="30sp"
android:text="TEEN" />
<android.support.v7.widget.AppCompatTextView
android:id="#+id/adultSelection"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_weight="1"
android:background="#color/black_slowest"
android:textStyle="bold"
android:textSize="30sp"
android:text="ADULT"/>
<android.support.v7.widget.AppCompatTextView
android:id="#+id/seniorSelection"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#color/colorPrimaryDark"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="30sp"
android:text="SENIOR"/>
</LinearLayout>
</TableRow>
<TableRow
android:layout_weight="1"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<net.steamcrafted.materialiconlib.MaterialIconView
android:id="#+id/confirmButton"
app:materialIcon="check"
app:materialIconColor="#fff"
android:scaleType="center"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</TableRow>
</LinearLayout>
</TableLayout>

Related

Getting varying layout width when provided fixed percentage weight

I am seeing varying layout weights though i have specified a fixed layout weight.
From the below code you can see that statusLinearLayout is set with layout_weight to 0.2 and the remaining space by other layout.
I am using the below layout for a Recycler item.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:id="#+id/mainLinearLayout">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_weight="0.2"
android:id="#+id/statusLinearLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:id="#+id/statusTextView" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="0.8">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/pNameTextView" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="#+id/hNameTextView" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:id="#+id/sTypeTextView" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:id="#+id/dateTextView" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/colorPrimary"
android:layout_below="#+id/mainLinearLayout"/>
</RelativeLayout>
Below is the UI what i am getting in emulator:
How to my statusLinearLayout to have a fixed length than variable lengths?
Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLinearLayout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/statusLinearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.2"
android:orientation="vertical">
<TextView
android:id="#+id/statusTextView"
android:text="nilesh"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:orientation="vertical">
<TextView
android:id="#+id/pNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="nilesh"
android:gravity="center" />
<TextView
android:id="#+id/hNameTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="nilesh"
android:gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/sTypeTextView"
android:layout_width="0dp"
android:text="nilesh"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="nilesh"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/mainLinearLayout"
android:background="#color/colorPrimary" />
</RelativeLayout>
RESULT

Why views are not equally spread

I have 4 TextViews. What I'm trying to do is to make all guests in the list take equal space (except the 'VIP List' TextView).
So I've set layout_height to 0dp and layout_weight to 1 but there is still some place not taken in the bottom.
What is wrong with my code?
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray">
<TextView
android:text="VIP List"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ACC1"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:gravity="center" />
<TextView
android:text="Bob"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#BF360C"
android:textSize="24sp"
android:textColor="#FFFFFF"/>
<TextView
android:text="Bill"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#4CAF50"
android:textSize="24sp"
android:textColor="#FFFFFF"/>
<TextView
android:text="Ben"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#2E7D32"
android:textSize="24sp"
android:textColor="#FFFFFF"/>
</LinearLayout>
Change your LinearLayout code with this;
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:background="#android:color/darker_gray">
...
</LinearLayout>
Put out "VIP List" TextView from content container LinearLayout because it is not part of "relative" TextView group, then add
android:weightSum="3" to LinearLayout content container because you have 3 TextViews with weight = 1. Finally wrap all view within a parent LinearLayout.
Consider something like below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ACC1"
android:gravity="center"
android:text="VIP List"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:weightSum="3"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#BF360C"
android:text="Bob"
android:textColor="#FFFFFF"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#4CAF50"
android:text="Bill"
android:textColor="#FFFFFF"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#2E7D32"
android:text="Ben"
android:textColor="#FFFFFF"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
It will work.. Use a Linear layout under the parent layout and it android:weightSum="3" and just put the vip list outside of second linear layout Like:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00ACC1"
android:gravity="center"
android:text="VIP List"
android:textColor="#FFFFFF"
android:textSize="24sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:weightSum="3"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#BF360C"
android:text="Bob"
android:textColor="#FFFFFF"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#4CAF50"
android:text="Bill"
android:textColor="#FFFFFF"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#2E7D32"
android:text="Ben"
android:textColor="#FFFFFF"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>

Why layout_weight and weightSum aren't working for me?

I have a small question about linearlayouts.
Let's say i have, 1 horizontal linearlayout that contains 6 vertical linearlayouts.
I can make all linearslayouts the same width size if i use weightsum=12(of horizontal ll) and layout_weight=2(for vertical ll)
Result :
Now i want the "test1" layout to be 2 or 3 times smaller than the others.
I tried with weightsum=11, and layout_weigth=1(for the test1 layout) and layout_weight=2(for the others). I can't make it work, here is my code...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="11">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test1"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="2"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="2"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="2"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="2"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="2"
android:background="#drawable/border"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test"
/>
</LinearLayout>
</LinearLayout>
How can i do it?
Thank you.
You need to use : android:layout_width="0dp" for the Linearlayout with the android:layout_weight="1" set as 1.
Now i want the "test1" layout to be 2 or 3 times smaller than the
others
You can reduce the layout weight attribute of test1. to 0.5..
use this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="6">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/border"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Output

Android LinearLayout weights switched

I have som nestd layouts, and nested weights (don't know, if source of problem, just saying), and in the lowest layer, my weights are switched up.
Meaning that TextView has weight 1, and ImageView has weight 2, and it does look correct in the preview, but when I build it, it's switched, and the TextView has weight 2, and the ImageView has weight 1.
Here's my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.firstproject.MainActivity">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="horizontal"
android:background="#color/colorPrimary">
<ImageView
android:src="#drawable/profile_pic"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="16dp"
android:scaleType="centerCrop"/>
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="#string/about"
android:layout_margin="16dp"
android:padding="5dp"
android:textColor="#000000"
android:textSize="16sp"
android:lineSpacingExtra="10dp"
android:gravity="center|start"
android:background="#77ffffff" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/arduino_cropped"
android:layout_below="#id/header">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="Hobbies"
android:padding="5dp"
android:textColor="#000000"
android:textSize="32sp"
android:gravity="center"
android:background="#77ffffff" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="horizontal">
<!-- This is where the problem lies -->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="2"
android:text="#string/coding"
android:layout_margin="10dp"
android:padding="4dp"
android:textColor="#000000"
android:textSize="14sp"
android:gravity="center|start"
android:background="#77ffffff" />
<ImageView
android:src="#drawable/code"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:layout_margin="10dp"
android:scaleType="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="3"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="#string/dancing"
android:layout_margin="10dp"
android:padding="5dp"
android:textColor="#000000"
android:textSize="14sp"
android:gravity="center|start"
android:background="#77ffffff" />
<ImageView
android:src="#drawable/dance"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="10dp"
android:scaleType="centerCrop"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
This is a screenshot from the device:
This is a screenshot from the layout manager:

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>
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
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>

Categories

Resources