Develop Reference

ListView is not aligned even after added layout_weight

Here is the output of my code. I cannot get all views aligned in each ListView item. I already used layout_weight for each view and also set the layout_width to 0sp. Really curious about why it cannot work. Hope to get some solutions. Thank you!
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="95sp">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:src="#drawable/download"
android:layout_weight="1"
android:layout_marginLeft="12sp"
android:scaleType="fitCenter"
android:adjustViewBounds="false"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:orientation="vertical"
android:layout_marginLeft="12sp">
<TextView
android:id="#+id/name"
android:text="name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:textSize="20sp"/>
<TextView
android:id="#+id/new_age"
android:text="New Age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"/>
<TextView
android:id="#+id/email"
android:text="Email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"/>
<TextView
android:id="#+id/phone"
android:text="Phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"/>
</LinearLayout>
<TextView
android:id="#+id/countdown"
android:text="Tomorrow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:layout_marginTop="16sp"
android:textSize="16sp"/>
...
</LinearLayout>

Use this :
<?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="95dp"
android:weightSum="4"
android:orientation="horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="12sp"
android:layout_weight="1"
android:adjustViewBounds="false"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="12sp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="name"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/new_age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Age"
android:textSize="16sp" />
<TextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Email"
android:textSize="16sp" />
<TextView
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Phone"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/countdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16sp"
android:gravity="center"
android:text="Tomorrow"
android:textSize="16sp" />
<TextView
android:id="#+id/daysago"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16sp"
android:gravity="center"
android:text="4days ago"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>

You need to add layout_weightSum in your parent layout -
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="95dp"
android:weightSum="4"
android:orientation="horizontal">
<ImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="12sp"
android:layout_weight="1"
android:adjustViewBounds="false"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="12sp"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="name"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/new_age"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="New Age"
android:textSize="16sp" />
<TextView
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Email"
android:textSize="16sp" />
<TextView
android:id="#+id/phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Phone"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/countdown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16sp"
android:gravity="center"
tools:text="Tomorrow"
android:textSize="16sp" />
<TextView
android:id="#+id/daysago"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16sp"
android:gravity="center"
tools:text="4 days ago"
android:textSize="16sp" />
</LinearLayout>
You need to then equally distribute the weight by using android:layout_weight="1" on each of the child layouts.
Let me know if you need more help.

Layout elements weight problems

I'm trying to create xml for my ListView element.
Here is my *.xml file code:
<?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="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/contactId"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="gone" />
<TextView
android:id="#+id/contactName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/contactLastName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:textSize="15sp"
android:textStyle="bold" />
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/contactPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="3dp"
android:textSize="15sp"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/contactEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="3dp"
android:textSize="15sp"
android:textStyle="bold" />
</TableRow>
</TableLayout>
Every cell will have different value, and below is the picture of what I get, and what I'm trying to do:
layout.xml
Almost sure that solution is to use android:weight, but I have already try almost everything... I'll appreciate any help or hint

Maybe this is what you want to achieve
XML-
<?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"
android:weightSum="3">
<TextView
android:id="#+id/contactId"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_bright"
android:gravity="center"
android:text="Hello"
android:visibility="visible" />
<TextView
android:id="#+id/contactName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_green_dark"
android:gravity="center"
android:text="Hello2"
android:textSize="15sp"
android:textStyle="bold" />
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<TableRow>
<TextView
android:id="#+id/contactPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/holo_red_dark"
android:padding="3dp"
android:text="Sample text 1"
android:textSize="15sp"
android:textStyle="bold" />
</TableRow>
<TableRow>
<TextView
android:id="#+id/contactEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/holo_orange_dark"
android:padding="3dp"
android:text="Sample text 2"
android:textSize="15sp"
android:textStyle="bold" />
</TableRow>
</TableLayout>
</LinearLayout>

Your linear layout needs to have the weightSum attribute of 100. Then the other elements for example 30 30 40 to achieve what youre looking for.

Try this,
<?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">
<TextView
android:id="#+id/contactName"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:gravity="center"
android:text="TEST NAME"
android:textSize="15sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/contactLastName"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="0.3"
android:gravity="center"
android:text="TEST LAST NAME"
android:textSize="15sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2">
<TextView
android:id="#+id/contactPhone"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="3dp"
android:text="0000000000"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/contactEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/contactPhone"
android:padding="3dp"
android:text="test#gmail.com"
android:textSize="15sp"
android:textStyle="bold" />
</RelativeLayout>
</LinearLayout>

How to make Listview with tablerow

