I'm using Relative Layout to create a calculator screen, and i have a row of buttons labeled 1, 2, and 3. I want them evenly spaced, but i'm not sure how to do this with Relative Layout
I'm used to using the android:layout_weight function in LinearLayout, and give each of them a value of android:layout_width="fill_parent", as well as a layout_weight="1"
any way to get this to happen on calculator screen (without specifying DP or PX)
this is what i have set up at the moment, and they are aligned in order from left to right, under the TextView (calculator output screen). any suggestions/solutions to evenly space, filling the width of the screen?
<TextView
android:id="#+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/edit_text"
android:layout_margin="6px"
/>
<Button
android:id="#+id/button1"
android:text="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
/>
<Button
android:id="#+id/button2"
android:text="2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_toRightOf="#+id/button1"/>
<Button
android:id="#+id/button3"
android:text="3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_toRightOf="#+id/button2"
/>
If you want equal spacing, you do not want a RelativeLayout. Use a LinearLayout, as you suggest in your question. If needed, put the Buttons in a LinearLayout and put the LinearLayout in the RelativeLayout.
The easiest would be to manipulate the view during OnCreate().
Something like:
OnCreate(Context ctx){
int w = getWidth();
int h = getHeight();
Button B1 = findViewById(R.id.button1);
B1.setWidth(w/3);
--repeat for button2,3 textview--
}
Another option would be to use a TableLayout where you stretch the columns and force the buttons to fill parent. This would require you to use
<TableLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0,1,2"
android:layout_below="#+id/textView">
<TableRow><Button
android:id="#+id/button1"
android:text="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/><Button
android:id="#+id/button2"
android:text="2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</TableRow>
</TableLayout>
Related
I have a layout in which buttons placed on a screen, i want that if the screen has more space then buttons should be three per row, whatever the space they get, also their sizes should be adjusted with screen and i want maximum three buttons per row in the centre of the screen. Right now i have used linear layout for each row of two buttons, please guide me how to make adjustable buttons so if the screen size is big, it should display three buttons max, if size is very small it should display only two buttons per row with small button sizes and as explained on default screen it should display three buttons per row.
See my code example here
<LinearLayout android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="25dip"
android:paddingRight="25dip"
android:paddingTop="25dip"
android:layout_width="fill_parent">
<Button
android:id="#+id/Car"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="110dip"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/taxi" />
</LinearLayout>
You can use layout_weight to set the width of the button automatically according to the width of LinearLayout.
<LinearLayout
android:id="#+id/wrapper"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="25dip"
android:paddingRight="25dip"
android:paddingTop="25dip"
android:layout_width="match_parent">
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="0dp"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:layout_weight="1"
android:text="#string/taxi" />
</LinearLayout>
However, I don't think you can set the LinearLayout to have three buttons depends on the width by XML. You can only achieve it programmatically.
if(getCurrentScreenWidth() > SPECIFIED_WIDTH_FOR_3_BUTTONS){
LinearLayout layout = (LinearLayout)findViewById("wrapper");
Button button = createNewButton();
layout.addView(button)
}
BUT the best practices will be to load different layout according to screen as described in android document
This is how I would do this.
For each of your buttons set width like:
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="110dip"
android:layout_marginLeft="10dip"
android:text="#string/car" />
If you set the width to 0dp and the weight to 1 for each of your buttons then the buttons will expand to fill the space.
Using fix value for height and width may causes the problem with different screen. use below xml code to align button as per your requirement.
<?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="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/Car"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/car" />
<Button
android:id="#+id/Taxi"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/taxi" />
<Button
android:id="#+id/bus"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/bus" />
</LinearLayout>
So in my layout, I've got three buttons on the same line, one left, center and right aligned. I also have TextViews below the buttons to serve as labels, but they too are aligned left, center and right respectively. I'd like them to instead be centered below the buttons and on the same line as one another, but I can't figure out how to do this without explicitly setting coordinates, which will then break on some phones. I tried setting various weights and layout options, but it just doesn't work how I'd like. Is there a way to do this in a RelativeLayout? Or maybe it's just not possible. Finally, I've got more three TextViews on the same line and one button on the bottom. I would like to align as shown bellow:
http://imgur.com/vYuqk
Thanks in advance.
You can't center one element below another with RelativeLayout. You could try a horizontal LinearLayout with three RelativeLayouts (one for each column). You could contain the whole thing in a vertical LinearLayout to get the bottom button.
TableLayout or GridLayout are possibilities as well.
As people suggested, there is no way to center a View below another View in RelativeLayout. You could maybe use this hack if you can confirm that the TextView width need not be more the Button width. The solution is: you make the TextView align its left and right edge to the Button above. Then set the gravity of the TextView to center so that the text inside TextView is centered.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="130dp"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_centerHorizontal="true"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:text="Button3" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button1"
android:layout_alignRight="#id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt1" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button2"
android:layout_alignRight="#id/button2"
android:layout_below="#+id/button2"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt2" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/button3"
android:layout_alignRight="#id/button3"
android:layout_below="#+id/button3"
android:layout_marginTop="50dp"
android:gravity="center"
android:text="Txt3" />
</RelativeLayout>
what I want to achieve is, divide the rows layout described in picture below. what should I do to achieve dividing the row into 3 exactly same size and 1 unknown size? X are same size and i dont know and dont want to specify if its not necessary...
EDIT: buttons are on the left , center, and right.
Use a LinearLayout inside a RelativeLayout. Put 3 items inside the LinearLayout and give them the same weight. Put the unknown item to the right of the LinearLayout with the help of RelativeLayout.
Left elements will align themselves according to the right-one's width.
Here's the code: https://gist.github.com/3772838
And here 2 screenshots with different sized right most elements:
http://goo.gl/Nezmn
http://goo.gl/XbQwL
Kolay gelsin =)
You can use android:layout_weight to distribute extra space proportionally. You want the three left buttons to absorb all the extra width, so the right (fourth) button should have the default weight of 0. Since you also want them to have the same width, the easiest is to assign them a width of 0dp and give them all the same weight:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Does your extreme left size has a minimum width ?
If so, you should use a LinearLayout with horizontal orientation.
It could contains 2 LinearLayout, one which contains 3 Views (your Buttons) with 0 width and with 1 weight each and the other LinearLayout has a minimumWidth set.
Instead of the marginRight, you could specify a width for the first layout.
Ted Hopp get it right ;)
<?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="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#+id/rlayoutParent">
<RelativeLayout
android:layout_width="wrap_content"
android:id="#+id/rlayoutButtons" android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:layout_toRightOf="#+id/button2"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/rlayoutOther"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/rlayoutButtons" android:gravity="right">
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button" />
</RelativeLayout>
</RelativeLayout>
you cab use the layout_weight attribute. give all the x layout the same weight and the question mark a diffrent weight until the screen will devide as u like
In Android lay out how to create a TextView in leftside and two button on right side with same line.
Which layout is better to use for this layout Table Or Relative ?
You can use a LinearLayout to achieve this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_weight="1"
android:text="a text"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1">
</Button>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2">
</Button>
</LinearLayout>
Its is better to use Relative Layout for this kind of view. use android:layout_alignParentRight="true" to Align Right and android:layout_alignParentLeft="true" to Align Left. e.g
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >
<TextView
android:id="#+id/type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="Large Text"
android:textColor="#76D4F7"
android:textStyle="bold"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
The easiest would be to use a LinearLayout (orientation horizontal) as pointed out in the previous answer. You can also set the property under Layout Weight to 1 for each button and textview. Then set the layout width for all those object to 0. This will enable you to proportionally scale how much of the area is taken up horizontally by each object. So for example if you set the Layout Weight on the Textview to 2 and each button to 1, then the textview will take up 50% of the space horizontally (2/(2+1+1)). This makes it easier to scale the objects on different device and hopefully starts to address the question of which is the best layout to use in this case.
How can i make a layout in XML with four button on the same line. I need the first and last button to be of specific width (40px) and the middle two to be of their content width (wrap_content)?
Sample how I would like to position buttons...
|-b1-|....|--b2--||---b3---|....|-b4-|
Thanks in advance!
Just put the four buttons in a horizontal LinearLayout. Define b1 with a layout_width of 40px, b2 and b3 with a layout_width of wrap_content, then b4 with a layout_width of 40px. If you want it centered, just set the LinearLayout's layout_width to fill_parent and give it a gravity of center_horizontal. Something like:
EDIT: Oh, if you're wanting the two 40px buttons on the sides, and the two wrap_content buttons centered, you could go two ways. Simplest method would be to add some blank Views to your LinearLayout (I'll demonstrate below), while a more lengthy way would be to use a RelativeLayout and put the two center buttons within a LinearLayout within that RelativeLayout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_width="wrap_content"
>
<Button
android:layout_width="40px"
android:layout_height="wrap_content"
android:text="Button 1"
/>
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
/>
<View
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:layout_width="40px"
android:layout_height="wrap_content"
android:text="Button 4"
/>
</LinearLayout>