Android Studio - App doesn't cover Emulator

Question

I am new to android studio and I have been creating a few projects, learning different concepts. I am now making my first application and I've noticed that when I launch all my applications on the emulator, the content doesn't completely cover the application. In my XML, the activity is centered in the app, but on the emulator everything's strangely shifted to the left.

I have posted images below to explain what I am talking about. I was wondering if this is normal, or am I doing something wrong. Since I spent a lot of time laying out the XML activity the way I desire, and then it is displayed awful on the emulator.

This is the Login Page, notice how centered and laid out all the views are.

This is the application launched on the emulator. Notice how the content is constrained, and kind of squeezed and pushed to the top left corner.

How do I fix this issue?

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"
android:background="@drawable/barbell_background"
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Login">

<ImageView
    android:id="@+id/AppLogo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="118dp"
    android:layout_marginTop="40dp"
    android:adjustViewBounds="true"
    android:foregroundGravity="center_horizontal"
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitCenter"
    android:src="@drawable/fitness_logo_white"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<LinearLayout
    android:id="@+id/LoginUsernameLayout"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:layout_marginTop="30dp"
    android:minHeight="50dp"
    android:minWidth="300dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/AppLogo">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="40dp"
        android:minWidth="40dp"
        android:src="@drawable/user_icon"
        android:layout_gravity="center_vertical"/>

    <EditText
        android:id="@+id/LoginUsernameInput"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="240dp"
        android:minHeight="50dp"
        android:layout_marginStart="5dp"
        android:hint="Username"
        android:textSize="20sp"/>

</LinearLayout>

<LinearLayout
    android:id="@+id/LoginPasswordLayout"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:layout_marginTop="90dp"
    android:minHeight="50dp"
    android:minWidth="300dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/AppLogo">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="40dp"
        android:minWidth="40dp"
        android:src="@drawable/password_icon"
        android:layout_gravity="center_vertical"/>

    <EditText
        android:id="@+id/LoginPasswordInput"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="240dp"
        android:minHeight="50dp"
        android:layout_marginStart="5dp"
        android:hint="Password"
        android:textSize="20sp"
        android:inputType="textPassword"/>

</LinearLayout>

<Button
    android:id="@+id/SignInButton"
    android:layout_width="297dp"
    android:layout_height="34dp"
    android:layout_marginStart="44dp"
    android:layout_marginTop="25dp"
    android:width="250dp"
    android:height="5dp"
    android:background="@drawable/login_button_design"
    android:gravity="center"
    android:text="@string/sign_in"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/LoginPasswordLayout" />


<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="72dp"
    android:layout_marginTop="20dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/SignInButton">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/don_t_have_an_account"
        android:textSize="16sp" />

    <EditText
        android:id="@+id/SignUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:background="@android:color/transparent"
        android:text="@string/sign_up" />

</LinearLayout>

<Button
    android:id="@+id/DB_Display_Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="92dp"
    android:layout_marginTop="32dp"
    android:width="200dp"
    android:background="@drawable/signup_button_design"
    android:gravity="center"
    android:text="Display Login Database"
    android:textColor="@color/colorPrimaryDark"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout2" />


 </android.support.constraint.ConstraintLayout>

Answer 1

I think you have set all the necessary constraint for all the view. that is why they are getting shifted to the 0,0(top left) location of the screen. Could you post the whole xml code?

    <?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"
android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
tools:context=".Main2Activity">

<ImageView
    android:id="@+id/AppLogo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="118dp"
    android:layout_marginTop="40dp"
    android:adjustViewBounds="true"
    android:foregroundGravity="center_horizontal"
    android:maxHeight="150dp"
    android:maxWidth="150dp"
    android:scaleType="fitCenter"
    android:src="@color/colorPrimary"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_marginLeft="118dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginEnd="8dp" />

<LinearLayout
    android:id="@+id/LoginUsernameLayout"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:layout_marginTop="30dp"
    android:minHeight="50dp"
    android:minWidth="300dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/AppLogo"
    android:layout_marginLeft="40dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginEnd="8dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="40dp"
        android:minWidth="40dp"
        android:src="@drawable/user_icon"
        android:layout_gravity="center_vertical"/>

    <EditText
        android:id="@+id/LoginUsernameInput"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="240dp"
        android:minHeight="50dp"
        android:layout_marginStart="5dp"
        android:hint="Username"
        android:textSize="20sp"/>

</LinearLayout>

<LinearLayout
    android:id="@+id/LoginPasswordLayout"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="40dp"
    android:minHeight="50dp"
    android:minWidth="300dp"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginLeft="40dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginTop="17dp"
    app:layout_constraintTop_toBottomOf="@+id/LoginUsernameLayout"
    android:layout_marginEnd="8dp">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minHeight="40dp"
        android:minWidth="40dp"
        android:src="@drawable/password_icon"
        android:layout_gravity="center_vertical"/>

    <EditText
        android:id="@+id/LoginPasswordInput"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minWidth="240dp"
        android:minHeight="50dp"
        android:layout_marginStart="5dp"
        android:hint="Password"
        android:textSize="20sp"
        android:inputType="textPassword"/>

</LinearLayout>

<Button
    android:id="@+id/SignInButton"
    android:layout_width="297dp"
    android:layout_height="48dp"
    android:layout_marginStart="44dp"
    android:layout_marginTop="26dp"
    android:width="250dp"
    android:height="5dp"
    android:background="@drawable/login_button_design"
    android:gravity="center"
    android:text="@string/sign_in"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/LoginPasswordLayout"
    android:layout_marginLeft="44dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginEnd="8dp"
    app:layout_constraintHorizontal_bias="0.4" />


<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="0dp"
    android:layout_height="59dp"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    android:layout_marginTop="8dp"
    app:layout_constraintTop_toBottomOf="@+id/SignInButton"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.154">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/don_t_have_an_account"
        android:textSize="16sp" />

    <EditText
        android:id="@+id/SignUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:background="@android:color/transparent"
        android:text="@string/sign_up" />

</LinearLayout>

<Button
    android:id="@+id/DB_Display_Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="92dp"
    android:layout_marginTop="32dp"
    android:width="200dp"
    android:background="@drawable/signup_button_design"
    android:gravity="center"
    android:text="Display Login Database"
    android:textColor="@color/colorPrimaryDark"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/linearLayout2"
    android:layout_marginLeft="92dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintHorizontal_bias="0.13"
    app:layout_constraintVertical_bias="0.029"
    android:layout_marginEnd="8dp" />


    </android.support.constraint.ConstraintLayout>

Answer 2

You using hard coded values for margins, it will not work on differente resolutions from the one you created it for. You need to use relative sizes for width/height (wrap_content/match_parent) and use gravity to anchor childs relative to its parent (center, left, right, center_horizontal, center_vertical).

margins are used only to add space between views not for centering.

Once you do all this your same screen will work on different screen sizes.