Search code examples
androidlayoutandroid-relativelayout

Buttons position change in relative layout

I'm doing my first Android app that is supposed to be a calculator.

I used a Relative layout for the app, placed down the views (that are mainly buttons) and wrote down the code for the operations.

The code compiles but when I run it on the virtual machine all the buttons are overlapped..

That's how the app should be displayed:

enter image description here

And that's how it is on virtual machine:

enter image description here

I tried to watch some tutorials but I cant find the real problem.

I also tried to switch to constraint layout but nothing seems to change.

XML code:

    <?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:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/btn4"
        android:layout_alignLeft="@+id/btn4"
        android:layout_alignTop="@+id/btndiv"
        android:text="7" />

    <Button
        android:id="@+id/btn8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="114dp"
        android:layout_marginLeft="114dp"
        android:layout_marginTop="302dp"
        android:gravity="center"
        android:text="8" />

    <Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="301dp"
        android:layout_marginEnd="114dp"
        android:layout_marginRight="114dp"
        android:text="9" />

    <Button
        android:id="@+id/btndiv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/btnmol"
        android:layout_marginTop="300dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:text="/" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        android:layout_marginLeft="21dp"
        android:layout_marginTop="360dp"
        android:layout_marginBottom="323dp"
        android:text="4" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="115dp"
        android:layout_marginLeft="115dp"
        android:layout_marginTop="359dp"
        android:layout_marginBottom="324dp"
        android:text="5" />

    <Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="359dp"
        android:layout_marginEnd="112dp"
        android:layout_marginRight="112dp"
        android:layout_marginBottom="324dp"
        android:layout_alignLeft="@+id/btn9"
        android:text="6" />

    <Button
        android:id="@+id/btnmol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="357dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:layout_marginBottom="326dp"
        android:text="*" />

    <Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="21dp"
        android:layout_marginLeft="21dp"
        android:layout_marginBottom="270dp"
        android:text="1" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="115dp"
        android:layout_marginLeft="115dp"
        android:layout_marginBottom="270dp"
        android:text="2" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="111dp"
        android:layout_marginRight="111dp"
        android:layout_marginBottom="269dp"
        android:text="3" />

    <Button
        android:id="@+id/btnadd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:layout_marginBottom="267dp"
        android:text="+" />

    <Button
        android:id="@+id/btnclear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="21dp"
        android:layout_marginLeft="21dp"
        android:layout_marginBottom="212dp"
        android:text="clear" />

    <Button
        android:id="@+id/btn0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="116dp"
        android:layout_marginLeft="116dp"
        android:layout_marginBottom="213dp"
        android:text="0" />

    <Button
        android:id="@+id/btneq"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="111dp"
        android:layout_marginRight="111dp"
        android:layout_marginBottom="212dp"
        android:text="=" />

    <Button
        android:id="@+id/btnsub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:layout_marginBottom="212dp"
        android:text="-" />

    <TextView
        android:id="@+id/textinfo"
        android:layout_width="381dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="90dp"
        android:layout_marginEnd="22dp"
        android:layout_marginRight="22dp"
        android:text="TextView" />

    <TextView
        android:id="@+id/textres"
        android:layout_width="380dp"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginTop="46dp"
        android:layout_marginEnd="22dp"
        android:layout_marginRight="22dp"
        android:text="TextView" />
</RelativeLayout>
Solution

  • Modified two rows from the code you posted.

    <Button
        android:id="@+id/btn7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignStart="@+id/btn4"
        android:layout_alignLeft="@+id/btn4"
        android:layout_alignTop="@+id/btndiv"
        android:text="7" />

<Button
        android:id="@+id/btn8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="114dp"
        android:layout_marginLeft="114dp"
        android:layout_marginTop="302dp"
        android:gravity="center"
        android:text="8" />

<Button
        android:id="@+id/btn9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="301dp"
        android:layout_marginEnd="114dp"
        android:layout_marginRight="114dp"
        android:text="9" />

<Button
        android:id="@+id/btndiv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/btnmol"
        android:layout_marginTop="300dp"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:text="/" />

<Button
        android:id="@+id/btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="21dp"
        android:layout_marginLeft="21dp"
        android:layout_below="@+id/btn7"
        android:text="4" />

<Button
        android:id="@+id/btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="115dp"
        android:layout_marginLeft="115dp"
        android:layout_below="@+id/btn7"
        android:text="5" />

<Button
        android:id="@+id/btn6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="112dp"
        android:layout_marginRight="112dp"
        android:layout_alignLeft="@+id/btn9"
        android:layout_below="@+id/btn7"
        android:text="6" />

<Button
        android:id="@+id/btnmol"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginEnd="21dp"
        android:layout_marginRight="21dp"
        android:layout_marginBottom="326dp"
        android:layout_below="@+id/btn7"
        android:text="*" />