Stop Linear layouts overlapping - android

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>

Related

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>

No scrolling for RecyclerView android Lollipop 5.x

Struggling with RecyclerVivew for Android 5.X ( Lollipop ), I have designed simple layout as:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditStartDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/to" />
<TextView
android:id="#+id/tvAuditEndDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditDepartmentName"
style="#style/TextviewPrimaryMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:lines="1" />
<TextView
android:id="#+id/tvSubItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2">
<TextView
android:id="#+id/tvAuditSubmitDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5">
<CheckBox
android:id="#+id/chkbAuditStatus"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:background="#drawable/check_box"
android:button="#android:color/transparent"
android:clickable="false"
android:gravity="end" />
</FrameLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
And the custom RecyclerView.Adapter is attached to it, with item layout as:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<LinearLayout
android:baselineAligned="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditStartDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/to" />
<TextView
android:id="#+id/tvAuditEndDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditDepartmentName"
style="#style/TextviewPrimaryMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:lines="1"/>
<TextView
android:id="#+id/tvSubItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2">
<TextView
android:id="#+id/tvAuditSubmitDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5">
<CheckBox
android:id="#+id/chkbAuditStatus"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:background="#drawable/check_box"
android:button="#android:color/transparent"
android:clickable="false"
android:gravity="end" />
</FrameLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
Now issue with this setup is, the setup is working fine in all the android versions except 5.X as result no scrolling to RecyclerView. Also it is not the only case where no scrolling is observer but the no scrolling is also observed in other Views like Spinner with different observation. In case of Spinners the dropdown List is shown but the selected item is not being reflected on UI.
All the view are inflated within Fragment.
Just try to implement this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:baselineAligned="false"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditStartDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/to" />
<TextView
android:id="#+id/tvAuditEndDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/tvAuditDepartmentName"
style="#style/TextviewPrimaryMedium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:lines="1" />
<TextView
android:id="#+id/tvSubItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.2">
<TextView
android:id="#+id/tvAuditSubmitDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5">
<CheckBox
android:id="#+id/chkbAuditStatus"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:background="#drawable/check_box"
android:button="#android:color/transparent"
android:clickable="false"
android:gravity="end" />
</FrameLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</ScrollView>
</LinearLayout>
I have solved the issue by updating the support library to com.android.support:design:25.2.0. Also don't know the reason behind this and what exactly does it make difference. If any one have found any reason please let all know. It will be helpful. Thank you.

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:

Android layout even spacing

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>

Categories

Resources