Preview Does Not Match with the Emulator - android-layout

Question

I don't know why my Android layout does not match with the emulator. Does anyone have any idea why this might be happening?
Here is the layout code for the action sheet. The section that isn't displaying right is in the last linear layout
This is my activity_login.xml
<?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:background="#fff"
android:orientation="vertical"
tools:context=".LoginActivity">
<ImageView
android:id="#+id/logo_image"
android:layout_width="150dp"
android:layout_height="150dp"
android:src="#drawable/logotitipdonk"
android:transitionName="logo_image" />
<TextView
android:id="#+id/logo_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/bungee"
android:text="Hello there, Welcome Back"
android:textColor="#000"
android:textSize="40sp"
android:transitionName="logo_text" />
<TextView
android:id="#+id/slogan_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sign In to continue"
android:textSize="18sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:orientation="vertical">
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/username"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/password"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="5dp"
android:background="#00000000"
android:elevation="0dp"
android:text="Forget Password?" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#000"
android:text="GO"
android:textColor="#fff" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="5dp"
android:background="#00000000"
android:elevation="0dp"
android:text="New User? SIGN UP"
android:textColor="#000" />
</LinearLayout>
</LinearLayout>
This is my build gradle:
apply plugin: 'com.android.application'
android {
compileSdkVersion 29
buildToolsVersion "29.0.3"
defaultConfig {
applicationId "com.example.titipdonk"
minSdkVersion 26
targetSdkVersion 29
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.13'
androidTestImplementation 'androidx.test.ext:junit:1.1.1'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'com.google.android.material:material:1.1.0'
}
My Android emulator preview:
Edit: In addition to a fix for this specific problem does anyone know why the preview doesn't match the way it actually shows up on the phone?

Answer 1

Following are my suggestions for your code:
Your layout size in android studio preview should match to screen size of AVD.
Do not use absolute height and width for each component such as,
android:layout_width="30dp"
android:layout_height="40dp"
Instead use,
android:layout_width="match_parent/fill_parent/wrap_content"
android:layout_height="match_parent/fill_parent/wrap_content"
When you use absolute height and width such as 300dp or 400dp, components will be shown differently on each screen size and they may go outside of screen also
You can also use padding,margin and gravity for component position.
In your code use the layout_width="match_parent" and then use gravity="center/left/right"