Layout displays differently on emulator and android than it should

Layout displays differently on emulator and android than it should - android

The layout is displayed differently in the design and differently in the emulator and on the android. I am new and i cant figure out why is it.
<EditText
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:autofillHints=""
android:ems="10"
android:hint="Your login"
android:inputType="textPersonName"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.099"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="Your password"
android:importantForAutofill="no"
android:inputType="textPassword"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login" />
<EditText
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="16dp"
android:ems="10"
android:hint="Your email"
android:importantForAutofill="no"
android:inputType="textEmailAddress"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password" />
<TextView
android:id="#+id/emailWarrning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="156dp"
android:text="fwef"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toEndOf="#+id/email"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/passwordWarrning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="92dp"
android:text="duap"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/password"
app:layout_constraintTop_toTopOf="parent" />
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="316dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent">
<RadioButton
android:id="#+id/radioButton9"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Female" />
<RadioButton
android:id="#+id/radioButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male" />
<RadioButton
android:id="#+id/radioButton8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Shemale" />
</RadioGroup>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="Set your sex:"
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/radioGroup"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
while learning from youtube, I still face problems with some strange problems, despite the fact that I am doing it step by step as in the tutorial

You see the difference between design view and emulator as screen size is different. RadioGroup is shifting up because of android:layout_marginBottom="316dp".Remove this hard margin and add top constraint for RadioGroup so that its always below textView6 .
<RadioGroup
android:id="#+id/radioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/textView6"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent">
Also adjust textView6 constraints so that its always below email view.
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:text="Set your sex:"
android:textSize="24sp"
app:layout_constraintTop_toBottomOf="#id/email"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
Add some margin between email and textView6 if you wish.
Also remove top margins for emailWarning and passwordWarning and align these views to email and password views by changing constraints as below .
<TextView
android:id="#+id/emailWarrning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fwef"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintStart_toEndOf="#+id/email"
app:layout_constraintTop_toTopOf="#id/email" />
<TextView
android:id="#+id/passwordWarrning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="duap"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/password"
app:layout_constraintTop_toTopOf="#id/password" />

Related

Textviews are not positioned correctly in Android

I want to position text views directly under a seekbar in Android. Unfortunately the shown layout in the emulator does not look correct altough in the layout editor the layout looks correct. You can see this on the screenshots
There are two problems:
The textview on the left of the seekbar is to high altough in the layout editor it is on the same level as the seekbar
The labels for each point of seekbar are all too much on shifted onto the right side.
Here you have the XML-layout code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="#+id/textView50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="50"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView40"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView60"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="60"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView50"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="245dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/textViewS"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RButton"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.016"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.395" />
<ImageButton
android:id="#+id/commentButton"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#null"
android:contentDescription="comment_Button"
android:scaleType="fitCenter"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.83"
app:srcCompat="#mipmap/comment" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/comment"
android:textSize="18dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.025"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.76" />
<Button
android:id="#+id/o_button"
android:layout_width="163dp"
android:layout_height="72dp"
android:background="#drawable/custom_button"
android:text="Button"
android:textAllCaps="false"
android:textColor="#121212"
android:textSize="25sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.87" />
<RadioGroup
android:id="#+id/radioGroup_Size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintVertical_bias="0.4"
app:layout_constraintHorizontal_bias="0.871"
app:layout_constraintTop_toTopOf="parent">
<RadioButton
android:id="#+id/r_Button_Small"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/small"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.322"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginLeft="50dp"
app:layout_constraintVertical_bias="0.584" />
<RadioButton
android:id="#+id/r_Button_Medium"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:checked="true"
android:text="#string/Medium"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.583" />
<RadioButton
android:id="#+id/r_Button_Large"
android:layout_width="95dp"
android:layout_height="35dp"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:background="#drawable/background_selector"
android:text="#string/Large"
android:textColor="#drawable/text_selector"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.962"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.584" />
</RadioGroup>
<Spinner
android:id="#+id/spinner1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="130dp"
android:layout_marginLeft="120dp"
android:layout_marginEnd="70dp"
android:layout_marginRight="80dp"
android:popupBackground="#5fe0f5"
android:textSize="25sp"
app:layout_constraintBottom_toTopOf="#+id/spinner2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.4" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:popupBackground="#5fe0f5"
android:textSize="120sp"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="#id/spinner1"
app:layout_constraintHorizontal_bias="0.59"
app:layout_constraintStart_toStartOf="#id/spinner1"
app:layout_constraintTop_toBottomOf="#+id/radioGroup_Size"
app:layout_constraintVertical_bias="0.44" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="32dp"
android:text="Spinner 1"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/spinner1"
app:layout_constraintHorizontal_bias="0.102"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textViewS" />
<TextView
android:id="#+id/textView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="28dp"
android:layout_marginRight="28dp"
android:text="Spinner 2"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="#+id/spinner2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<SeekBar
android:id="#+id/seekBar"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView9"
app:layout_constraintVertical_bias="0.45" />
<TextView
android:id="#+id/textView30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="57dp"
android:layout_marginLeft="57dp"
android:text="30"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toStartOf="#+id/textView12"
app:layout_constraintHorizontal_bias="0.3"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView40"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="41dp"
android:layout_marginLeft="41dp"
android:text="40"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintStart_toEndOf="#+id/textView30"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
<TextView
android:id="#+id/textView70"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="70"
app:layout_constraintBottom_toTopOf="#+id/o_button"
android:layout_marginStart="42dp"
android:layout_marginLeft="42dp"
app:layout_constraintStart_toEndOf="#+id/textView60"
app:layout_constraintTop_toBottomOf="#+id/seekBar"
app:layout_constraintVertical_bias="0.1" />
</androidx.constraintlayout.widget.ConstraintLayout>
Can you tell me why this problem occurs? For me it is quite strange because in the layout editor everything is being displayed correctly and I do not understand why generally there are sometimes differences between the layouteditor and the layout on an emulator in Android. I'd appreciate every commment and would be thanful for your help.

