the widgets dose not appear as i arranged it in android studio

When i was trying to make calculator program the buttons appeared like that when i ran the emulator the appearance of widgets and when i rearrange the button 7 the widgets disappear the widgets disappeared
the design.

The activity_main.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<Button
android:id="@+id/button17"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button14"
android:layout_alignTop="@+id/button11"
android:text="*" />

<Button
android:id="@+id/button16"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignTop="@+id/button3"
android:layout_marginEnd="48dp"
android:text="/" />

<Button
android:id="@+id/button15"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button16"
android:layout_alignTop="@+id/button5"
android:text="-" />

<Button
android:id="@+id/button14"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button15"
android:layout_alignTop="@+id/button"
android:text="+" />

<Button
android:id="@+id/button13"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button3"
android:layout_alignTop="@+id/button11"
android:text="7" />

<Button
android:id="@+id/button12"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button2"
android:layout_alignTop="@+id/button13"
android:text="9" />

<Button
android:id="@+id/button11"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button4"
android:layout_alignTop="@+id/button12"
android:text="8" />

<Button
android:id="@+id/button9"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button2"
android:layout_alignTop="@+id/button3"
android:text="6" />

<Button
android:id="@+id/button10"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button4"
android:layout_alignTop="@+id/button3"
android:text="5" />

<Button
android:id="@+id/button5"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button2"
android:layout_alignTop="@+id/button6"
android:text="3" />

<Button
android:id="@+id/button6"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="@+id/button4"
android:layout_marginBottom="136dp"
android:text="2" />

<Button
android:id="@+id/button2"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignTop="@+id/button"
android:layout_marginEnd="130dp"
android:text="." />

<Button
android:id="@+id/button3"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="@+id/button7"
android:layout_marginBottom="204dp"
android:text="4" />

<Button
android:id="@+id/button7"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/button5"
android:layout_marginStart="42dp"
android:text="1" />

<Button
android:id="@+id/button4"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignTop="@+id/button"
android:layout_marginStart="132dp"
android:text="0" />

<Button
android:id="@+id/button"
android:layout_width="73dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="60dp"
android:layout_marginStart="26dp"
android:text="clear" />

<TextView
android:id="@+id/textView"
android:layout_width="197dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="79dp"
android:layout_marginTop="134dp"
android:text="TextView" />

<TextView
android:id="@+id/textView2"
android:layout_width="194dp"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/textView"
android:layout_alignParentTop="true"
android:layout_marginTop="70dp"
android:text="TextView" />
</RelativeLayout>


The MainActivity java code:

package com.example.amr.calc;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity

@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);




3 Answers
3

You might want to give ConstraintLayout a go. The initial learning curve can be a little steep but it's worth it once you get it, you can build pretty much any layout with it.

I built the layout below for my own calculator app a while back.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">

<TextView
android:padding="8dp"
android:id="@+id/textViewInputOutput"
android:layout_width="0dp"
android:layout_height="150dp"
android:ems="10"
android:gravity="end"
android:textSize="38sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/textViewOne"
style="@style/NumberText"
android:layout_marginTop="8dp"
android:text="1"
app:layout_constraintBottom_toTopOf="@+id/textViewFour"
app:layout_constraintEnd_toStartOf="@+id/textViewTwo"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewClear" />

<TextView
android:id="@+id/textViewTwo"
style="@style/NumberText"
android:layout_marginTop="8dp"
android:text="2"
app:layout_constraintBottom_toTopOf="@+id/textViewFive"
app:layout_constraintEnd_toStartOf="@+id/textViewThree"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewOne"
app:layout_constraintTop_toBottomOf="@+id/textViewClear" />

<TextView
android:id="@+id/textViewThree"
style="@style/NumberText"
android:layout_marginTop="8dp"
android:text="3"
app:layout_constraintBottom_toTopOf="@+id/textViewSix"
app:layout_constraintEnd_toStartOf="@+id/textViewDelete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewTwo"
app:layout_constraintTop_toBottomOf="@+id/textViewClear" />

<TextView
android:id="@+id/textViewDelete"
style="@style/NumberText"
android:layout_marginEnd="8dp"
android:text="DEL"
app:layout_constraintBottom_toBottomOf="@+id/textViewClear"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/textViewClear" />

<TextView
android:textSize="@dimen/operator_text"
android:id="@+id/textViewDivide"
style="@style/NumberText"
android:text="÷"
app:layout_constraintBottom_toTopOf="@+id/textViewAdd"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/textViewDelete"
app:layout_constraintTop_toBottomOf="@+id/textViewDelete" />

<TextView
android:textSize="@dimen/operator_text"
android:id="@+id/textViewAdd"
style="@style/NumberText"
android:text="+"
app:layout_constraintBottom_toTopOf="@+id/textViewSubtract"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/textViewDelete"
app:layout_constraintTop_toBottomOf="@+id/textViewDivide" />

