CODEWITHSUNDEEP
androidxmlandroid-layoutlayoutandroid-emulator
user13267
user13267

Reputation: 7193

emulator output different from layout view in android

In the layout view my calculator program looks like this
enter image description here

But when I run my program, it looks like this

enter image description here

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>

Upvotes: 0

Views: 1993

Answers (2)

BigbangRevo
BigbangRevo

Reputation: 340

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>

Upvotes: 1

HalR
HalR

Reputation: 11073

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"

Upvotes: 2

Related Questions