ListView that shows numbers with a total at the bottom - android-listview

Question

I have a ListView in which I show some details including prices.
I need to show the total sum at the bottom of the ListView.
So far I've tried with a ListView to show the details and a table layout with a single row to show the total, the problem is that I can't get them to be aligned.
Do you know I can get a result like this one:
I know that the amount for "Cache" isn't the Total, but the idea is the same. All these rows show their amounts properly aligned and the space between the labels and the amount are filled with dots and this is the result I'd like to achieve, so I would be very grateful if you could help.
This is the layout I'm currently using for my activity
<?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="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" >
<ListView
android:id="#+id/detailsListView"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:dividerHeight="1dp" >
</ListView>
</LinearLayout>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:stretchColumns="0,1" >
<TableRow android:padding="1dp" >
<TextView
style="#style/Control.Label.Large.Stretched"
android:layout_weight="1"
android:text="#string/total" />
<TextView
android:id="#+id/totalSumTextView"
style="#style/Control.TextView.Large.Stretched"
android:layout_weight="1"/>
</TableRow>
<TableRow android:id="#+id/tableRow3" />
</TableLayout>
</LinearLayout>
An this is the layout for each item in the ListView :
<?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="vertical" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:stretchColumns="0,1" >
<TableRow android:padding="1dp" >
<TextView
style="#style/Control.Label.Small.Stretched"
android:layout_weight="1"
android:text="#string/item_quantity" />
<TextView
android:id="#+id/itemQuantityTextView"
style="#style/Control.TextView.Small.Stretched"
android:layout_weight="1" />
</TableRow>
<TableRow android:padding="1dp" >
<TextView
style="#style/Control.Label.Small.Stretched"
android:layout_weight="1"
android:text="#string/item_unit_price" />
<TextView
android:id="#+id/itemUnitPriceTextView"
style="#style/Control.TextView.Small.Stretched"
android:layout_weight="1" />
</TableRow>
<TableRow android:padding="1dp" >
<TextView
style="#style/Control.Label.Small.Stretched"
android:layout_weight="1"
android:text="#string/item_total" />
<TextView
android:id="#+id/itemTotalTextView"
style="#style/Control.TextView.Small.Stretched"
android:layout_weight="1" />
</TableRow>
</TableLayout>
</LinearLayout>
Each Item should look something like this :
And it's the sum of those totals that should be displayed below the ListView
This image is from what I'm trying to do. It's in Spanish, but it should give you a better picture of what I'm saying. As you can see the row below the ListView is not aligned with the values in the above it.

Answer 1

I see these problems in your screenshot:
alignment of the columns themselves is different
alignment of text in the columns is centred, not right-aligned
you probably want to use a fixed number of decimal points in your numeric output
row of dots
1) Alignment of columns
I think this is to do with using the TableLayout. As you can see in my previous example, I prefer to use RelativeLayout. When you get the hang of it you will see it is very powerful.
I would use my example below as a starting point for a single row, and make 2 more similar rows below that using the layout_below tag to position them below the row above.
Like this (long) example:
<?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="wrap_content"
android:padding="16dp" >
<!-- ROW 1 -->
<TextView
android:id="#+id/tvLabel1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Cantidad Pedida" />
<TextView
android:id="#+id/tvSizeMb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tvLabel1"
android:layout_alignParentRight="true"
android:text="12.0" />
<!-- ROW 2 -->
<TextView
android:id="#+id/tvLabel2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tvLabel1"
android:text="Unidad Medida" />
<TextView
android:id="#+id/tvSizeMb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tvLabel2"
android:layout_alignParentRight="true"
android:text="CJA" />
<!-- ROW 3 -->
<TextView
android:id="#+id/tvLabel3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tvLabel2"
android:text="Precio Unitario" />
<TextView
android:id="#+id/tvSizeMb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/tvLabel3"
android:layout_alignParentRight="true"
android:text="157.6036" />
</RelativeLayout>
2) Right-align the text within the columns
Your TextView items are being centred in the columns, due to using the layout_weight="1" tag. If you instead use the RelativeLayout as described above, the text views themselves are being set to the right.
3) Fixed format for your decimal numbers
To correctly align numbers, it helps to use a fixed number of decimal points. In your case it looks like you might need 4 decimal places.
When you set the values, you are probably doing something like:
myTextView.setText(String.valueOf(myNumber);
Instead of that, use the String.format() method to set the number of decimal places:
myTextView.setText(String.format("%.4f", myNumber);
For more info on that, check out this post:
Format Float to n decimal places
4) Row of dots between text fields
I was hoping to get something working with an XML Drawable that uses the stroke style, but ran into some strange issues. You might want to play around with that concept a bit.
However what I've done many times in the past is similar to what ArianJM recommends.
<View
android:layout_width="0dp"
android:layout_height="1px"
android:layout_alignBaseline="#+id/tvLabel1"
android:layout_toLeftOf="#+id/tvSizeMb1"
android:layout_toRightOf="#+id/tvLabel1"
android:background="#333"
tools:ignore="PxUsage" />
Note the use of px instead of dp for the height attribute. This creates a sharper image, and by using a 1px value, the line is not very strong. You could improve this by using a slightly transparent colour for the line.
Previous answer
You could use a basic ListView to display your items. The list view can use a custom XML layout for each item, that aligns the text the way you want it to.
For example, here is a RelativeLayout that aligns 2 text fields in the way you want them to be aligned:
<?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="wrap_content"
android:padding="16dp" >
<TextView
android:id="#+id/tvLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Total" />
<TextView
android:id="#+id/tvSizeMb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="4.57MB" />
</RelativeLayout>
Then below your list view, you would want to display your "Cache" row. Use the same layout for this, and the items will align correctly.

Answer 2

I think that for what you want to do you should make a custom layout for your ListView, and in that layout make a TextView element aligned to the right.
Your XML would contain something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="14.99$" />
</RelativeLayout>
That TextView is aligned to the right, add anything you want, then use the layout for every element in the ListView, all the TextViews should then be aligned.
The android:layout_alignParentRight="true" attribute makes the TextView (or any view with that attribute) be aligned to the right (inside it's parent).
Edit
For the dots you could use something like in this answer: https://stackoverflow.com/a/10282253/3290971
The full layout file would be something like:
<?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">
<TextView
android:id="#+id/item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Item"
android:textSize="20dp" />
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_toRightOf="#id/item"
android:layout_toLeftOf="#+id/price"
android:layout_alignBaseline="#+id/price"
android:background="#android:color/darker_gray" />
<TextView
android:id="#+id/price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="14.99$"
android:textSize="20dp" />
</RelativeLayout>
The result would be:
Not really dots, but that's something to start from, hope that helps.

Answer 3

#axel this is what I did to get a dotted line :
Create a xml file in the drawable folder and named dotted.xml. Copy and paste the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:dashGap="3dp"
android:dashWidth="3dp"
android:color="#android:color/darker_gray" />
</shape>
and in your layout call the shape using the background attribute
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_toRightOf="#id/item"
android:layout_toLeftOf="#+id/price"
android:layout_alignBaseline="#+id/price"
android:background="#drawable/dotted" />
In case the above code doesn't show the dotted line, add this to the View :
android:layerType="software"
Hope it helps