Develop Reference

Android UI: Size 2 view?

Good day everyone, currently i'm trying to make my first Android app, and then the first thing i realized, that idiotic XML UI designing.
I have this 2 view (button) and i'd like to make them so the first one fill the half of the parent (RelativeLayout) and the second one fills the other half of the parent...
My Code is:
<Button
android:id="#+id/Top1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#id/Top2"
android:text="top1"/>
<Button
android:id="#+id/Top2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/Top1"
android:text="TOP2"/>
The problem, that i'm get this error:
"No resource found that matches the given name (at 'layout_toLeftOf' with value '#id/Top2')."
It seems, that not even Android want to use XML.
Like an old C program where if a method is written below the call, it will give an error...
So i have 2 question:
1: How to solve this problem in the XML?
2: Or can i avoid this XML designing, and use code-like design like in C# ?

There are a few ways you can go about this and I provided you with two ways to have buttons aligned side by side.:
Use a LinearLayout with orientation set as horizontal
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/btn_container">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Left Button"
android:layout_weight="1"
android:id="#+id/btn_left" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right Button"
android:id="#+id/btn_right" />
</LinearLayout>
Use a RelativeLayout and an extra View to align your buttons.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:id="#+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/btn_left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#id/strut"
android:text="Left Button" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/strut"
android:layout_alignParentRight="true"
android:text="Right Button" />
</RelativeLayout>

You are correct, Top2 needs to be defined first in the XML before you can refer to it. That being said, if all you are doing is putting 2 buttons next to each other and have them fill the parent, you should consider using a LinearLayout. Order is important there, too: for horizontal orientation the children are laid out left to right, for vertical they are laid out top to bottom.

How to make buttons to take space and increase size of as much as they want with respect to the resolution?

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>

Proper way to divide into 4 pieces an android layout

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

Button Alignment Right of Center - Android

I'm having some trouble getting my button text to align correctly in my Android application. Currently, my button text is aligning with the left of the text on the center of the button, as shown:
|Whitespace|Text Here|
I have tried using gravity ="center_horizontal|center_vertical" to no avail. I have tried adding a new button to a completely separate project and this still holds. Also it does this in LinearLayouts and RelativeLayouts.
Thanks in advance for your help.
Here is one of the layout files. However it is doing it in all of them including in other projects. Also, all 3 of the buttons on this layout have the same issue.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:text="#string/history_delete_record"
android:id="#+id/History_Delete_Record"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal|center_vertical"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/History_Delete_Record"
android:layout_alignLeft="#+id/History_Delete_Record"
android:id="#+id/History_Open_Details"
android:text="#string/history_open_record"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/History_Cancel"
android:text="#string/cancel"
android:layout_below="#+id/History_Open_Details"
android:layout_alignLeft="#+id/History_Open_Details"
android:layout_marginTop="19dp">
</Button>
</RelativeLayout>

Here is a simple implementation of a button with centered text:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/myBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:text="Button text!" />
The problem with your code is that you are setting the width in pixels, when you should be using the xml attribute android:layout_width="wrap_content", which will wrap the button text to fit the view accordingly.
Also note that you should never set a view's width in pixels as this will not work well across different screen sizes and densities. Instead of using "px", specify the width in "dp", a density-independent unit of value. For more information on this topic, see this post.
EDIT
Here is my suggested xml code that you use for your layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/History_Delete_Record"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text="#string/history_delete_record" >
</Button>
<Button
android:id="#+id/History_Open_Details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/History_Delete_Record"
android:layout_alignRight="#+id/History_Delete_Record"
android:layout_below="#+id/History_Delete_Record"
android:text="#string/history_open_record" >
</Button>
<Button
android:id="#+id/History_Cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/History_Open_Details"
android:layout_alignRight="#+id/History_Open_Details"
android:layout_below="#+id/History_Open_Details"
android:text="#string/cancel" >
</Button>
</RelativeLayout>

height not matching - buttons

I want three buttons equally spaced and equally sized. when the text of one of the button is more than 3 words (new line), the button drops below as shown in picture. Is there a way to fix the same where in all the three buttons are in the same line? I tried using the TableLayout/Row but it did not help.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="#+id/linearLayout1"
android:layout_alignParentBottom="true" android:layout_width="fill_parent"
android:layout_height="wrap_content" xmlns:android="http://schemas.android.com/apk/res/android">
<Button android:text="Trade"
android:layout_weight="1" android:layout_height="wrap_content"
android:layout_width="0dip" ></Button>
<Button android:text="Set Alert"![enter image description here][2]
android:layout_weight="1" android:layout_height="wrap_content"
android:layout_width="0dip" ></Button>
<Button android:text="Add to watchlist"
android:layout_weight="1" android:layout_height="wrap_content"
android:layout_width="0dip"></Button>
</LinearLayout>

I tried that, and it works for me when I take your above layout and set the android:layout_height to "fill_parent" on the 3 buttons.
(Though this is an interesting issue, not sure why that last button is a bit offset.)

If you want the lines of the button to be no smaller/larger than a specific amount, you could try:
Button b = null;
b.setMaxLines(1);
b.setMinLines(1);
UPDATE:
b.setSingleLine();