i am new in android studio.
currently i making listview, i want to make layout like this picture :
this is my code now
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:weightSum="3">
<TableLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5">
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginLeft="10dp"
>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Type"
android:textSize="18dp"
android:fontFamily="sans-serif"
android:textColor="#color/black"
android:id="#+id/tvTipeRequest"
android:width="130dp" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Date"
android:fontFamily="sans-serif"
android:id="#+id/tvTanggalRequest"
android:textSize="15dp"
android:width="130dp" />
</TableRow>
</TableLayout>
<TextView
android:layout_width="1dp"
android:layout_weight="1"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/black"
android:text="Status"
android:textSize="15dp"
android:gravity="end"
android:paddingTop="10dp"
android:fontFamily="sans-serif"
android:layout_marginTop="15dp"
android:id="#+id/tvStatus"
android:layout_column="38" />
</TableRow>
</TableLayout>
i realize that tablerow cant do the rowspan, so it didnt work out.
is there any simple way to do that?

Use this hierarchy:
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="1"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.2"
android:orientation="vertical"
android:layout_height="wrap_content">
<!--ImageView here-->
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.8"
android:orientation="vertical"
android:layout_height="wrap_content">
<!--All textViews here-->
</LinearLayout>
</LinearLayout>

You can have a single relative layout as your view container. That would be more efficient.
Read.
Layout:
<?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="wrap_content">
<ImageView
android:id="#+id/image_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:src="#drawable/circle" />
<TextView
android:id="#+id/text_view_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image_view"
android:text="text_1"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/text_view_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view_1"
android:layout_toRightOf="#+id/image_view"
android:text="text_2"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/text_view_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view_2"
android:layout_toRightOf="#+id/image_view"
android:text="text_3"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/text_view_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_view_3"
android:layout_toRightOf="#+id/image_view"
android:text="text_4"
android:textColor="#android:color/black" />
</RelativeLayout>
Output:

Listview row text alignment is off on device

I've got a listrow in a listview. In Android Studio the preview is showing the desired effect:
However on the device the text alignment is off:
The layout for the listrow is this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_row"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:layout_margin="5dp"
android:background="#drawable/list_row">
<LinearLayout
android:id="#+id/date_field_lv"
android:layout_width="80dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#color/apptheme_color"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="10dp">
<TextView
android:id="#+id/day_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="30sp"
android:fontFamily="sans-serif-condensed"
android:text="01"/>
<TextView
android:id="#+id/month_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="15sp"
android:translationY="-7dp"
android:text="JUL"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/date_field_lv"
android:orientation="vertical"
android:gravity="center_vertical">
<TextView
android:id="#+id/moment_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text"
android:textStyle="bold"
android:textSize="20sp"
android:text="Lorum Ipsum"/>
<TextView
android:id="#+id/type_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/sub_text"
android:textSize="18sp"
android:text="Placeholder"/>
</LinearLayout>
</RelativeLayout>
What is causing the misalignment on the actual device?

try this,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_row"
android:layout_width="fill_parent"
android:layout_height="80dp"
android:layout_margin="5dp"
android:background="#android:color/darker_gray"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/date_field_lv"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="10dp"
android:layout_marginTop="2dp"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/day_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-condensed"
android:text="01"
android:textColor="#android:color/white"
android:textSize="30sp"
android:textStyle="bold" />
<TextView
android:id="#+id/month_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="JUL"
android:textColor="#android:color/white"
android:textSize="15sp"
android:translationY="-7dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#id/date_field_lv"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/moment_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Lorum Ipsum"
android:textColor="#android:color/white"
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/type_lv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Placeholder"
android:textColor="#android:color/white"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>

Android custom listview vertical bar integration in an existing listview

I'm trying to integrate a vertical colored bar in front of my custom listview. I cannot succeed and I hope anyone could help me out.
The correct way without the colored bar:
The XML code of the above image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="4dp" >
<TextView
android:id="#+id/subject"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold" />
<TextView
android:id="#+id/relation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/default_green"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ticketDepartmentName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#999999"
android:textSize="14sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/ticketDueDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/color_transparent"
android:gravity="center_horizontal"
android:textColor="#color/red"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/priority"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_toLeftOf="#id/status"
android:background="#drawable/default_button"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
<TextView
android:id="#+id/status"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/salesdesk_button"
android:gravity="center_horizontal"
android:textColor="#ffffff" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
A nice try can be found here but does not work properly:

You could always add an imageview with an image of a vertical bar with the desired color inside another root LinearLayout which would be horizontal.

Try this..
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/colorBar"
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#478848" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text1"
android:textStyle="bold" />
<TextView
android:id="#+id/relation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text2"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ticketDepartmentName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Text3"
android:textColor="#999999"
android:textSize="14sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/ticketDueDate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:text="Text4"
android:textStyle="bold" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.6"
android:orientation="horizontal" >
<TextView
android:id="#+id/priority"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#F89407"
android:gravity="center"
android:text="priority"
android:textColor="#ffffff" />
<TextView
android:id="#+id/status"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#478948"
android:gravity="center"
android:text="status"
android:textColor="#ffffff" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>