Hey I see here there are some constraint issues what you have set and what you are trying to achieve :-
In this :-
<SeekBar
android:id="#+id/seekBar"
style="#style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="260dp"
android:layout_height="26dp"
android:layout_marginBottom="60dp"
android:max="4"
android:maxHeight="4dip"
android:minHeight="4dip"
android:progress="2"
app:layout_constraintBottom_toTopOf="#+id/o_button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.89"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/spinner2"
app:layout_constraintVertical_bias="1" />
<TextView
android:id="#+id/textView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Seekbar"
android:textColor="#000000"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/seekBar"
app:layout_constraintHorizontal_bias="0.218"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView9"
app:layout_constraintVertical_bias="0.45" />
You can see you have set your Seekbar textview top and bottom constraints to app:layout_constraintBottom_toTopOf="#+id/textView2" and app:layout_constraintTop_toBottomOf="#+id/textView9" change that to app:layout_constraintTop_toTopOf="#id/seekBar" and app:layout_constraintBottom_toBottomOf="#id/seekBar" This will make your Seekbar textview in center of your actual seekbar.
Now coming to the values section I see that you haven't set your views in your proper aligned manner so it's really hard to find which text view is set where from your xml code. Although I would suggest you take a constraint or linear layout with the same width of your seekbar and below seekbar and then set the text in that layout using constraintWidthPercent(if using constraint layout) according to the max values you have in your seekbar.

Background Image gone compressed when keyboard is open

I am making signup page using this image background.
Background image
It Look like: Signup page
But when I focus on EditText and when keyboard is opened, the background image is compressed. How can I resolve this.
After Compressed :
Here XML code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/log_sign_bg">
</RelativeLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="260dp">
<EditText
android:id="#+id/editText"
style="#android:style/TextAppearance.Material.Medium"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:background="#drawable/edittext_background"
android:hint="Username"
android:inputType="textPersonName"
android:paddingLeft="8dp"
android:textAppearance="#android:style/TextAppearance.Material.Medium"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
style="#android:style/TextAppearance.Material.Medium"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:background="#drawable/edittext_background"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingLeft="8dp"
android:textAppearance="#android:style/TextAppearance.Material.Medium"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText"
app:layout_constraintStart_toStartOf="#+id/editText"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<EditText
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:background="#drawable/edittext_background"
android:hint="Password"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:textAppearance="#android:style/TextAppearance.Material.Medium"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText3"
app:layout_constraintStart_toStartOf="#+id/editText3"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText4"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:background="#drawable/edittext_background"
android:hint="Re-enter Password"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:textAppearance="#android:style/TextAppearance.Material.Medium"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText2"
app:layout_constraintStart_toStartOf="#+id/editText2"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginStart="64dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="64dp"
android:background="#drawable/button_background"
android:text="Register"
android:textAppearance="#android:style/TextAppearance.Material.Large"
android:textColor="#FFF"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:text="Already a member?"
android:textColor="#A6A6A6"
android:textSize="22dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:text="Login"
android:textColor="#EF3646"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
I tried to many ways but i think i have to separate the bakgrounf image and the logo one may be fix it.

