ImFireblade
Reputation: 115
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:
And that's how it is on virtual machine:
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>
Upvotes: 0
Views: 1967
Answers (2)
deepThought
Reputation: 699
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="*" />
Upvotes: 2
deepThought
Reputation: 699
Can you try this layout as reference,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="99dp"
android:orientation="vertical" android:layout_weight="0.67">
<TextView
android:id="@+id/txtSolution"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:gravity="right"
android:paddingRight="10sp"
android:paddingTop="5sp"
android:textSize="15pt"
android:textStyle="bold" />
<TextView
android:id="@+id/txtInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.50"
android:gravity="right"
android:paddingRight="10sp"
android:paddingTop="5sp"
android:textSize="15pt"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="75dp"
android:orientation="horizontal" >
<Button
android:id="@+id/btnClear"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="5"
android:textStyle="bold"
android:textSize="40sp"
android:text="Clear" />
<Button
android:id="@+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight=".51"
android:textStyle="bold"
android:textSize="40sp"
android:text="BS" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="75dp"
android:orientation="horizontal" >
<Button
android:id="@+id/btnSeven"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="7" />
<Button
android:id="@+id/btnEight"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="8" />
<Button
android:id="@+id/btnNine"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="9" />
<Button
android:id="@+id/btnDivide"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1.15"
android:textStyle="bold"
android:textSize="40sp"
android:text="/" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="75dp"
android:orientation="horizontal" >
<Button
android:id="@+id/btnFour"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textSize="40sp"
android:textStyle="bold"
android:text="4" />
<Button
android:id="@+id/btnFive"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="5" />
<Button
android:id="@+id/btnSix"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="6" />
<Button
android:id="@+id/btnMultiply"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight=".98"
android:textStyle="bold"
android:textSize="40sp"
android:text="x" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="75dp"
android:orientation="horizontal" >
<Button
android:id="@+id/btnOne"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="1" />
<Button
android:id="@+id/btnTwo"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="2" />
<Button
android:id="@+id/btnThree"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1"
android:textStyle="bold"
android:textSize="40sp"
android:text="3" />
<Button
android:id="@+id/btnSubtract"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1.27"
android:textStyle="bold"
android:textSize="40sp"
android:text="-" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="75dp"
android:orientation="horizontal" >
<Button
android:id="@+id/btnDecimal"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight="1.22"
android:textStyle="bold"
android:textSize="40sp"
android:text="." />
<Button
android:id="@+id/btnZero"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight=".98"
android:textStyle="bold"
android:textSize="40sp"
android:text="0" />
<Button
android:id="@+id/btnEquals"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight=".95"
android:textStyle="bold"
android:textSize="40sp"
android:text="=" />
<Button
android:id="@+id/btnAdd"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:layout_weight=".93"
android:textStyle="bold"
android:textSize="40sp"
android:text="+" />
</LinearLayout>
Upvotes: 2
Related Questions
- Button position in android
- RelativeLayout: button pushes other button off screen
- RelativeLayout different position of items in editor and on device
- Correct placement of the buttons in relative layout?
- Relative layout not putting button in place
- Improper alignment of buttons in RelativeLayout
- android relative layout issue with button
- Placing Buttons Dynamically at specific position in RelativeLayout
- Android: Button Positioning problem with RelativeLayout
- RelativeLayout with buttons