Develop Reference

Android: align labels and buttons in multiple lines

I go nuts on that layout. So here's what I'm trying to achieve. A simple layout having a label (TextView) or edit field (EditText) on the left side and a button on the right side. I want all labels and all buttons vertically adjusted - meaning all buttons of the same width and all labels too.
But how to do this? I tried a LinearLayout with vertical orientation and each line as another LinearLayout with horizontal orientation and inside that the label has a layout_weight of 8 and the button is 1. But still this does not guarantee what I want!
This is the current result. You can see that the buttons are not nicely aligned.
This is my layout:
Here's the XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:layout_weight="8"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_weight="1"
android:layout_gravity="right"
/>
</LinearLayout>
</LinearLayout>

Using a RelativeLayout you can achieve the desired layout as:
<?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">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/textView"
android:layout_toLeftOf="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp"/>
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/textView"
android:fontFamily="sans-serif-thin"
android:hint="Scan"
android:textSize="24sp"/>
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button2"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editText"
android:layout_toLeftOf="#+id/button2"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button"
android:fontFamily="sans-serif-thin"
android:hint="Pick Time"
android:textSize="24sp"/>
</RelativeLayout>
The key layout attribute used to match the size is android:layout_alignRight="#+id/textView" on the first EditText referencing the TextView just below.
Result:

According to people's advise, I used the TableLayout. But still the label (EditText) is not using the whole space til the button.
That's the XML:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
<EditText
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="test_test_blabla"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_scan"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="17:35"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_pick_time"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
<TableRow>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:hint="#string/hint_car_location_address"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="left"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/action_gps"
android:textSize="24sp"
android:fontFamily="sans-serif-thin"
android:layout_gravity="right"
/>
</TableRow>
</TableLayout>

Edit:
try RelativeLayout
something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:columnCount="2">
<EditText
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:text="test"/>
<Button
android:id="#android:id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingLeft="28dp"
android:paddingRight="28dp"
android:text="set"
/>
<TextView
android:id="#android:id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#android:id/button1"
android:layout_alignBottom="#android:id/button2"
android:layout_below="#android:id/button1"
android:gravity="center_vertical"
android:text="some test"/>
<Button
android:id="#android:id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#android:id/button1"
android:layout_alignLeft="#android:id/button1"
android:layout_alignRight="#android:id/button1"
android:text="Scan"
/>
</RelativeLayout>

5+ years later...OP is probably an expert in android xml by now. Nevertheless, to help with the question, linear layout is doable. I've added another linear layout to contain all the rows so that the margins can be adjust in this additional layout.
When weight sum is used, the corresponding variable (width / height) has to be 0dp so that it can be adjust accordingly.
<?xml version="1.0" encoding="utf-8"?>
<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:gravity="left"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="9">
<EditText
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:hint="test_test_blabla"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_scan"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="left"
android:orientation="horizontal"
android:weightSum="9">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8"
android:fontFamily="sans-serif-thin"
android:text="17:35"
android:textSize="24sp" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:fontFamily="sans-serif-thin"
android:hint="#string/action_pick_time"
android:textSize="24sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

How to Customize Layout

How to customize FrameLayout, I have to make screen like this:
and i have made this :
So now i want to know, How can i achieve above Layout
How to show icon on top, like in above screen (Path)
How to place text above circles, like in above screen (Dark Text: Remember Life) (Light Text: Instantly ....)
How to place buttons below circles, like in above screen (Register & Login)
Here is my XML, in which i am using FrameLayout, see below:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
</FrameLayout>

Finally, I achieved my target, I used both the Layouts [Relative Layout and Linear Layout] to organize widgets, see complete XML :
circle_layout.xml:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:sidebuffer="3" >
</com.indianic.viewflipperdemo.widget.ViewFlow>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/textView2"
android:layout_centerHorizontal="true"
android:text="Remember Life"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:padding="5dp"
android:text="Instantly search memories of friends, season, birthdays, and more"
android:textAppearance="?android:attr/textAppearanceSmall" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="10dp" >
<Button
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center"
android:layout_weight="1"
android:text="Register"
android:textColor="#000000" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Login"
android:textColor="#000000" />
</LinearLayout>
<com.indianic.viewflipperdemo.widget.CircleFlowIndicator
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearLayout1"
android:layout_centerHorizontal="true"
android:padding="20dp"
app:inactiveType="stroke" />
</RelativeLayout>
And look at this awesome screenshot:

Use RelativeLayout instead FrameLayout. You will be more free with elements positions.
Relative Layout
Something like this you can do it
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.indianic.viewflipperdemo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflow"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:sidebuffer="3" />
<View
android:id="#+id/center"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true" />
<Button
android:id="#+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="#+id/center"
android:padding="10dp"/>
<Button
android:id="#+id/button_login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/center"
android:padding="10dp"/>
<com.indianic.viewflipperdemo.widget.ViewFlow
android:id="#+id/viewflowindic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_register"
android:layout_gravity="bottom|center_horizontal"
android:padding="10dip"
android:layout_marginBottom="10dip"
app:inactiveType="stroke" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/viewflowindic"
android:layout_centerHorizontal="true"
android:text="description"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/description"
android:layout_centerHorizontal="true"
android:text="title"/>
</RelativeLayout>
btw use match_parent instead fill_parent.

Use RelativeLayout to organize views. For implementing view pager indicator try this link
https://github.com/JakeWharton/Android-ViewPagerIndicator
Sample
<?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">
//You can put an image view or text view to show your app name
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Path"
android:id="#+id/title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="74dp"/>
**// Try view pager indicator here.**
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:weightSum="2"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_weight="1"
android:id="#+id/button"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:layout_weight="1"
android:id="#+id/button2"/>
</LinearLayout>
</RelativeLayout>