Into your AndroidManifest.xml file add below line to your activity
android:windowSoftInputMode="stateVisible|adjustPan"
Like below snippet register in
<activity
android:name=".MainActivity"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.NoActionBar"
android:windowSoftInputMode="stateVisible|adjustPan|adjustResize" />
You mentioned issue in comment section so solution is here,
Run time Set Edittext Hint:
EditText etName;
etName= (EditText) findViewById(R.id.etName);
etName.setHint("Your Hint");

Your xml file is not correct ScrollView can not contain multiple child, i have resolved your problem.So Please follow my answer.
if you want to scroll only view not top image then use this one
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:fillViewport="true"
android:orientation="vertical">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/signup_bg"
>
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:layout_marginTop="260dp"
android:layout_marginEnd="16dp"
android:hint="Username"
android:inputType="textPersonName"
android:paddingLeft="8dp"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:hint="Email"
android:inputType="textEmailAddress"
android:paddingLeft="8dp"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText"
app:layout_constraintStart_toStartOf="#+id/editText"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<EditText
android:id="#+id/editText2"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:hint="Password"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText3"
app:layout_constraintStart_toStartOf="#+id/editText3"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText4"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="16dp"
android:hint="Re-enter Password"
android:inputType="textPassword"
android:paddingLeft="8dp"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/editText2"
app:layout_constraintStart_toStartOf="#+id/editText2"
app:layout_constraintTop_toBottomOf="#+id/editText2" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginStart="64dp"
android:layout_marginTop="48dp"
android:layout_marginEnd="64dp"
android:background="#EF3646"
android:text="Register"
android:textColor="#FFF"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="#+id/editText4"
app:layout_constraintStart_toStartOf="#+id/editText4"
app:layout_constraintTop_toBottomOf="#+id/editText4" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:text="Already a member?"
android:textColor="#A6A6A6"
android:textSize="22dp"
app:layout_constraintEnd_toStartOf="#+id/textView2"
app:layout_constraintStart_toStartOf="#+id/button"
app:layout_constraintTop_toBottomOf="#+id/button" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginTop="24dp"
android:text="Login"
android:textColor="#EF3646"
android:textSize="22dp"
app:layout_constraintEnd_toEndOf="#+id/button"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/button" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

Making an activity resizable

I have this activity with a Constraint Layout:
And here is the XML :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comisionText" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total" />
</androidx.constraintlayout.widget.ConstraintLayout>
The problem is that when i try it on a smaller screen phone, it cuts off some of the objects from the bottom of the activity. How can i make it resizable so it can fit any screen size? Every object is constrained Top-To-Bottom of the object above it.

You can use ScrollView, so the user can scroll down and see the whole activity. Just wrapping your ConstraintLayout in ScrollView should be enough, like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="vertical"
tools:context=".Activity">
<TextView
android:id="#+id/textView4"
android:layout_width="290dp"
android:layout_height="35dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="290dp"
android:layout_height="33dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<SeekBar
android:id="#+id/slider"
style="#style/Widget.AppCompat.SeekBar"
android:layout_width="383dp"
android:layout_height="79dp"
android:layout_marginTop="8dp"
android:hapticFeedbackEnabled="true"
android:indeterminate="false"
android:max="1200"
android:progress="0"
android:scrollbarSize="30dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView"
app:tickMark="#color/colorAccent" />
<TextView
android:id="#+id/textView"
android:layout_width="197dp"
android:layout_height="80dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="50sp"
android:typeface="normal"
app:fontFamily="sans-serif"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView2"
android:layout_width="290dp"
android:layout_height="33dp"
android:layout_marginTop="24dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="20sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/Text"
android:layout_width="231dp"
android:layout_height="67dp"
android:layout_marginTop="4dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="25sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/slider" />
<TextView
android:id="#+id/total"
android:layout_width="270dp"
android:layout_height="94dp"
android:layout_marginTop="8dp"
android:gravity="center_horizontal|center_vertical"
android:textSize="60sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/Text" />
<Button
android:id="#+id/btn"
android:layout_width="142dp"
android:layout_height="45dp"
android:layout_marginBottom="16dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/submitBtn"
app:layout_constraintVertical_bias="0.678" />
<Button
android:id="#+id/submitBtn"
android:layout_width="181dp"
android:layout_height="71dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="4dp"
android:background="#drawable/btn_effect"
android:clickable="false"
android:enabled="false"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.508"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/but" />
<EditText
android:id="#+id/but"
android:layout_width="217dp"
android:layout_height="45dp"
android:layout_marginTop="16dp"
android:clickable="false"
android:ems="10"
android:enabled="false"
android:gravity="center_horizontal"
android:inputType="number"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/total"
android:importantForAutofill="no" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Anyways, you should use wrap_content and match_parent instead of hard-coded sizes. Your layout needs to be flexible and adapt to different screen sizes, and that's not possible if you're using determined sizes in your layout. Please take a look into Android Developer: Support different screen sizes

