Почему я не вижу правильную сторону моей деятельности на моем телефоне?

Question

Я пытаюсь написать приложение для школьного проекта. Я застрял с дизайном. Я не вижу правильную сторону своей активности на своем телефоне, но она отображается в предварительной версии Android Studio. Возможно, мой код неверен или я чего-то не уважаю.

А вот и 2 скриншота: Android Studio Preview: https://pasteboard.co/I6uT89f.png

Вид телефона: https://pasteboard.co/I6uSgpW.jpg

Вот код:

activity_main.xml

<android.support.design.widget.CoordinatorLayout 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/colorPrimaryDark"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

    </android.support.design.widget.AppBarLayout>

    <include
        android:id="@+id/include"
        layout="@layout/content_main" />

    <com.leinardi.android.speeddial.SpeedDialOverlayLayout
        android:id="@+id/overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:backgroundTint="#131313"/>

        <com.leinardi.android.speeddial.SpeedDialView
            android:id="@+id/speedDial"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            app:sdMainFabClosedSrc="@drawable/ic_menu"
            app:sdOverlayLayout="@id/overlay"/>


</android.support.design.widget.CoordinatorLayout>

content_main.xml

<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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:paddingBottom="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="340dp"
            android:layout_centerInParent="true"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/header2"
                android:scaleType="fitCenter"
                android:layout_marginTop="-20dp"/>

        </RelativeLayout>
        <RelativeLayout
            android:clickable="true"
            android:focusable="true"
            android:id="@+id/plante1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerVertical="true"
            android:background="@drawable/ripple"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="-10dp"
            android:layout_marginBottom="15dp"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/logo_shape">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerVertical="true"
                    android:layout_centerHorizontal="true"/>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:orientation="vertical">

                <fr.visufo.titouan.jardin.UnderlinedTextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="80dp"
                    android:layout_marginTop="0dp"
                    android:gravity="left"
                    android:text="Plante 1"
                    android:textSize="20dp"
                    android:fontFamily="@font/raleway_light"
                    android:textColor="#000000"
                    app:underlineColor="#6DB85C"
                    app:underlineWidth="10px"/>
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_marginLeft="80dp"
                    android:layout_marginTop="30dp"
                    android:textSize="15dp"
                    android:textColor="#000000"
                    android:text="Pensez à rentrer votre plante demain"
                    android:fontFamily="@font/raleway_light"/>
            </RelativeLayout>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="335dp"
                android:layout_marginRight="7dp"
                android:layout_marginTop="-4dp"
                android:background="@drawable/degrees_shape">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:text="0°C"
                    android:gravity="center"
                    android:fontFamily="@font/roboto"
                    android:textSize="18dp"
                    android:textColor="#636363"/>
            </RelativeLayout>
        </RelativeLayout>

        There are 8 similar relative layouts showing quite the same thing, here's 
        only one


    </LinearLayout>


</ScrollView>

Answer 1

@ titouan-pellerin - В отличие от использования div в качестве контейнера для (большинства) вещей, как в веб-дизайне, вам не нужно многократно оборачивать каждое отдельное представление внутри его собственного макета.

Например, если я хотел, чтобы моя деятельность показала по вертикали что-то вроде этого:

(Заголовок)
(немного меньший подтекст)

(Изображение)
(Некоторое описание текст)

(и две кнопки внизу)

.. Я бы не стал оборачивать каждую из этих вещей по отдельности в их собственный макет - я просто создал бы 1 базовый макет (чтобы действовать в качестве основного контейнера), а затем внутри него я бы создал 1 вертикальный макет для содержимого (расположен вертикально) и 1 горизонтальный макет для кнопок внизу (расположены горизонтально).

Конечно, вы также можете установить поля в соответствии с тем, как вы хотите, чтобы все отображалось.

Скорее всего, у вас возникли проблемы из-за сочетания полей добавляются вместе Ове и снова и снова, расширяясь за границы экрана, в сочетании с тем, что телефон, вероятно, отличается плотностью пикселей и разрешением по сравнению с эмулятором.

Шаг 1: Исправьте свой макет, как я описал выше.

Шаг 2: Выберите / настройте эмулятор, который наиболее соответствует вашему устройству в Resolution / PixelDensity.

Надеюсь, это поможет!
Если Вы нашли это хорошим объяснением, пожалуйста, примите это как ответ на свой вопрос.
Спасибо, и счастливого кодирования!