Put a button to the right and middle of a layout

If I have a layout in xml as follow
<RelativeLayout
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/bFb"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button //This is the button on question
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/linearLayout1"
android:text="Button" />
//there are more stuffs here below the linear layout
</RelativeLayout>
How can I have the button to the right of the linearlayout AND aligned at the middle of linear layout? I don't want the button borders to stretch the whole linear layout, just the middle of the linear layout
Thank you

You can achieve what you want by changing RelativeLayout to LinearLayout and supply a weight for its first child like that
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
Which will produce this
EDIT
You can achieve it with relative layout that way
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical" >
<EditText
android:id="#+id/etUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<EditText
android:id="#+id/etPass"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_toRightOf="#id/linearLayout1" >
<Button
android:id="#+id/bFb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
But it needs some tweeks to produce the exact same thing, in my opinion LinearLayout's weight serve better in your case, so if I were in your shoe I choose the LinearLayout solution and wrap it in a RelativeLayout

Not happy with my Android UI layout

I am having a heck of time trying to get my UI to look the way I want. Here's what I've got ...
I would like the TextView, the XX:XX:XX, text font to be larger and centered between the EditText and Button. Also how come the user gets the phone keyboard instead of a qwerty keyboard to use to enter text?
Here's my layout XML:
<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="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/new_bookmark_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.5"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/new_bookmark_clock"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.3"
android:text="#string/xx_xx_xx" />
<Button
android:id="#+id/btn_add_new_bookmark"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="0.2"
android:text="#string/add"/>
</LinearLayout>
<ListView
android:id="#+id/bookmark_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

Use the following code to achieve what you want:......
<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="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/new_bookmark_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/new_bookmark_clock"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="18dp"
android:layout_weight="1"
android:text="#string/xx_xx_xx" />
<Button
android:id="#+id/btn_add_new_bookmark"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/add"/>
</LinearLayout>
<ListView
android:id="#+id/bookmark_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

please refer this xml all the changes is done tested is also done.
<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="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/new_bookmark_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:ems="10"
android:inputType="number" />
<TextView
android:id="#+id/new_bookmark_clock"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal|center_vertical"
android:textSize="18dp"
android:layout_weight="1"
android:text="hello" />
<Button
android:id="#+id/btn_add_new_bookmark"
style="?android:attr/buttonStyleSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="add"/>
</LinearLayout>
<ListView
android:id="#+id/bookmark_list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>

You can use relative layout to do that. You can change the font size with android:textSize
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText
android:id="#+id/new_bookmark_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/new_bookmark_clock"
android:layout_width="wrap_content"
android:layout_toRightOf="#id/new_bookmark_name"
android:layout_toLeftOf="#+id/btn_add_new_bookmark"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="#string/xx_xx_xx" />
<Button
android:id="#id/btn_add_new_bookmark"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/add"/>
</RelativeLayout>

Replace android:layout_gravity="center" by
android:gravity="center" in your TextView.
and regarding the keyboard layout, it looks like you are trying in the emulator. The emulator shows up 12pad keyboard in portrait mode. You can try in the device.

Please follow below, i have made a sample UI exactly what you have asked for using Relative Layout and by using minimum number of lines. Please have a look and check if can solve the purpose. I have also attached snapshot for the same.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:padding="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<EditText
android:id="#+id/ed_name"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:inputType="number" />
<TextView
android:id="#+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ed_name"
android:text="XX:XX:XX"
android:textSize="18dp" />
<Button
android:id="#+id/btn_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text=" add " />
</RelativeLayout>
</RelativeLayout>
About the keypad :Check it on actual device , the device will open its own default keypad.

Android fix the image size

In my screen I am having 3 buttons and in next row below those buttons I am having 3 names (name corresponding to those buttons) but my problem is that when ever name changes then size of buttons also changes but I do want to fix the size of buttons here is my code please help me
<TableLayout android:background="#drawable/toptab"
android:layout_width="fill_parent" android:id="#+id/tableLayout"
android:layout_height="wrap_content"
android:stretchColumns="1" android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<TableRow>
<ImageButton android:id="#+id/btnPrev" android:background="#drawable/imgPrev"
android:layout_marginLeft="5dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageButton android:id="#+id/btnRefresh"
android:layout_gravity="center" android:background="#drawable/refreshbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageButton android:id="#+id/btnNext"
android:background="#drawable/imgNext"
android:layout_width="5dp"
android:layout_height="20dp"
android:layout_marginRight="5dp" />
</TableRow>
<TableRow >
<TextView android:id="#+id/prev" android:text="Hk" android:layout_marginLeft="5dp" />
<TextView android:id="#+id/refresh" android:text="Refresh" android:layout_gravity="center" />
<TextView android:id="#+id/next" android:text="RS" android:layout_marginRight="5dp" />
</TableRow>
</TableLayout>

If you want to avoid fixing button size, then I would recommend using different layout than TableLayout, maybe RelativeLayout and TextViews with property alignBaseline or LinearLayout with weight properties could do the trick.

You should use linearlayout instead of table layout and use Weight property for aligning buttons and text view in equal dimensions, so here if you write more text in text view , button size will not increase. Also you can add more buttons in same manner. Below is the XML file and screen shot.
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextViewTextTextViewTextTextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="1" android:gravity="center_horizontal">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
</LinearLayout>