I'm trying to build a layout for my ListView items similar to the Gmail app's listing of labels, where it has the label text on the left and the count to the right. What I have mostly works, except with long text. What I have results in the text overlapping the count.
This is what I'm trying to mimic:
As you can see, the bottom label isn't wrapping where the top label is (read below for more details on this).
When both labels have a count, the count lineup on each row:
With what I have there should be a 3 showing for the last item but it's getting overlapped. Also, I'd like the "count" TextView to lineup on each row the same way the Gmail app is (center, right aligned, I guess?):
Layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:weightSum="1"
>
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="10dp"
android:gravity="left"
android:layout_weight=".75"
/>
<TextView
android:id="#+id/count"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="right|center_vertical"
android:padding="10dp"
android:layout_weight=".25"
/>
</LinearLayout>
I know when you're using layout_weight you're supposed to set the layout_width to 0px, however, this results in every row being cutoff at the same spot. I only want the text wrapping if it goes longer than the count TextView.
I am not good with Android layouts, I think they are extremely frustrating to work with, so this may be something easy. Thanks.
You should be able to prevent the views from overlapping by using a RelativeLayout instead of your LinearLayout, using the layout_toRightOf or layout_toLeftOf XML attributes to position the views relative to one another.
Figured it out. I needed to add android:layout_toLeftOf="#+id/count" to the first TextViewwhich Ernir answered above
Related
I tried Expand ListView method from using the code from the following blog, https://wirasetiawan29.wordpress.com/2016/01/20/membuat-expand-listview-material-design-di-android/
Everything works fine. But if I add a button in FrameLayout then the touchevent for listview item not works properly. Also I tried changing FrameLayout to Relative & also to Linear, but still no success.
<FrameLayout
android:id="#+id/wrapper"
android:layout_below="#+id/rl_title_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/deskripsi"
android:padding="16dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="Share"/>
</FrameLayout>
Thanks in advance.
According to Frame Layout description by Google's documentation...
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other. You can, however, add multiple children to a
FrameLayout and control their position within the FrameLayout by
assigning gravity to each child, using the android:layout_gravity
attribute.
Hence, your original TextView is actually overlapping by the Button (Share). You can use android:layout_gravity="right" to position the button in the right end of the screen, however, then you will have to fix the maxium length of string for TextView, so that it doesn't get overlap by the Button on the right.
If you don't have any problem, might I suggest you to use LinearLayout? It's easier to handle and render by the GPU (As far as I know). Here's an example code of your item...
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/wrapper"
android:layout_below="#+id/rl_title_wrapper"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="#+id/deskripsi"
android:padding="16dp"
android:layout_weight="1"
android:layout_gravity="left|center"
android:text="This is a big chunk of description for your listView item. you can write as much as you want...."
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share"
android:layout_gravity="right|center"/>
</LinearLayout>
You can also use RelativeLayout and GridLayout here.
I hope it answers your question. Cheers!
Is it possible to make margins collapse in Android? Let's say I have a LinearLayout and add three TextViews, each with an android:layout_margin of 10dp. I get the following result:
However, I'd like to get this result:
I know that I could workaround this by setting different top/bottom margins for the different items:
set the top margin of the first item and the bottom margin of the last item to 10dp,
set the remainding top/bottom margins to 5dp,
but that makes the design more complicated (especially if the TextViews are dynamically created). Is there some way to make the margins behave like in CSS? (For an explanation of why this makes sense, see: What is the point of CSS collapsing margins?)
What I typically do to fix this myself, is to simply cut the View's (i.e. your TextView) margin in half, and add that same number as padding to the containing ViewGroup (i.e. your LinearLayout). This way you will end up with even spacing around all items. For example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dip"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="I'm a TextView!"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="I'm a TextView!"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:text="I'm a TextView!"
/>
</LinearLayout>
Posting a solution for someone who might need this in future. Works for static as well as AdapterViews where list items are dynamic.
Example parent container:
<RecyclerView
----
android:padding_top="10dp"
android:padding_start="10dp"
android:padding_end="10dp"
----
>
</RecyclerView>
The padding ensures the spacing from top, left & right of the window.
Only thing remaining now is the vertical gap between two consecutive children & bottom gap after last child.
Example child / item view:
<RelativeLayout
----
android:margin_bottom="10dp"
----
>
<DynamicChild1 />
<DynamicChild2 />
</RelativeLayout>
For this question specifically, the child view will just be a TextView with bottom margin.
This will give you the exact output as expected in the question.
For many "header" TextViews across the pages I'm designing for a program, I would like them to be the parent.Width / 2 then properly aligned. While that would be fairly easy to code in the Java, I am attempting to do as much as possible in the XML layouts to avoid XML-Java code intersections until the last little bits (button presses, finish page, etc).
Do I have to go through each page and calculate every item's specific width myself or is there a way to put something along the lines of "fill_parent / 2"?
EDIT: Forgot to mention what is likely a key note - almost everything I am doing is in RelativeLayouts, I have very little use for LinearLayouts in this project.
If you have a LinearLayout that is flush to the left and right, you can do the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="left"
android:orientation="horizontal">
<TextView
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:text="I take up half the width!!!1" />
</LinearLayout>
By setting the weightSum on the parent, you're saying that the weights of the children should equal that amount. By setting the single child's weight to half of that, it'll take up half the space. Make sure to set the width of the child to 0 so it knows to use the weight value to calculate its space relative to its parent.
Then, you can align it however you'd like by setting gravity on the parent LinearLayout.
Use a tableview with two columns where each column is stretched and has a text view. Then hide the second textview
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<TextView android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Set Item Name "/>
<TextView android:id="#+id/hiddenTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"/>
</TableRow>
</TableLayout>
I'm trying to mimic the behaviour of the HTC SMS application (tradional view), where all messages are shown, and an EditTextis shown below. As you can see in the screenshot, when scrolling upwards, the EditText scrolls away at the bottom.
I'm stuck with this, even after reading multiple posts (eg Android Layout with ListView and Buttons and this website: http://www.finalconcept.com.au/article/view/android-keeping-buttons-visible), it's not working as expected.
Thanks to the comments and EditText now showing under ListView, I've managed to have my ListView take all available space and start scrolling once completed. The EditText is showing at the bottom of the screen now - always. I'd like it to disappear at the bottom when I scroll up though - now it remains at the bottom
Current Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ListView
android:id="#android:id/android:list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<TableLayout
android:layout_weight="0"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TableRow>
<EditText android:id="#+id/newmessagecontent"
android:layout_height="150dp"
android:singleLine="false"
android:gravity="top"
android:layout_width="250dp"
android:layout_alignParentTop="true"
/>
<Button android:layout_height="wrap_content"
android:id="#+id/sendmessage"
android:text="Send"
android:layout_width="wrap_content"
/>
</TableRow>
</TableLayout>
</LinearLayout>
i think what you need to implement here is some sort of modification of the SeparatedListAdapter from Jeff Sharkey from this Article. In this article he not only manages to add two Adapters to a ListView but also explains how to have Headers to separate them if you want (you can remove that part of the code).
So what i mean, is your first Adapter will be the data with It's rows, and the second Adapter will be a dummy one with no data that just points to a View with your controls or whatever.
this way the ListView and what you want to add at the bottom are gonna be all scrollable.
Hope this helps.
A ListView automatically scrolls if all the items in it take up more space than the view provides. What happens if you remove the ScrollView?
Say I have a list of Strings with the elements:
"One",
"Two",
"Three",
"Four"
I want to center them in the middle of the screen but I want to do it in a way that the start of each word is next to each other.
Like this:
One
Two
Three
Four
Considering that the font probably has different length per character, how do I do this best in Android?
I'm not sure how your application is behaving and if a ListView is strictly required, but the effect you desire can be achieved using TableLayout and TableRows. The TableLayout will line up the elements in each column for each row as you have described.
Having said that, TableLayout does not support having lines between the rows or gridlines (although I have seem some clever hacks involving changing the background colour of the TableRow to black, and then changing the padding and background colour of the View objects in the TableRow to white to get a black divider line - but that doesn't always work depending on your View objects).
I'm in a similar pickle, and that was the first avenue I examined. It didn't have a solution for my situation, but this might work for you. And if you do find a way of lining up the text in a List, I'd love to hear about it.
EDIT:
I also feel it is worth mentioning (based on how the conversation is progressing) that you can also set row.setOnClickListener() and make an entire row clickable in a TableView. Once you wrap it in a ScrollView, it's pretty list-like.
you can set the gravity at the elements you want to be center and for detail
android:gravity="center_horizontal"
Wrap your ListView in a LinearLayout with layout_gravity="center_horizontal" or
nvm: that won't work obviously..
So wait.. You want a list, where each line is clickable for the whole width of the screen, and you want to justify all lines to left, and ALSO center all of the justified text without breaking justification?
It sounds like you want to place your items within a parent with layout_width="wrap_content" and center the whole parent.
Something like this, perhaps?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:text="Content above..."
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<TextView android:text="One"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Two"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:text="Three"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView android:text="Content below..."
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Remember the difference between gravity and layout_gravity. The gravity attribute refers to the view's content. layout_gravity (and all other attributes prefixed with layout_) refers to the view's layout within its parent.
Edit: If you're looking to format ListView items similarly, try something like this as your list item layout with the ListView itself using layout_width="fill_parent" and layout_height="fill_parent":
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:weightSum="2"
android:gravity="center">
<TextView android:id="#+id/text"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Change the content of the TextView with id text in each list item in the usual way. The minHeight setting pulled from the current theme will make sure it stays a good size for touch.
The uniform centering in this case is handled by a combination of the weightSum and gravity on the LinearLayout and the layout_weight on the TextView. The TextView's weight divided by its parent's weightSum will determine the percentage of horizontal space the LinearLayout will give it. In the example above it will get 1/2 the available horizontal space, but centered.
Since ListView never knows the content of list items that are not currently onscreen there is no way to have it measure the text of every item in your adapter to center the content perfectly. You will have to approximate it using a list item layout like the example above.