Android layout not matching with device [Android Studio]

Hi I am new to using android studio and I do not get why the layout that I am seeing in the preview of the IDE does not match with the ones that I am seeing on my screen. I am using Samsung J7 Prime.
This is what I see in the preview
however, this is what I see on my device.
Please help, thank you in advance.
<?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"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="65dp"
android:layout_marginEnd="32dp"
android:text="#string/original_price"
app:layout_constraintBaseline_toBaselineOf="#+id/etNum1"
app:layout_constraintEnd_toStartOf="#+id/etNum1"
app:layout_constraintStart_toStartOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="72dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="60dp"
android:text="#string/rate"
app:layout_constraintEnd_toStartOf="#+id/etNum2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/etNum2" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="65dp"
android:layout_marginEnd="61dp"
android:text="#string/discount"
app:layout_constraintEnd_toStartOf="#+id/etNum3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/etNum3" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="65dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="46dp"
android:text="#string/sales_price"
app:layout_constraintEnd_toStartOf="#+id/etNum4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/etNum4" />
<EditText
android:id="#+id/etNum1"
android:layout_width="0dp"
android:layout_height="39dp"
android:layout_marginTop="101dp"
android:layout_marginEnd="75dp"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/etNum2"
android:layout_width="0dp"
android:layout_height="37dp"
android:layout_marginTop="79dp"
android:layout_marginEnd="72dp"
android:layout_marginBottom="80dp"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum2"
app:layout_constraintBottom_toBottomOf="#+id/etNum3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView2"
app:layout_constraintTop_toTopOf="#+id/textView" />
<EditText
android:id="#+id/etNum3"
android:layout_width="0dp"
android:layout_height="34dp"
android:layout_marginTop="143dp"
android:layout_marginEnd="76dp"
android:layout_marginBottom="143dp"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum3"
app:layout_constraintBottom_toTopOf="#+id/calculate"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView3"
app:layout_constraintTop_toBottomOf="#+id/textView"
android:editable="false"/>
<EditText
android:id="#+id/etNum4"
android:layout_width="0dp"
android:layout_height="39dp"
android:layout_marginTop="47dp"
android:layout_marginEnd="72dp"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4"
app:layout_constraintTop_toBottomOf="#+id/etNum3"
android:editable="false"/>
<Button
android:id="#+id/calculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginBottom="229dp"
android:text="#string/compute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView4" />
<Button
android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="29dp"
android:text="#string/erase"
app:layout_constraintStart_toStartOf="#+id/calculate"
app:layout_constraintTop_toBottomOf="#+id/calculate" />
</android.support.constraint.ConstraintLayout>

