How to get two fields, side by side in relative layout (android)? - android

I know that you can use weight parameters for linear layout in order to make two fields align nicely. What I want to do is I want to make sure that left half of the screen is used by one text field and other half is used by other text field (I am talking about width).
How to do so?

Use a "hidden view", with no height or width, in the center and put the text views on either side. Use parent align to set left and right.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<View android:id="#+id/dummy"
android:layout_height="0dp"
android:layout_width="0dp"
android:layout_centerInParent="true"/>
<TextView
android:layout_alignRight="#id/dummy"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"/>
<TextView
android:layout_alignLeft="#id/dummy"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>

Can you calculate width dynamically? Maybe you could use 2 RelativeLayouts in a horizontal LinearLayout?

This is not possible with RelativeLayour as a parent. You need to wrap these TextViews inside a LinearLayout and set the widths with layout weight.

Related

Android and View size

I would just like to know if every time I need to set the View's size (width or/and height) as a function of its parent size (e.g. width = 0.5 * parent_size), I have to create a custom View and override onMeasure() or is there a way to do it using XML?
Thank you in advance!
Edit:
What I'd like to achieve is something like : place a view left aligned, with a width equals to 1/10th of the parent width and a height equals to 1/5th of the parent height. So on for other Views.
Here is an answer with two nested LinearLayouts and a TextView in the upper left corner, the TextView is 10% of width and 10% of height.
Just to prove it works with only one view.
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="10"
android:background="#FF0000"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:orientation="vertical"
android:weightSum="10"
android:background="#00FF00"
android:layout_weight="1"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#000000"
android:layout_weight="1"
android:text="Hello"
android:textColor="#FFFFFF"
/>
</LinearLayout>
</LinearLayout>
you can use LinearLayout as a container and android:layout weight attribute for example. You can read more here: developer.android.com/guide/topics/ui/layout/linear.html#Weight
So, if you want to add only one element, you can add your view with weight=1 and one element with weight=9. But if you want to add 10 view in one row (1/10 of height for each) - you can use GridView for that or TableLayout.
I have to create a custom View and override onMeasure() or is there a
way to do it using XML?
There are no such way to achieve you goal using XML Layout file.
You have to manage this view dynamically .Your second approach is right approach .
You need to create dynamic view and make onMeasure() method according to your functions.

How to position buttons in linear layout

I have two buttons in a horizontal LinearLayout. They are currently next to each other and the very left. I want to move the second button to the right end of the LinearLayout.
I tried android:gravity on these buttons but this didn't change the position of them at all.
Thanks
You cannot achieve this using a LinearLayout.
Use a RelativeLayout instead and place each button relative to RelativeLayout right or left. Something like below example:
<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" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:text="Button" />
</RelativeLayout>
The easiest way to do this is to use RelativeLayout. You can give your Button you want on the right the property alignParentRight="true".
<Button
...
android:layout_alignParentRight="true"/>
For a horizontal LinearLayout, android:layout_graivty (which is what you would want instead of android:gravity) left and right won't do anything because the Views are already placed from right to left.
See this answer on the difference between android:gravity and android:layout_gravity if you are uncertain about those.
Edit
Depending on exactly what you need/want, it is possible to do this with a LinearLayout though probably still much easier and more flexible with a RelativeLayout. Anyway, you can use weight to achieve something similar and play with the values. The following gives me a Button on the left and a Button on the right.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Left Button"/>
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Right Button"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right Button"/>
</LinearLayout>
Try setting the left button's layout_gravity to left (or start) and the right button's layout_gravity to right (or end).
The problem is that you are currently using gravity which
Specifies how an object should position its content, on both the X and Y axes, within its own bounds.
Instead, you should use layout_gravity that is
Standard gravity constant that a child supplies to its parent. Defines how the child view should be positioned, on both the X and Y axes, within its enclosing layout.
In other words - you are currently telling the buttons how to align their child views, instead of telling them how to be aligned within their parent.
You can set the android:layout_weight='1' and both buttons will share the screen equally(side by side) or if you want the extra space between them, you can place a button each in a linear layout and set the android:layout_gravity to left and rightfor each.
Add a RelativeLayout and set values to layout_marginLeft, layout_marginTop, etc.
eg.
android:layout_marginLeft="32dp"
android:layout_marginTop="160dp"
make linearLayout orientation Vertical and set button's gravity => center and as you want..

match_parent not performing as expected

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" />

android:gravity="top" doesn't align child view to top, but "center" aligns to center?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="top" <!--this line-->
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="56dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="36dp" />
</LinearLayout>
Shouldn't that make the smaller "0" t-view align to the top of the inner LinearLayout?
Since the other "0" is larger in height, it increases the overall height of the inner LinearLayout.
Alternatively, if you included this:
android:layout_gravity="top"
within the t-view of the smaller 0, it also does nothing.
Why is this?
Does the wrap_content of the LinearLayout wrap each individual view independent of others?
If so, then why does setting gravity to "center" work? In the sense that the smaller zero is vertically centered to its parent.
I know you can just set the smaller 0's height to match parent and set its own gravity to top. I'm just trying to understand this. Thanks.
The default behavior of the layout is to align the baselines of the text, which in English are at the bottom of the view. Adding android:baselineAligned="false" to your LinearLayout will align the second TextView at the top of the view.
gravity attribute applies to widgets within the LinearLayout, while layout_gravity tells the parent of LinearLayout where to place the child (LinearLayout).
Also, in a vertical LinearLayout the gravity="top" attribute won't work.
In the layout you have now, both text views will be stacked one on top of the other, wrapped with a linear layout with no space in-between - so the "top" or "center" values won't do anything because there is no extra space to move the text views up or down.
If you want to understand this better, try giving your linear layout and both text views backgrounds of different colors, like this:
android:background="#color/mycolor"
Then you will see the bounds of each widget.
You can use android:layout_weight="10" and distribute on the other components.

What layout to use to produce a data entry form in android

What is the best layout to use tp produce a data entry form like this one in android:
Should I use a vertical linear layout,, with a horizental layout for each of the items? or a relative layout. I can't use a table layout because each text entry might have it's own width.
Thanks
As main layout, you can use a linear layout vertical, and for each row, a linear layout horizontal, setting width to fill_parent.
For the 4 first rows (data form container), when setting width, use "0 dip" for width and set a proportion to layout_weight as you need, keep the same value for the 3 next row in order to keep the alignement. Dont forget to set gravity right fo first column
<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="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="50dip"
android:paddingRight="50dip">
<TextView
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.3"
android:text="label"
android:gravity="right"/>
<EditText
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:hint="value"
android:layout_marginLeft="15dip"/>
</LinearLayout>
</LinearLayout>
Do so, for last row with 0.5 proportion for each column.
Think, that helped you...
relative layout will be useful and use padding attribute to obtain the UI as image
As per my view you can pick linear layout it will be easy to handle
one Linear layout with vertical orientation
and 5 linear layouts with horizontal orientation

Categories

Resources