Android LinearLayout weights switched - android

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:

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

Dividing and positioning custom layouts equally in android relative layout

This is continuation from my previous question. Layout is changed as given below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="#color/black_70_opacity"
android:weightSum="100"
tools:context="com.dell.eventapp.ui.activity.HomeActivity">
<LinearLayout
android:id="#+id/top_image"
android:layout_width="match_parent"
android:layout_height="#dimen/img_height"
android:background="#drawable/activity_background"
android:contentDescription="#string/top_image"
android:orientation="horizontal"
android:scaleType="centerCrop"
android:weightSum="25">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:paddingBottom="#dimen/margin_8dp"
android:text="#string/cio_summit_monaco_2015"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_image"
android:layout_below="#id/top_image"
android:orientation="vertical"
android:weightSum="65">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginStart="#dimen/margin_20dp"
android:layout_marginTop="#dimen/margin_30dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/agenda"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/agenda"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
<TextView
android:id="#+id/sessions"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/sessions"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginStart="#dimen/margin_20dp"
android:layout_marginTop="#dimen/margin_30dp"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/speaker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/speakerbio"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
<TextView
android:id="#+id/venues"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/margin_20dp"
android:layout_weight="1"
android:background="#drawable/activity_background"
android:gravity="center|bottom"
android:layout_gravity="center"
android:paddingBottom="#dimen/margin_10dp"
android:text="#string/venues"
android:textColor="#android:color/white"
android:textSize="#dimen/medium_font" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/bottom_image"
android:layout_width="match_parent"
android:layout_height="#dimen/img_height1"
android:layout_alignParentBottom="true"
android:background="#drawable/activity_background"
android:contentDescription="#string/top_image"
android:scaleType="centerCrop"
android:weightSum="10">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:paddingBottom="#dimen/margin_8dp"
android:text="#string/home_content"
android:textColor="#android:color/white"
android:textSize="#dimen/large_font" />
</RelativeLayout>
</RelativeLayout>
In root Relativelayout, I've used android:weightSum="100", in top Linearlayout, I've used android:weightSum="25". In 2nd LinearLayout, I've used android:weightSum="65". In nested LinearLayout, I've used android:weightSum="2". In 3rd LinearLayout, I've used android:weightSum="2". In bottom RelativeLayout, I've used android:weightSum="10". Resulting UI is as given below:
Custom layouts used aren't spaced evenly at top and bottom. How can I do that by using android:weightsum and android:layout_weight?

Please have a look. I hope it will work for you.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageview_1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageview_1"
android:gravity="center"
android:text="CIO Summit Monaco 2015"
android:textColor="#000000"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/imageview_2"
android:layout_below="#+id/imageview_1"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview_11"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<ImageView
android:id="#+id/imageview_12"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageview_21"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
<ImageView
android:id="#+id/imageview_22"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageview_2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:background="#33000000"
android:src="#android:drawable/ic_menu_gallery" />
</RelativeLayout>

How to get the screen height and adjust view to fit proportionately

I have a requirement where i need to add multiple views to a screen with only top and bottom padding as 10. The first view which is a banner should occupy one third of the screen, while the rest 3 view should fill the entire screen with proportionate heights of each. How can i dynamically calculate the screen height and adjust my view accordingly.

Assuming your parent layout is LinearLayout,
Set the banner's properties as
layout_height="0dp"
layout_weight="3"
For each of the remaining 3 views, set properties as
layout_height="0dp"
layout_weight="2"
Doing this will make sure the banner has 1/3rd of the screen height, and the remaining 3 views are proportionately sized.
(This answer is not to find Height of screen dynamically. But based on your question, it looks like this is what you wanted to acheive.)

You can follow this example code to modify your own code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:circular="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_simple"
android:orientation="vertical"
android:weightSum="10"
tools:context="com.batterysaver.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:paddingRight="15dp"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="10dip"
android:layout_weight="1"
android:orientation="horizontal">
<com.lylc.widget.circularprogressbar.CircularProgressBar
android:id="#+id/battery_percentage"
style="#style/Widget.ProgressBar.Holo.CircularProgressBar"
android:layout_width="110dip"
android:layout_height="110dip"
circular:cpb_subtitle="Battery"
circular:cpb_title="Title" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/optimize_Button"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_centerVertical="true"
android:src="#drawable/save_power" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/panel"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_degree"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_meter"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_value"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="3">
<TextView
android:id="#+id/temp_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Temp"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/voltage_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Voltage"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/level_text"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:text="Level"
android:textColor="#android:color/white"
android:textSize="20dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:orientation="vertical"
android:weightSum="3">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/wifi_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/blutooth_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp" />
<ImageView
android:id="#+id/brightness_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_light_normal" />
<ImageView
android:id="#+id/rotate_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_rotate_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<ImageView
android:id="#+id/mode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_sound_normal" />
<ImageView
android:id="#+id/screen_timout_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_timeout" />
<ImageView
android:id="#+id/location_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_location_normal" />
<ImageView
android:id="#+id/sync_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_saintic_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="4">
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageView
android:id="#+id/flightmode_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_airplanmode_normal" />
<ImageView
android:id="#+id/mobiledata_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="10dp"
android:src="#drawable/ic_data_normal" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

How to align TextView in image center

I am try to display a textview in image center, but not working in LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/kurtis"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing" />
<ImageView
android:id="#+id/salwars"
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginLeft="10dp"
android:layout_weight="0.5"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
Any one have idea please help me.
I edited my question, this is my problem.

You could, for example, use RelativeLayout to center your TextView over the ImageView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="0.5">
<ImageView
android:id="#+id/salwars"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#mipmap/salwar"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_text="Testing"/>
</RelativeLayout>
</LinearLayout>

You can use FrameLayout for that. It centers all its childs, like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:orientation="horizontal">
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_marginRight="10dp"
android:layout_weight="1">
<ImageView
android:id="#+id/kurtis"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/kurtis" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="325dp"
android:layout_weight="1">
<ImageView
android:id="#+id/salwar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="#mipmap/salwar" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="Testing"
android:textSize="18sp" />
</FrameLayout>
</LinearLayout>

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