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.
Related
I have this layout:
All views fill the entire space horizontally, and they're inside a LinearLayout oriented vertically. The blue parts have a fixed height (they have the wrap_content property).
The red part is a ListView. How can I make it fill that center space if there are not enough elements in the list and at the same time preventing it to push the last two elements down if it has more elements?
So far it doesn't push down the two views under it (with the layout_weight="1" property), but if it doesn't have enough elements, it shrinks and makes those two elements go up, leaving an ugly white space under them.
This is what happens:
This is what I expect:
Notice that even though the ListView is smaller, the two last views don't go up.
So far I've tried:
Giving all views a weight (ugly display but sort of works).
Giving each view a size (different results on different devices).
Giving the last view the android:gravity="bottom" property, but the view still goes up.
What may work
I've been messing around and I think a RelativeLayout may work, with a property like layout_alignBottom that instead of aligning to the end of the given view, it aligned to the start of it.
SOLUTION
The solution was to use a RelativeLayout and set the list's layout_above and layout_below properties to that of the elements I want to align it to.
<LinearLayout 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:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.stackoverflow.app.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:text="#string/hello_world" />
</LinearLayout>
Here's a couple of options that may work for you. Let me know how it goes.
Option 1:
Set the containing vertical orientated linear layout to fill_parent / match_parent (they are the same). Then set the gravity or layout gravity of the bottom 2 views to bottom.
Option 2:
Contain the list view in a linear layout with a fixed height. Set the list view to wrap_content.
EDIT
You could use relative layouts for this, this link here seems to do what you need
http://www.javacodegeeks.com/2013/10/android-fixed-header-and-footer-with-scrollable-content-layout-example.html
How about wrapping your list view inside the a layout and give the layout the fixed height.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="300dp" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</RelativeLayout>
I imagine this should be a fairly easy one to answer, if you understand XML Layouts better than I do that is. I don't seem to get what I was thinking I should when using the match_parent layout_height.
I have a LinearLayout root element with android:orientation="vertical". Inside this LinearLayout I want three elements:
- TextView
- ListView
- TextView
For both the TextViews I set android:layout_height="wrap_content" so that they will be only as tall as is necessary to display their contents. The thing is, I want the one TextView to sit at the top of the form, the other one to sit at the bottom of the form while the ListView fills up whatever space is available on the form. So here is what my xml layout looks like:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Bottom TextView" />
But it doesn't work. Here's what I get. I've selected the ListView so that it will be highlighted. Notice how it extends all the way to the bottom of the form, pushing the bottom TextView off the form.
When I change the layout_height property of the ListView to some fixed value, like 180dp, this is what the form looks like. I'm just posting this to prove that the bottom TextView is there but I still don't know how to get it to be fixed to the bottom of the screen while the ListView takes up whatever space remains, but in between the two TextViews.
Thanks in advance.
While the other answers try to fix your problem (which they don't actually--they suggest you do something that looks similar but may or may not look good on different devices), no one has filled in the gaps in your knowledge of LinearLayouts and match_parent. And these gaps are very common--Google's documentation is still far below stellar.
First, how do Views work within a LinearLayout? Let's go through the process of drawing a LinearLayout, using orientation="vertical" for simplicity.
Examine the height of the first child of the LinearLayout (LL for short). If the height is match_parent or fill_parent (old name for the same thing) then the height of the View is stretched to fill the entire viewing area. If the height is wrap_content, then measure the vertical space the View takes and use that space for the View. If the height is a non-zero number, use exactly that many pixels for the View's height (may clip if too small). If the height is 0 see below.
Put the next view below the view in 1. Check its height and act accordingly.
Continue for all the Views. If a View is pushed off the bottom, go ahead and stop calculating because no one will see it or any succeeding Views (assuming no ScrollView).
If the height of a View is 0, check it's gravity. This requires a second pass, storing the gravity of all the views and then allocating their heights proportionally. As you can guess, the second pass doubles the time layout takes, which isn't significant for simple layouts.
Explanation of your example: The first child of the LL (the first TextView) is measured and takes a certain amount of pixels. Then your ListView takes all the remaining space (via match_parent). And then your second TextView is not drawn at all as it's off the bottom of the screen. Which is pretty much what you observed, but now you understand why.
Solution: Use RelativeLayout. Works perfectly in this case.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/top_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textSize="30sp"
android:text="Top TextView" />
<TextView
android:id="#+id/bottom_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="30sp"
android:text="Bottom TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/top_tv"
android:layout_above="#id/bottom_tv"
/>
</RelativeLayout>
The RelativeLayout tells the layout inflater to draw the first TextView at the top, then draw the second TextView at the bottom, and then fill the rest of the space with your ListView. I believe this is exactly what you want.
Welcome to Android. You'll be using this pattern a LOT!
Change the ListView height to 0dp and add weight=1
i.e.:
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Bottom TextView" />
use android:layout_weight to define weights to your widgets inside the outermost layout. Declare their height as 0dp and then define android:layout_weight to each one of them .
Total weigh sum of the three of them should be 1. According to your need you can deine 0.1 weight to both top and bottom TextView's and define 0.8 to ListView.
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight = "0.1"
android:textSize="30sp"
android:text="Top TextView" />
<ListView
android:id="#+id/listView_Species"
android:layout_width="match_parent"
android:layout_weight = "0.8"
android:layout_height="0dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:textSize="30sp"
android:layout_weight = "0.1"
android:text="Bottom TextView" />
Today I have been playing a bit with the LinearLayout and have been suprised with the results:
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Big Text"
android:gravity="center_vertical|center_horizontal"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Medium Text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Button"
/>
</LinearLayout>
This is a simple layout with a text view header, then a text view that I want it to cover all parent (but the space occupied by the bottom button) and a button that is placed at the botton side with the layout_gravity="bottom".
This produces a layout where header is shown correctly, center text view covers all remaining free space and the button does not appear. Why is this? Shouldn't the center text view just calculate its size taking into account the bottom button size?.
Use layout_weight="1" in your center TextView.
Always remember thumb rule
If you are using linear layout with vertical orientation as soon as it finds the control
with
android:layout_height="match_parent"
The layout will ignore all the controls present below it.
Hope this help
Vipul
In place of this
android:layout_width="match_parent"
android:layout_height="match_parent"
use 'wrap_content' like this
android:layout_width="wrap_content"/"fill_parent"
android:layout_height="wrap_content"/"fill_parent"
Shouldn't the center text view just calculate its size taking into account the bottom button size?.
No, because you tell the second TextView to match its parent's height, thus FILL_PARENT and hence it will fill up all remaining space, leaving none for the last TextView.
(...) and a button that is placed at the botton side with the layout_gravity="bottom".
Unfortunately, that's not how a LinearLayout works. If you set the orientation to vertical, basically only the left and right gravities will have effect. Vice versa, with the (default) horizontal orientation, only top and bottom work. The orientation determines in which direction the View children are dynamically positioned in order, which implies you cannot manually change the 'position' in that direction.
Now, to get the desired effect, you can give the second TextView a height of 0dp and a weight of 1, resulting in it dynamically filling up all remaining space without pushing the third TextView off the bottom. Alternatively, you can use a RelativeLayout, with which you can directly set the position, and simply instruct the middle TextView to sit below the first, but above the last.
My Login screen layout seems like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/login_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<include
android:id="#+id/headerlayout"
layout="#layout/headerview"
android:layout_height="50dip"
android:layout_width="fill_parent" />
<ImageView
android:id="#+id/imgIcon"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/txtUserName"
android:layout_width="fill_parent"
android:layout_height="80dip"
android:lines="1"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="16dip"
android:text="User Name"/>
</LinearLayout>
However I am not able to see ImageView and TextView. Only headerview is visible and white layout below it. Why is it so?
Thanks,
Stone
just add
android:orientation="vertical"
in your <LinearLayout> tag.
Edit:
By default the orientation is set to Horizontal means every component will be added horizontally, since you are using "fill_parent" to the header, so it covers all the place(width) and leave no room for other components to appear. So when you add vertical all components are placed vertically. So enough room is available for components to layout themselves.More detail here
Bydefault LinearLayout aligns all children in a single direction horizontally (if you dont specify android:orientation ) .
So here in your case it was adding views horizontally. Your header portion took full width of the screen (as you have specified android:layout_width="fill_parent" in include tag)and no space is left for that TextView and ImageView.
You just have to add orientation tag in LinearLayout and set its value to vertical.
ie android:orientation="vertical".
LinearLayout from Android Docs says
LinearLayout aligns all children in a single direction — vertically or horizontally, depending on how you define the orientation attribute. All children are stacked one after the other, so a vertical list will only have one child per row, no matter how wide they are, and a horizontal list will only be one row high (the height of the tallest child, plus padding). A LinearLayout respects margins between children and the gravity (right, center, or left alignment) of each child.
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.