You are using a fixed size in a lot of places for your views(for example android:layout_marginTop="79dp" and android:layout_height="37dp").
Because different phones got different screen size, when you are using a fixed size on your view you are making your layout less responsive.
If you want to place some view anywhere at your screen I would recommend using guielines and constraint your views into the guideline rather then give your view a fixed size value to fit the preview(don't forget that with fixed sizes what may fit one screen may not fit another screen).
For your desired layout you can simply use chains.
Here is an example of the layout that you want to achieve using cnostraintLayout and chains:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/original_price"
app:layout_constraintBottom_toTopOf="#+id/textView2"
app:layout_constraintEnd_toStartOf="#+id/etNum1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/rate"
app:layout_constraintBottom_toTopOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/textView3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/discount"
app:layout_constraintBottom_toTopOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/sales_price"
app:layout_constraintBottom_toTopOf="#+id/calculate"
app:layout_constraintEnd_toEndOf="#+id/textView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/textView"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<EditText
android:id="#+id/etNum1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum1"
app:layout_constraintBottom_toBottomOf="#+id/textView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="#+id/textView" />
<EditText
android:id="#+id/etNum2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum2"
app:layout_constraintBottom_toBottomOf="#+id/textView2"
app:layout_constraintEnd_toEndOf="#+id/etNum1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/etNum1"
app:layout_constraintTop_toTopOf="#+id/textView2" />
<EditText
android:id="#+id/etNum3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:editable="false"
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum3"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="#+id/etNum1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/etNum1"
app:layout_constraintTop_toTopOf="#+id/textView3" />
<EditText
android:id="#+id/etNum4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:autofillHints=""
android:editable="false"
android:ems="10"
android:inputType="number"
android:labelFor="#id/etNum4"
app:layout_constraintBottom_toBottomOf="#+id/textView4"
app:layout_constraintEnd_toEndOf="#+id/etNum1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/etNum1"
app:layout_constraintTop_toTopOf="#+id/textView4" />
<Button
android:id="#+id/calculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="compute"
app:layout_constraintBottom_toTopOf="#+id/clear"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="erase"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/calculate"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="#+id/calculate"
app:layout_constraintTop_toBottomOf="#+id/calculate" />
</android.support.constraint.ConstraintLayout>
And it will look like this:

Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:gravity="center">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title 1" />
<EditText
android:id="#+id/etNum1"
android:layout_width="wrap_content"
android:layout_height="39dp"
android:layout_marginStart="20dp"
android:ems="10"
android:hint="Title 1"
android:inputType="number"
android:labelFor="#id/etNum1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title 2" />
<EditText
android:id="#+id/etNum2"
android:layout_width="wrap_content"
android:layout_height="39dp"
android:layout_marginStart="20dp"
android:ems="10"
android:hint="Title 2"
android:inputType="number"
android:labelFor="#id/etNum1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title 3" />
<EditText
android:id="#+id/etNum3"
android:layout_width="wrap_content"
android:layout_height="39dp"
android:layout_marginStart="20dp"
android:ems="10"
android:hint="Title 3"
android:inputType="number"
android:labelFor="#id/etNum1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center">
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title 4" />
<EditText
android:id="#+id/etNum4"
android:layout_width="wrap_content"
android:layout_height="39dp"
android:layout_marginStart="20dp"
android:ems="10"
android:hint="Title 4"
android:inputType="number"
android:labelFor="#id/etNum1" />
</LinearLayout>
<Button
android:id="#+id/calculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:text="Button 1" />
<Button
android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="Button 2" />
</LinearLayout>

Remove all constraints top of and remap them according to what should be on top of for example textView should be on top of textView1 Goodluck

Android Native Preview diffrent with Real preview

I'm doing a homework task.
I already tried with relative or liner, event constraint layout
but preview is always different from the real preview in my phone.
My phone is Xiaomi Redmi Note 5a (55 inch, 1280 x 720 pixel)
My device
Android Studio preview
<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"
tools:context=".Register"
tools:layout_editor_absoluteY="25dp">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:background="#drawable/ic_header" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="27dp"
android:layout_height="30dp"
android:background="#drawable/ic_header_back"
tools:layout_editor_absoluteX="15dp"
tools:layout_editor_absoluteY="15dp" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="20dp"
android:textStyle="bold"
tools:layout_editor_absoluteX="55dp"
tools:layout_editor_absoluteY="16dp" />
<EditText
android:id="#+id/editText3"
android:layout_width="328dp"
android:layout_height="34dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="72dp" />
<EditText
android:id="#+id/editText10"
android:layout_width="330dp"
android:layout_height="34dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
tools:layout_editor_absoluteX="15dp"
tools:layout_editor_absoluteY="395dp" />
full code : https://pastebin.com/U9YdKK1m

You see this layout differently because you are using fixed size on your views, and different phones got different screen size - so using fixed size will make your layout non-responsive to all devices.
If you want to use constraintLayot you can simply use chains to order your views vertically:
<?xml version="1.0" encoding="utf-8"?>
<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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="27dp"
android:layout_height="30dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.571" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="#+id/imageView3"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Username"
android:inputType="textPersonName"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/editText10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView3" />
<EditText
android:id="#+id/editText10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/editText"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText3" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:backgroundTint="#808284"
android:ems="10"
android:hint="Home Address"
android:inputType="text"
android:text=""
android:textColorHint="#808284"
android:textSize="10dp"
android:typeface="normal"
app:layout_constraintBottom_toTopOf="#+id/radioButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText10" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton"
app:layout_constraintBottom_toBottomOf="#+id/radioButton2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/radioButton2"
app:layout_constraintTop_toTopOf="#+id/radioButton2" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="RadioButton"
app:layout_constraintBottom_toTopOf="#+id/guideline4"
app:layout_constraintEnd_toStartOf="#+id/radioButton"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5" />
</androidx.constraintlayout.widget.ConstraintLayout>
It will look like this :

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Layout displays differently on emulator and android than it should - android

Related

Textviews are not positioned correctly in Android

Background Image gone compressed when keyboard is open

Making an activity resizable

Android layout not matching with device [Android Studio]

Android Native Preview diffrent with Real preview

Categories

Resources