In the layout view my calculator program looks like this
But when I run my program, it looks like this
Why is this happening?
This is the layout file code:
<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="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/button_0"
android:onClick="onClkBn0" />
<Button
android:id="#+id/button_dot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button0"
android:text="#string/button_dot"
android:onClick="onClkBnDot"/>
<Button
android:id="#+id/button_res"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button0"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/button_dot"
android:text="#string/button_res"
android:onClick="onClkBnRes"/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_above="#+id/button0"
android:text="#string/button_1"
android:onClick="onClkBn1"/>
<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_toRightOf="#+id/button1"
android:layout_above="#+id/button_dot"
android:text="#string/button_2"
android:onClick="onClkBn2"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button2"
android:layout_toRightOf="#+id/button2"
android:layout_above="#+id/button_res"
android:text="#string/button_3"
android:onClick="onClkBn3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button1"
android:layout_alignLeft="#+id/button1"
android:text="#string/button_4"
android:onClick="onClkBn4"/>
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button4"
android:layout_alignLeft="#+id/button2"
android:text="#string/button_5"
android:onClick="onClkBn5"/>
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button5"
android:layout_alignLeft="#+id/button3"
android:text="#string/button_6"
android:onClick="onClkBn6"/>
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button4"
android:layout_alignLeft="#+id/button4"
android:text="#string/button_7"
android:onClick="onClkBn7"/>
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button7"
android:layout_alignBottom="#+id/button7"
android:layout_toRightOf="#+id/button4"
android:text="#string/button_8"
android:onClick="onClkBn8"/>
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button6"
android:layout_alignLeft="#+id/button6"
android:text="#string/button_9"
android:onClick="onClkBn9"/>
<Button
android:id="#+id/button_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button_res"
android:layout_alignBottom="#+id/button_res"
android:layout_toRightOf="#+id/button_res"
android:text="#string/button_plus"
android:onClick="onClkBnPlus"/>
<Button
android:id="#+id/button_minus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_plus"
android:layout_alignLeft="#+id/button_plus"
android:text="#string/button_minus"
android:onClick="onClkBnMinus"/>
<Button
android:id="#+id/button_mul"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button_minus"
android:layout_below="#+id/button9"
android:text="#string/button_mult"
android:onClick="onClkBnMult"/>
<Button
android:id="#+id/button_div"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button9"
android:layout_alignLeft="#+id/button_mul"
android:text="#string/button_div"
android:onClick="onClkBnDiv"/>
<Button
android:id="#+id/button_can"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/button_div"
android:layout_centerVertical="true"
android:text="#string/button_cancel"
android:onClick="onClkBnCan"/>
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_can"
android:layout_alignParentLeft="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<Button
android:id="#+id/button_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/mantissa"
android:layout_above = "#+id/button9"
android:layout_alignLeft="#+id/button9"
android:layout_toRightOf="#+id/button_can"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
</RelativeLayout>
Your emulator is doing what you ask. This code :
android:layout_centerVertical="true"
puts the "c" button in the middle of the view, vertically. Then your mantissa view sits atop that view because of this:
android:layout_above="#+id/button_can"
Your off button is coerced into stretching from the mantissa view down to button_9 because of these lines:
android:layout_below="#+id/mantissa"
android:layout_above = "#+id/button9"
Here is one solution that should work for you:
<Button
android:id="#+id/button_can"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/button_div"
android:layout_above="#id/button_div"
android:text="#string/button_cancel"
android:onClick="onClkBnCan"/>
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button_can"
android:layout_alignParentLeft="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<Button
android:id="#+id/button_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above = "#id/button9"
android:layout_alignLeft="#id/button9"
android:layout_toRightOf="#id/button_can"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
Also, you should only use the + in strings like "#+id/button9" on the first use of that label. Subsequent references for it would be "#id/button9"
I think you should better use a couple of LinearLayout to get the aspect you want.
Thanks to android:layout_weight you will be able to have the same layout aspect on several screen sizes and density.
Here is a code example showing what you want, the way you want on several screen sizes/devices density:
<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="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="#+id/mantissa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:gravity="right"
android:text="#string/mantissa_default"
android:textIsSelectable="true"
android:textSize="30.0sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_below="#+id/mantissa"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25" />
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25" />
<Button
android:id="#+id/button_off"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnOff"
android:text="#string/button_off" />
<Button
android:id="#+id/button_can"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnCan"
android:text="#string/button_cancel" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn7"
android:text="#string/button_7" />
<Button
android:id="#+id/button8"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn8"
android:text="#string/button_8" />
<Button
android:id="#+id/button9"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn9"
android:text="#string/button_9" />
<Button
android:id="#+id/button_div"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnDiv"
android:text="#string/button_div" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn4"
android:text="#string/button_4" />
<Button
android:id="#+id/button5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn5"
android:text="#string/button_5" />
<Button
android:id="#+id/button6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn6"
android:text="#string/button_6" />
<Button
android:id="#+id/button_mul"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnMult"
android:text="#string/button_mult" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_above="#+id/button0"
android:layout_weight="0.25"
android:onClick="onClkBn1"
android:text="#string/button_1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_above="#+id/button_dot"
android:layout_weight="0.25"
android:onClick="onClkBn2"
android:text="#string/button_2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn3"
android:text="#string/button_3" />
<Button
android:id="#+id/button_minus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnMinus"
android:text="#string/button_minus" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25"
android:orientation="horizontal" >
<Button
android:id="#+id/button0"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBn0"
android:text="#string/button_0"/>
<Button
android:id="#+id/button_dot"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnDot"
android:text="#string/button_dot" />
<Button
android:id="#+id/button_res"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnRes"
android:text="#string/button_res"/>
<Button
android:id="#+id/button_plus"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:onClick="onClkBnPlus"
android:text="#string/button_plus" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Related
I have the xml design code of android. I want the design a bit different. Following is the relative layout what I have tried:
<?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-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="sg.unitconverter.UnitFuel"
tools:showIn="#layout/activity_unit_fuel">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner1"
android:layout_below="#+id/item1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:entries="#array/area"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/item2"
android:layout_below="#+id/spinner1"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/spinner2"
android:layout_below="#+id/item2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:entries="#array/area"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/clear"
android:id="#+id/clear"
android:layout_below="#+id/spinner2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/backspace"
android:id="#+id/backSpace"
android:layout_below="#+id/spinner2"
android:layout_toRightOf="#+id/clear"
android:layout_toEndOf="#+id/clear"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/num7"
android:layout_below="#+id/clear"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/num8"
android:layout_alignBottom="#+id/num7"
android:layout_alignLeft="#+id/backSpace"
android:layout_alignStart="#+id/backSpace"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/num9"
android:layout_alignBottom="#+id/num8"
android:layout_toRightOf="#+id/num8"
android:layout_toEndOf="#+id/num8"
android:onClick="onClick"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:id="#+id/num4"
android:layout_below="#+id/num7"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:nestedScrollingEnabled="true"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/num5"
android:layout_alignBottom="#+id/num4"
android:layout_alignLeft="#+id/num8"
android:layout_alignStart="#+id/num8"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/num6"
android:layout_alignBottom="#+id/num5"
android:layout_toRightOf="#+id/num5"
android:layout_toEndOf="#+id/num5"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/num1"
android:layout_below="#+id/num4"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/num2"
android:layout_alignBottom="#+id/num1"
android:layout_alignLeft="#+id/num5"
android:layout_alignStart="#+id/num5"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/num3"
android:layout_alignBottom="#+id/num2"
android:layout_toRightOf="#+id/num2"
android:layout_toEndOf="#+id/num2"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/num0"
android:layout_below="#+id/num2"
android:layout_alignLeft="#+id/num2"
android:layout_alignStart="#+id/num2"
android:onClick="onClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:id="#+id/dot"
android:textSize="20dp"
android:onClick="onClick"
android:layout_alignTop="#+id/num0"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="="
android:id="#+id/equal"
android:onClick="onClick"
android:layout_alignTop="#+id/num0"
android:layout_alignLeft="#+id/num3"
android:layout_alignStart="#+id/num3" />
</RelativeLayout>
The output of above xml shows like the following:
But I want the design to be like the following:
Can anyone please help on this to do atleast something so that it would be great?
You're going to want to look at Google's Material design documentation.
https://material.io/guidelines/
For the Buttons:
https://material.io/guidelines/components/buttons.html
here you go.. this is just basic layout.. you need to color and custom it by your self
<?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="100dp"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginTop="10dp"
android:text="From"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="match_parent">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="horizontal">
<TextView
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="top"
android:layout_marginTop="10dp"
android:text="To"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"/>
<Spinner
android:layout_width="wrap_content"
android:layout_height="match_parent">
</Spinner>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="1"
style="?attr/borderlessButtonStyle" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Ok i successfully created a custom alert and when i ran it the format is the same as in xml but after re-running it for the nth time suddenly the buttons overlap and I dont know how to fix it so can you pls help me out on this?.
alert.xml(output should be):
wrong output:
xml code:
<?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:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toRightOf="#+id/b4"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
<Button
android:id="#+id/b4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b2"
android:text="4" />
<Button
android:id="#+id/b5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b2"
android:layout_toLeftOf="#+id/b3"
android:text="5" />
<Button
android:id="#+id/b6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/b5"
android:layout_alignBottom="#+id/b5"
android:layout_alignLeft="#+id/b3"
android:text="6" />
<Button
android:id="#+id/b7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toLeftOf="#+id/b5"
android:text="7" />
<Button
android:id="#+id/b8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b4"
android:layout_toRightOf="#+id/b4"
android:text="8" />
<Button
android:id="#+id/b9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/b6"
android:layout_below="#+id/b6"
android:text="9" />
<Button
android:id="#+id/b0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/b8"
android:layout_toLeftOf="#+id/b9"
android:text="0" />
<Button
android:id="#+id/addCart"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignParentLeft="true"
android:layout_below="#+id/b7"
android:layout_toLeftOf="#+id/b0"
android:text="ADD" />
<Button
android:id="#+id/cancel"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/b0"
android:layout_alignRight="#+id/b9"
android:layout_below="#+id/b9"
android:layout_toRightOf="#+id/b0"
android:text="BACK" />
</RelativeLayout>
Use LinearLayout instead of RelativeLayout. And remove these in Buttons:
android:layout_alignParentLeft="true"
after that it should be fine.
EDIT: Not just left alignment directives, but all alignment directives.
i would suggest you to use TableLayout ... very easy to understand and fits what you want perfectly and its easy to reuse or modify later ... your code ...
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<EditText
android:id="#+id/orderQuantity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="1" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="2" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="3" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="4" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="5" />
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="6" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="7"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="8"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="9" />
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Add"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="0"/>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="OK"/>
</TableRow>
</TableLayout>
Organize each row as below...
<Button
android:id="#+id/b1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_alignParentLeft="true"
android:text="1" />
<Button
android:id="#+id/b2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/orderQuantity"
android:layout_toLeftOf="#+id/b3"
android:layout_toRightOf="#+id/b1"
android:text="2" />
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_toRightOf="#+id/b2"
android:layout_centerHorizontal="true"
android:text="3" />
Ok after analyzing i was able to see whats wrong.
This
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:layout_centerHorizontal="true"
android:text="3" />
Should be :
<Button
android:id="#+id/b3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/b4"
android:text="3" />
I would do something like this:
<?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="wrap_content"
android:orientation="vertical"
android:background="#595959">
<EditText
android:id="#+id/orderQuantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignRight="#+id/b3"
android:background="#FFFFFF"
android:ems="10"
android:inputType="number"/>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b1"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="1"/>
<Button
android:id="#+id/b2"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="2"/>
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="3"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b4"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="4"/>
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="5"/>
<Button
android:id="#+id/b6"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="6"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="7"/>
<Button
android:id="#+id/b8"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="8"/>
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="9"/>
</LinearLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<Button
android:id="#+id/b0"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="0"/>
<Button
android:id="#+id/addCart"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="ADD"/>
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_weight=".3333"
android:layout_height="match_parent"
android:text="BACK"/>
</LinearLayout>
</LinearLayout>
I'm testing Android Studio and I'm trying to write a simple calculator just to test it andl learn Android.
What I'd like to achieve is something like this:
and I'd like to have this behavior with every device, either portrait or landscape.
What I've though is to make everything relative to the string "Result is 0:", so something like this:
<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="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context="org.mennini.mycalc.MainActivity$PlaceholderFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Sum is: 0"
android:id="#+id/textView"
android:onClick="onButtonClick"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
android:id="#+id/button"
android:layout_marginTop="40dp"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/button2"
android:layout_alignTop="#+id/button"
android:layout_toLeftOf="#+id/button"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/button3"
android:layout_alignTop="#+id/button"
android:layout_toRightOf="#+id/button"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/button4"
android:layout_below="#+id/button"
android:layout_toRightOf="#+id/button2"
android:layout_marginTop="19dp"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
android:id="#+id/button5"
android:layout_alignTop="#+id/button4"
android:layout_toLeftOf="#+id/button4"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
android:id="#+id/button6"
android:layout_alignTop="#+id/button4"
android:layout_toRightOf="#+id/button4"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:id="#+id/button7"
android:layout_below="#+id/button4"
android:layout_toRightOf="#+id/button5"
android:layout_marginTop="19dp"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
android:id="#+id/button8"
android:layout_alignTop="#+id/button7"
android:layout_toLeftOf="#+id/button7"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/button9"
android:layout_alignTop="#+id/button7"
android:layout_toRightOf="#+id/button7"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:id="#+id/button10"
android:layout_below="#+id/button7"
android:layout_alignLeft="#+id/button8"
android:layout_alignStart="#+id/button8"
android:layout_marginTop="19dp"
android:layout_toLeftOf="#+id/button9"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="."
android:id="#+id/button11"
android:layout_alignTop="#+id/button10"
android:layout_toRightOf="#+id/button10"
android:onClick="onButtonClick" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:id="#+id/button12"
android:layout_below="#+id/button10"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:onClick="onButtonClick" />
With an off number of columns is easy, but how can I deal with an even number, such in the example?
More, with Android Studio I've tried to use Table Layout and Grid Layout, but I haven't understood how to set a grid with specific number of rows and cols, i.e. a 5 rows x 4 columns grid, i.e. I can drag a GridLayout and set the number of rows and columns, but as I drag over it some controls, say a Button, I see underneath a green grid with a lot more cells than expected, so my intention to draw button on my 5x4 grid and have the grid itself horizontally centered gets frustrated.
Finally (thanks for reading up to here) the question: how can I deal with this situation? Is my idea of using all buttons relative to textview good or stupid?
Is my idea of using a GridLayout a good or stupid idea?
In which smart way can I deal with this problem????
Thanks a lot
you can use linearLayout and give needed weight.
here is my code which I gave 1/5=0.2 weight for each row and 1/4=0.25 for each column.
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
>
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:onClick="onButtonClick"
android:text="Sum is: 0"
android:textAppearance="?android:attr/textAppearanceLarge"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="32dp"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="horizontal">
<Button
android:id="#+id/button14"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="+" />
<Button
android:id="#+id/button15"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="-" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="7" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="8" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="4" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:text="2" />
</LinearLayout>
<Button
android:id="#+id/button17"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="0" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:orientation="vertical">
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="*" />
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="9" />
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="6" />
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="3" />
<Button
android:id="#+id/button10"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="." />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25"
android:orientation="vertical">
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.2"
android:text="/" />
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:text="Enter"
android:textSize="12sp"/>
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Have you ever thought about using TableLayout?
you can thought about Linear Layout with vertical orientation for first three columns (each row added to individual linear layout with Horizontal orientation, which means that you need for four linear layouts, then all added to first layout which Linear Layout with vertical orientation), then add the first Linear layout and the last column (which added first to another vertical layout) to another linear layout with Horizontal orientation!
Here also you can find good example:
http://mrbool.com/how-to-create-a-calculator-app-for-android/28100
Also here full xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/plus"
android:text="+"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/min"
android:text="-"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/mul"
android:text="*"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/seven"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/eight"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/nine"
android:text="9"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/four"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/five"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/six"
android:text="6"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/one"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/two"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/three"
android:text="3"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/one"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/two"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/three"
android:text="3"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/zero"
android:layout_weight="2"
android:text="0"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/dot"
android:text="."
/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/slash"
android:text="/"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "#+id/enter"
android:layout_weight="2"
android:text="Enter"
/>
</LinearLayout>
</LinearLayout>
regards #Sandman42,
<LinearLayout 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" android:orientation="vertical" android:paddingBottom="#dimen/activity_vertical_margin" android:paddingLeft="#dimen/activity_horizontal_margin" android:paddingRight="#dimen/activity_horizontal_margin" android:paddingTop="#dimen/activity_vertical_margin" tools:context=".Home" android:background="#fff" > <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="#string/disp" android:id = "#+id/display" android:hint="#string/dispHint" /> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/seven" android:text="#string/seven" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/eight" android:text="#string/eight" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/nine" android:text="#string/nine" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/div" android:text="#string/div" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/four" android:text="#string/four" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/five" android:text="#string/five" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/six" android:text="#string/six" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/mul" android:text="#string/mul" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/one" android:text="#string/one" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/two" android:text="#string/two" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/three" android:text="#string/three" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/sub" android:text="#string/sub" /> </LinearLayout> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:gravity="center" android:paddingTop="20dp"> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/cancel" android:text="#string/cancel" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/zero" android:text="#string/zero" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/equal" android:text="#string/equal" /> <Button android:layout_width="55dp" android:layout_height="wrap_content" android:id = "#+id/add" android:text="#string/add" /> </LinearLayout> </LinearLayout>
How do I get buttons to lay on the screen most optimally distributed and centered on the screen as follows:
The nearest I am able to get is this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal"
>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Button5"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button6"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button7"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button8"
android:layout_weight="1"/>
</LinearLayout>
Use a relativeLayout for the 3 linearLayouts.
To place the 3 linears below eachother use:
android:layout_below="#+id/linearLayout1"
and
android:layout_below="#+id/linearLayout2"
To center the linears use:
android:layout_centerInParent="true"
android:layout_gravity="center_vertical"
That will give you something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_below="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button5" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button6" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button7" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout3"
android:layout_below="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center_vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button8" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button4" />
</LinearLayout>
Unfortunately it is not showing the last line which is </RelativeLayout>
Below is the layout I designed.
Here is my code:
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/login_button_3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_4" />
<Button
android:id="#+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_5" />
<Button
android:id="#+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_7" />
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_8" />
<Button
android:id="#+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_clear" />
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/login_button_disable" />
</LinearLayout>
The problem is that I want to stretch the bottom two buttons, "Change" and "Back", to match the width of the buttons above.
You can use weight on both of them, like this:
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />
You probably want something like the code below.
I used a hard coded button width, but you probably want to put this in dimen.xml and reference it. I centered everything with gravity.
I tried this with weights as well, but the re-sizing is funny. As your screen gets wider the buttons get two wide.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/digitRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="100dp"
android:layout_height="match_parent"
android:text="3" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="4" />
<Button
android:id="#+id/button5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="5" />
<Button
android:id="#+id/button6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="6" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/button7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="7" />
<Button
android:id="#+id/button8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="8" />
<Button
android:id="#+id/button9"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="9" />
</LinearLayout>
<LinearLayout
android:id="#+id/digitRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/buttonClear"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Clear" />
<Button
android:id="#+id/button0"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="0" />
<Button
android:id="#+id/buttonBack"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Back" />
</LinearLayout>
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp"
android:gravity="center_horizontal"
>
<Button
android:id="#+id/buttonChange"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Change" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Disable" />
</LinearLayout>
Try to use weight like below. Also use margins to tweak the positions of the buttons.
<LinearLayout
android:id="#+id/buttonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal"
android:padding="5dp" >
<Button
android:id="#+id/buttonChange"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_dhange" />
<Button
android:id="#+id/buttonDisable"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.0"
android:text="#string/login_button_disable" />