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
Related
In this fragment as soon as try to scroll the contents start overlapping on each other.
This fragment opens immediately after a Splash Screen Activity. when I try to input something in first edit text and then scroll at that time all the things overlap on each other. The overlapping takes place only when I try to scroll. Please Help
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:id="#+id/scrollView_login"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LoginFragment"
android:layout_height="match_parent"
android:layout_width="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/MarginTop"
android:text="#string/app_name"
android:textAlignment="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_launch"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/tagline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="#string/tagline"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView" />
<TextView
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="#string/Candidate_login"
android:textColor="#000000"
android:textSize="18dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tagline" />
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/email"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/login" />
<EditText
android:id="#+id/emailmobile"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="Enter Email"
android:inputType="textEmailAddress"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/email" />
<TextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginTop="24dp"
android:text="#string/pass"
android:textColor="#000000"
android:textSize="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/emailmobile" />
<EditText
android:id="#+id/passedit"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="#color/White"
android:hint="#string/pass"
android:inputType="textPassword"
android:padding="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.504"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/password" />
<Button
android:id="#+id/log_in"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#color/colorPrimaryDark"
android:padding="5dp"
android:text="#string/login"
android:textColor="#color/White"
android:textSize="18dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/passedit" />
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="18dp"
android:text="#string/forget_pass"
android:textColor="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/log_in" />
<LinearLayout
android:id="#+id/sign"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView6">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NoAccount" />
<TextView
android:id="#+id/textViewSignUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:text="#string/signup"
android:textColor="#color/colorPrimaryDark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
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>
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
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 :
I am just new diving into Android app development world and created recently my first calculator app. When I run the app on the simulator, I saw a problem that there is a difference between the layout in the Preview mode and the one in the Simulator mode, as you can see below:
And here is my content_main.xml file:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="com.example.sonduong.calculator.MainActivity">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="of"
android:textSize="24sp"
tools:layout_editor_absoluteX="181dp"
tools:layout_editor_absoluteY="255dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="%"
android:textSize="24sp"
tools:layout_editor_absoluteX="300dp"
tools:layout_editor_absoluteY="207dp" />
<EditText
android:id="#+id/numberTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Number"
android:inputType="numberDecimal"
android:textAlignment="center"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="296dp" />
<TextView
android:id="#+id/totalTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
android:textAlignment="center"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.101" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="What is"
android:textSize="24sp"
tools:layout_editor_absoluteX="152dp"
tools:layout_editor_absoluteY="129dp" />
<EditText
android:id="#+id/percentageTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Percentage"
android:inputType="numberDecimal"
android:textAlignment="center"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="193dp" />
<Button
android:id="#+id/calcBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CALCULATE"
tools:layout_editor_absoluteX="147dp"
tools:layout_editor_absoluteY="374dp" />
</android.support.constraint.ConstraintLayout>
However in this xml file I also got some errors and they look like:
Can anyone help me how can I adjust to have the same view between Preview and Simulator. Thank you!
Adjust According to your needs.
Replace your XML with this XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="of"
android:textSize="24sp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.501"
android:layout_marginBottom="92dp"
app:layout_constraintBottom_toTopOf="#+id/numberTxt" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="%"
android:textSize="24sp"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBaseline_toBaselineOf="#+id/percentageTxt"
android:id="#+id/textView2" />
<EditText
android:id="#+id/numberTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Number"
android:inputType="numberDecimal"
android:textAlignment="center"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.505"
android:layout_marginBottom="0dp"
app:layout_constraintBottom_toTopOf="#+id/calcBtn" />
<TextView
android:id="#+id/totalTextView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="0"
android:textAlignment="center"
android:textSize="36sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginTop="8dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="What is"
android:textSize="24sp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/totalTextView"
app:layout_constraintHorizontal_bias="0.502" />
<EditText
android:id="#+id/percentageTxt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Percentage"
android:inputType="numberDecimal"
android:textAlignment="center"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/textView2"
android:layout_marginRight="8dp"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/textView3"
android:layout_marginTop="8dp"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<Button
android:id="#+id/calcBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CALCULATE"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="9dp"
app:layout_constraintHorizontal_bias="0.502" />
ok , you need to use linear layout with weight to do this ,, try this code ..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:weightSum="7"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" android:text="of"
android:textSize="24sp"
tools:layout_editor_absoluteX="181dp"
tools:layout_editor_absoluteY="255dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" android:text="%"
android:textSize="24sp"
tools:layout_editor_absoluteX="300dp"
tools:layout_editor_absoluteY="207dp" />
<EditText
android:id="#+id/numberTxt"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" android:ems="10"
android:hint="Enter Number"
android:inputType="numberDecimal"
android:textAlignment="center"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="296dp" />
<TextView
android:id="#+id/totalTextView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" android:text="0"
android:textAlignment="center"
android:textSize="36sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.101" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" android:text="What is"
android:textSize="24sp"
tools:layout_editor_absoluteX="152dp"
tools:layout_editor_absoluteY="129dp" />
<EditText
android:id="#+id/percentageTxt"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" android:ems="10"
android:hint="Enter Percentage"
android:inputType="numberDecimal"
android:textAlignment="center"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="193dp" />
<Button
android:id="#+id/calcBtn"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="CALCULATE"
tools:layout_editor_absoluteX="147dp"
tools:layout_editor_absoluteY="374dp" />
</LinearLayout>