<TextView
android:textSize="@dimen/operator_text"
android:id="@+id/textViewSubtract"
style="@style/NumberText"
android:text="−"
app:layout_constraintBottom_toTopOf="@+id/textViewMultiply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/textViewDelete"
app:layout_constraintTop_toBottomOf="@+id/textViewAdd" />

<TextView
android:textSize="@dimen/operator_text"
android:id="@+id/textViewMultiply"
style="@style/NumberText"
android:text="×"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="@+id/textViewSubtract"
app:layout_constraintTop_toBottomOf="@+id/textViewSubtract" />

<TextView
android:id="@+id/textViewFour"
style="@style/NumberText"
android:text="4"
app:layout_constraintBottom_toTopOf="@+id/textViewSeven"
app:layout_constraintEnd_toStartOf="@+id/textViewFive"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewOne" />

<TextView
android:id="@+id/textViewFive"
style="@style/NumberText"
android:text="5"
app:layout_constraintBottom_toTopOf="@+id/textViewEight"
app:layout_constraintEnd_toStartOf="@+id/textViewSix"
app:layout_constraintStart_toEndOf="@+id/textViewFour"
app:layout_constraintTop_toBottomOf="@+id/textViewTwo" />

<TextView
android:id="@+id/textViewSix"
style="@style/NumberText"
android:text="6"
app:layout_constraintBottom_toTopOf="@+id/textViewNine"
app:layout_constraintEnd_toStartOf="@+id/textViewDelete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewFive"
app:layout_constraintTop_toBottomOf="@+id/textViewThree" />

<TextView
android:id="@+id/textViewSeven"
style="@style/NumberText"
android:text="7"
app:layout_constraintBottom_toTopOf="@+id/textViewDecimal"
app:layout_constraintEnd_toStartOf="@+id/textViewEight"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewFour" />

<TextView
android:id="@+id/textViewEight"
style="@style/NumberText"
android:text="8"
app:layout_constraintBottom_toTopOf="@+id/textViewZero"
app:layout_constraintEnd_toStartOf="@+id/textViewNine"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewSeven"
app:layout_constraintTop_toBottomOf="@+id/textViewFive" />

<TextView
android:id="@+id/textViewNine"
style="@style/NumberText"
android:text="9"
app:layout_constraintBottom_toTopOf="@+id/textViewEquals"
app:layout_constraintEnd_toStartOf="@+id/textViewDelete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewEight"
app:layout_constraintTop_toBottomOf="@+id/textViewSix" />

<TextView
android:id="@+id/textViewDecimal"
style="@style/NumberText"
android:text="."
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textViewZero"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewSeven" />

<TextView
android:id="@+id/textViewZero"
style="@style/NumberText"
android:text="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textViewEquals"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewDecimal"
app:layout_constraintTop_toBottomOf="@+id/textViewEight" />

<TextView
android:id="@+id/textViewEquals"
style="@style/NumberText"
android:text="="
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/textViewDelete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewZero"
app:layout_constraintTop_toBottomOf="@+id/textViewNine" />

<TextView
android:id="@+id/textViewClear"
style="@style/NumberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Clear"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewInputOutput" />

<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="0dp"
android:layout_height="1dp"
android:background="@color/colorAccent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textViewInputOutput">

</FrameLayout>

<TextView
android:id="@+id/textViewOpen"
style="@style/NumberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="("
app:layout_constraintBottom_toBottomOf="@+id/textViewClear"
app:layout_constraintEnd_toStartOf="@+id/textViewClose"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewClear"
app:layout_constraintTop_toTopOf="@+id/textViewClear" />

<TextView
android:id="@+id/textViewClose"
style="@style/NumberText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=")"
app:layout_constraintBottom_toBottomOf="@+id/textViewOpen"
app:layout_constraintEnd_toStartOf="@+id/textViewDelete"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/textViewOpen"
app:layout_constraintTop_toTopOf="@+id/textViewOpen" />
</android.support.constraint.ConstraintLayout>


You are using RelativeLayout which arranges views relative to each other, thus when you rearrange the button7 all the other widgets relative to button7 changes and so on. For that you have to make sure that any change in particular widget position does not affect the other. Apart form this (a simple approach) you can use LinearLayout or GridLayout for buttons in order to achieve the desired format.

RelativeLayout

LinearLayout

GridLayout

this kind of designing xml like that you do is not good and that is prefer to use linearLayout or do better but i found your problem
the problem is because of this line

android:layout_alignTop="@+id/button11"


int the button 7 change the button 7 code to

<Button
android:id="@+id/button13"
android:layout_width="47dp"
android:layout_height="wrap_content"
android:layout_alignStart="@+id/button3"
android:layout_above="@+id/button3"
android:text="7" />


this will fix your problem

actually you put button 8 in the right of button 7 and then you put button 7 on top of button 8 your problem is something like this

i hope it help you (;

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy