Why is the layout from design view so different on an actual device?

Question

I am using a Relative Layout and am very confused why the layout is so different: the EditText is so close to the second spinner, the second spinner is a little to the left, not aligned to the one above it, even though they both have the same marginStart; also, the button should be centered horizontally.

I've read that the actual phone screen might differ from the view I see in Android Studio but how does that affect the marginStart which is the same for those two spinners?! Is it something that I do wrong? (I am a beginner in developing with Android Studio). Here is my xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".QuizzesFragment">


    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="225dp"
        android:entries="@array/courses_array" />

    <Spinner
        android:id="@+id/fragquizzes_spn_departments"
        android:layout_width="286dp"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="71dp"
        android:layout_marginTop="123dp"
        android:entries="@array/depts_array" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="-90dp"
        android:layout_marginTop="22dp"
        android:layout_marginEnd="137dp"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="250dp"
        android:layout_height="64dp"
        android:layout_alignBottom="@+id/fragquizzes_spn_courses"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="162dp"
        android:ems="10"
        android:inputType="text"
        android:hint="quiz name"/>

</RelativeLayout>

I would like to have the same view on the phone or at least something similar? These are the screenshots:

![design view] https://i.sstatic.net/51wz6.jpg

![actual device] https://i.sstatic.net/Ku7zF.jpg

Answer 1

Plz try this code. In this code we use spinner height and width not fix, so in all frame it fill fit. we use LinearLayout for set spinner, edittext and button on fix layout. We use android:orientation="vertical" so all field inside this layout show on vertical. Upper spinner margin you set according to your choice. I set margin left and Right in linearlayout so all field automatic adjust according to this layout. I hope its very helpful to design layout according to your. Thanku..

Answer 2

Please try below layout file. Let me know if it is useful or not. If you need any further help regarding your layout feel free to ask.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Spinner
        android:id="@+id/fragquizzes_spn_departments"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="123dp"
        android:layout_marginEnd="70dp"
        android:entries="@array/depts_array" />

    <Spinner
        android:id="@+id/fragquizzes_spn_courses"
        android:layout_width="match_parent"
        android:layout_height="85dp"
        android:layout_below="@+id/fragquizzes_spn_departments"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="70dp"
        android:entries="@array/courses_array" />

    <EditText
        android:id="@+id/fragquizzes_et_quizname"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_above="@+id/fragquizzes_btn_createQuiz"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="70dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="70dp"
        android:layout_marginBottom="30dp"
        android:ems="10"
        android:hint="quiz name"
        android:inputType="text" />

    <Button
        android:id="@+id/fragquizzes_btn_createQuiz"
        android:layout_width="126dp"
        android:layout_height="63dp"
        android:layout_alignBottom="@id/fragquizzes_spn_courses"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="70dp"
        android:text="@string/create_quiz" />

</RelativeLayout>

Answer 3

The reason that your layout is not responsive is that you are using fixed size on your views (android:layout_width="286dp" and android:layout_height="85dp" for example).

Because different phones got different screen sizes if you will use fixed size in dp your layout may look good on one device but won't look good on other devices with different screen size.

"how does that affect the marginStart which is the same for those two spinners" - well again - you use fixed size so it won`t be responsive to all screen sizes.

If you want your layout to be responsive to all screen either don't use fixed size/use fixed size but create 1 layout for every screen size or what I think is the most easy solution - use ConstraintLayout, it is super easy to use, super fast to create your layout and it will be responsive to all screen sizes.

Here is an example using constraintLayout with some guidelines to achieve your desired layout:

<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">

    <Spinner
        android:id="@+id/some"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/editText"
        app:layout_constraintEnd_toEndOf="@+id/spinner2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="@+id/spinner2"
        app:layout_constraintTop_toBottomOf="@+id/spinner2" />

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="395dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/some"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread" />


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/editText"
        tools:text="button" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3"
        app:layout_constraintVertical_chainStyle="spread" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5" />


</androidx.constraintlayout.widget.ConstraintLayout>