How do I make the 3 vertical purchase buttons that have different length titles all the same width. The titles can change.
Currently I have them in a constraintlayout but as you can see the widths are different.
I suspect this is easy as all the questions refer to horizontal buttons.
I would personally solve the problem by adding a Linear Layout with orientation set to "Vertical.
Create a Linear Layout and set constraints.
Set width and height to wrap content (that means the width will be as long as the longest child).
Add 3 Buttons inside the Linear Layout.
Make sure you set the width of each button to "Match Parent". This will set the width of a button to the width of the parent Linear Layout.
Check this example xml code:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="0.49$ / Month"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="4.99$ / Year"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="14.99$ / Forever"/>
</LinearLayout>
I hope that my answer helped you.
Related
I am new to Android programming and I would like to make a table/grid (generically speaking, not sure the best layout to use just yet). I want the table to fill the entire screen, but I want to have variable sized height and width for cells. For example I would like column one to be 1/3 of the display width, and column 2 to be 2/3 of the display width. Similarly, I would like some cells to be 1/4 of the screen height, and others to be 1/2 of the screen height, etc. What is the best layout to use for this? I am looking at GridLayout, LinearLayout, and TableLayout.
Tx!
You can do it easily using LinearLayout.
Set its layout_weight at 1.
Then, set the layout_weight of your first element at 0.3 and the layout_weight of your second at 0.66. Then it will give to your first element 1/3 or the screen and the rest to your second one.
Put for each element a width of 0dp. Then according to the weight your gave to your elements, your elements will spread on the screen.
Hope it helps.
There are two approaches to this:
1) If you know what all your items will be and can pre-define them.
I would use LinearLayouts inside LinearLayouts (parent orientation set to vertical, children set to horizontal). Then use weight_sum on the parent (e.g. 3) and layout_weight on the children (e.g. 2, 1). Set the children layout_width to 0dp.
2) If you are trying to represent a variable list of data
This is a little more complicated, but you might be best off using a RecyclerView with a GridLayoutManager which will allow you to programmatically set the span of the items based on type.
Edit:
Example of #1:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:background="#abc"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#cda"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:background="#af0"/>
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:background="#ffa"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4">
<TextView
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="wrap_content"
android:background="#f00"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
I have a fragment in which i am displaying 4 buttons, in those button I m displaying some texts that I m getting from my sqlite database, after any button click I m refreshing the text on the buttons by getting some other text from the db.
What i want is to resize the buttons and set each button's height to the max of the buttons new size (the height will depend on the lengh of the text that is displayed in the button).
How can I perform that?
Kickoff example:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
<Button
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</LinearLayout>
More info - layout_weight.
Put all 4 buttons in a linear layout where the orientation="vertical" and give them each a layout_weight="1" and a layout_height="0dp". This will give you a each button having the same height. You can manage the overall height by adjusting the height of the linear layout. The linear Labour's height must be large enough to contain the buttons
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.
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
When I have the following, it shows top layout with four colors has much smaller area than the bottom layout area.
According to this documentation, when you add more to layout_weight, it should increase the area, but it decreases in the 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">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="4">
<TextView
android:text="red"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="3"/>
<TextView
android:text="green"
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="blue"
android:gravity="center_horizontal"
android:background="#0000aa"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text="yellow"
android:gravity="center_horizontal"
android:background="#aaaa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row three"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row four"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
I had the same problem. The trick is not to use "wrap_content" or "fill_parent" for the controls you are setting a weight to. Instead set the layout_height to 0px (when inside a vertical layout) and then the child controls will get proportioned per the weight values.
If you get the error as
error
Suspicious size: this will make the view invisible, probably intended
for layout ...
remember to set the correct parameter on
android:orientation in parent
If you are using fill_parent in a LinearLayout the layout will take as much space as possible and all layout items defined later will have to deal with the space left.
If you set the height of both of you LinearLayouts to wrap_content the weight should work as documented.
I know this is late but hopefully it helps people:
Use android:weightSum on the parent. Here is a link to the dev docs.
http://developer.android.com/reference/android/widget/LinearLayout.html#attr_android:weightSum
Use android:weightSum of 1.0 on the parent and then use 0.x on the child views with android:layout_weight in order for them to use that ratio of space.
Building on what Janusz said, if you use fill_parent, you can then set android:layout_weight to "split" the "full area" between multiple layout items.
The layout_weight doesn't increase the area, it increases it "right" to the area. but it's also relative to the parent. If you have a parent with a layout_height=fill_parent, with a layout_weight=0 and the parent has a sibling with the same, setting layout_weight=1 to one of the children does not affect the parent.
Both the parent, and the sibling, would take up 50% of the available area that they can fill.
The solution is to set layout_height to 0px when you use layout_weight.
But why do you observe this apparently strange/inversed behavior ?
Shortly : the remaining space is negative and so the child with weight 4 receive more negative space and it's height is more reduced.
Details :
Assume that the height of your parent vertical layout is 100 pixels.
Layout height on each child is fill_parent (i.e. each child is also 100 pixels height)
The total height of all child = 2*100 pixels
The remaining height = 100 - (2*100) = -100 pixels (it is negative)
Now, let's distribute this remaining height between child. The first one will receive the biggest part : 80% (i.e. -100*4/(4+1)). The second child receive 20% (i.e. -100*1/(4+1))
Now compute the resulting height :
child 1 : 100 + (-80) = 20px
child 2 : 100 + (-20) = 80px
Nothing strange here, only mathematics. Just be aware that remaining space can be negative ! (or set the height explicitly at 0 as it is recommended)
In linear layout properties change the layout width to "fill_parent" instead of "wrap_content"
hope it helps.
If the orientation of linearlayout is vertical,then set layout_height as 0dp. In case of horizontal layout set layout_width as 0dp.
If we do not follow above rules,the view tends to take up space as per specified attributes and hence the alignment is not as per expectation.