How to align name:values pairs as ListView item - android

I need to show a list of name:value pairs in ListView. And I want to align values to longest name width. But length of names and its count is unknown until data is received.
For example:
name1: value1
name111: value2
someOtherName: value3
----------------------next ListView Item
name3: value4
longestNameeee: value5
----------------------next ListView Item
For now I've created Adapter with LinearLayout as item layout and I'm adding inner LinearLayouts with name - value pairs with weigth 0.5 - 0.5 (means values shows after middle of layout).
But how to set name - value weights according to longest name length?

maybe you can consider using a relative layout in you listview row layout and align the name to the left and value to the right?
Another option might be to can use Paint.measureText to measure text length - but to need to set the paint properties that same as the textview display properties (textSize, texyStyle,font,...)
http://developer.android.com/reference/android/graphics/Paint.html#measureText(java.lang.String, int, int)
you should be able to get a decent measurement of the text length using this - it give you a sixe in pixels Which you can use to set the layout params of all the name textViews in your list rows.

Do you need the values to commence exactly after the longest name? Or just to be able to show that longest name? Well what I would suggest (and did in a similar problem) is not using a LinearLayout, but a RelativeLayout.
In there you would define two TextViews, one of which would have gravity on the right. From what I can see from your code, the right field is always same size, correct? So, adjust it according to that and let the left space free to be filled.
An example layout of mine:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:padding="3dip" >
<!-- Name-->
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:textColor="#040404"
android:typeface="sans"
android:textSize="20dip"
android:text="Name"
android:textStyle="bold"/>
<!-- Amount -->
<TextView
android:id="#+id/amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_marginRight="5dip"
android:text="money"
android:textSize="20dip"
android:textColor="#FF8B1500"
android:textStyle="bold"
/>
</RelativeLayout>
The right TextView fills as much space as it needs and the left is left for the names.
hope I helped giving an idea!

Related

Android - Equal column width layout for any size text

I'm quite new to android. I wanted to show cards in a tabular form. I want 2 columns which should be exactly equal in length (even if the size of the content in one of the column increases).
For example, it should be like Play Store or Google Keep. My card will have 2 lines of data. First for Title and second for Description.
I tried many layouts; TableLayout, GridLayout etc. but neither worked actually. Lastly I read this SO post but it doesn't work if text size on my card increases.
Any idea on how this can be done? It will be a bonus if the Description text ellipsizes at end.
If I understand you well enough:
Try using a LinearLayout and setting the layout_weight of the items inside the layout. So you'll have something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Card
android:id="#+id/card1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Card
android:id="#+id/card2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
Then if you wanted to perhaps have multiple things in the columns just make those card items additional LinearLayouts of vertical orientation.

Vertically aligning suffix with tab space in android TextView

I have rows (of horizontal LinearLayout) with a TextView at the end that displays time. An this is how it looks:
Now I need the suffix (am/pm) in all rows to be aligned vertically. This is not the case in the above layout, as you can see, the last row is misaligned as the displayed time is longer.
I achieved this using the tab character \u0009. This means I would set the text to be for example "7:21\u0009\u0009pm". This produces desired result as show below:
However, I need to know if (1) this is the most efficient way and (2) that this would work on all android devices. If there is an alternative way to achieve this please let me know.
And here is an XML layout of a row for your reference:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/prayer_time_row_height"
android:layout_marginLeft="48dp"
android:gravity="center_vertical"
android:orientation="horizontal">
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Today"
android:textColor="#color/material_light_secondary_text"
android:visibility="invisible" />
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Event"
android:textColor="#color/material_light_primary_text" />
<com.devspark.robototextview.widget.RobotoTextView
style="#style/text_subhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="12:06\u0009\u0009am"
android:textColor="#color/material_light_primary_text" />
</LinearLayout>
BONUS
Bonus points for pointing out a way to vertically align the hour-minute separator, i.e., colon character.
Maybe using tabs is the most efficient, but the gap is pretty big and not configurable. If you need all those rows in a single view group, you may try to check out RelativeLayout: align am/pm vertically on common left, and put hours to the left and on the baseline. This is the most flexible way, since you can control relative positions and margins, but computation-wise it's less efficient because it requires extra calculation upon laying out elements.
As per aligning colons — in most fonts (not just monospace) digits are designed to take equal space, so just align the numbers on the right (e.g. in relative layout) and it should do.
For the colon character, you could try using the character "\uee01" instead of ":". This is what google does with the clock in the lock screen.
https://github.com/android/platform_frameworks_base/blob/master/packages/Keyguard/src/com/android/keyguard/KeyguardStatusView.java#L247
You can use a 2-column TableLayout. The first column is the time without AM/PM and the second column is just the AM/PM. Set the gravity of the first column to "end" or "right" and the times will be lined up at the colons if you are using a fixed width font.

Dynamic Android TextView size

I have a RelativeLayout where I have 2 TextView side by side (the left one it's the field name and the right one it's the value).
What I need it's to have the left textview always showing the full field name and the other TextView using the remaining space in that line to print the field value. Imagining that I have a field named "Field" with the value "That's a huge value!" and the remaining width of screen just leaves us with space to have half of the field value I need to have it like this:
| Field: That's a huge v... |
If, for some reason, the field name would fill the entire screen I don't event want to appear the value (I have another way of solving that).
I'm trying to find an adaptive way to do this (for any field and any value) but I can't find the right settings.
If I understood your question, the answer is simple:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FieldHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH:"/>
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/tv1"
android:singleLine="true"
android:text="Value lllllllllllllllllllllllllllllllggggggggggggggggggggggggggggggggggggggggT"/>
</RelativeLayout>

Android TextView doesn't do linebreak in ListView (multiline text)

I have created a 3-level ExpandableListView and have the problem that the TextViews which are used for the 2nd and 3rd level do not support line-breaks if the content is too long. It should be dynamically over more than one line, if needed. The 1st level TextView does it well (automatically) and I actually had the same settings in the xml for all three TextViews. Followed are the layout xmls, the one TextView with the id groupname is for the 2nd level (e.g. the first red X in the picture below) and the one with id childname is for the 3rd level (e.g. the second and third red X in the picture below). It should all be like at the green hook in the picture.
"singleLine=false" seems not to work. Also tried some different options found in other SO posts, but what I've testet haven't worked for me. Like ellipsize, scroll horizontale, different layout_width and so on. The only thing worked is to set a fixed layout_width on x hundred dp, but this is not dynamically, I'm right?
Would be great if anybody could help me with this. Lot of thanks!
Here's a screenshot:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/childname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:layout_marginLeft="60dp"
android:textColor="#AAAAAA"
android:singleLine="false"
android:text=""
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/groupname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="45dp"
android:layout_marginRight="60dp"
android:textColor="#555555"
android:singleLine="false"
android:gravity="center_vertical"
android:text=""
android:textAppearance="?android:attr/textAppearanceMedium" />
Add this line in your xml
android:inputType="textMultiLine"
or
Add text using coding like this, where you can add line break using '\n'(But here you have to manually add breaks where you want them)
TextView txt1 = (TextView) findViewById(R.id.childname);
txt1.setText("Hi \nHello \nHow are You");
Results will be
Hi
Hello
How are You
Edit
Accepted Answer - removing the line 'android:layout_alignParentLeft="true"
try using LinearLayout instead of RelativeLayout as parent for the TextView
I had add this attribute to my TextView inside ListView, and makes it do line break correct.
android:maxWidth="xxxdp"
F.Y.R.

Align overlapping text in TextViews

I want two TextViews to overlap such that individual letters will overlap perfectly (i.e. you can't even see there is another TextView on the screen). Here is the relevant part of my layout:
<com.testing.android.animals.OutlinedTextView
android:id="#+id/label_left_name"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Elephant"
android:layout_alignTop="#id/picture_left"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:textSize="40dp"
android:background="#99000000"
></com.testing.android.animals.OutlinedTextView>
<com.testing.android.animals.OutlinedTextView
android:id="#+id/label_left_letter"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="E"
android:layout_alignBaseline="#id/label_left_name"
android:layout_alignLeft="#id/label_left_name"
android:textColor="#ffffff"
android:textSize="40dp"
android:background="#99ffffff"
></com.testing.android.animals.OutlinedTextView>
When rendered, it looks like this:
Notice the individual "E" (in light gray) is aligned too high.
What can I change in the layout that will get them to overlap better?
The issue is that the p makes the bottom of the full word textview taller. and since you have wrap_content as the height, the two heights of the textviews are different.
If you set the height of each textview to a specific size (the same size), they should align.
But in general, i think your approach might be wrong - you may want to either look into spannable strings for formatting or, since it appears you are using a custom control anyway, have it do the formatting of the first letter. (here is an example of spannable strings: http://www.chrisumbel.com/article/android_textview_rich_text_spannablestring )

Categories

Resources