Как я могу улучшить свое расположение Android Android

Question

Итак, я сделал макет андроида, он довольно простой, который состоит из imageView и нескольких editText и TextView. Когда я запускаю свое приложение в реальном устройстве, дизайн выглядит по-другому с тем, что в Android Studio. Я прочитал Supporting Different Screen Sizes и понимаю, что мы настоятельно рекомендуем использовать wrap_content и match_parent.

Моя проблема заключается в том, как улучшить этот макет, поскольку экран выглядел по-другому в других устройствах, используя wrap_content и match_parent. Заранее спасибо.

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

    <android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/Theme.AppCompat" 
     android:background="@color/darkpurple" 
     android:minHeight="?attr/actionBarSize"> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:background="#00aaaaaa" 
     android:layout_gravity="right" 
     android:layout_height="match_parent"> 

     <Button 
      android:text="Save" 
      android:id="@+id/save" 
      android:background="@color/darkpurple" 
      android:layout_width="wrap_content" 
      android:textColor="#fff" 
      android:layout_height="wrap_content" 
      android:textSize="16dp" /> 

    </LinearLayout> 

    </android.support.v7.widget.Toolbar> 

    <ImageView 
     android:background="@color/light_gray" 
     android:layout_width="170dp" 
     android:layout_marginLeft="175dp" 
     android:layout_marginTop="80dp" 
     android:layout_height="170dp" 
     android:textColor="#295186" 
     android:src="@drawable/camera" 
     android:id="@+id/imageView" 
     android:layout_gravity="center_horizontal" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="190dp" 
     android:paddingLeft="20dp" 
     android:textColor="@color/red" 
     android:textStyle="bold" 
     android:id="@+id/Date" 
     android:textSize="20dp" 
     android:text="Date"/> 

    <EditText 
     android:layout_width="200dp" 
     android:id="@+id/date" 
     android:layout_marginTop="230dp" 
     android:layout_height="wrap_content" 
     android:paddingLeft="20dp" 
     android:textColor="@color/deep_sky_blue" 
     android:textSize="20dp" 
     android:hint="Date"/> 

    <View 
     android:layout_width="500dp" 
     android:id="@+id/line" 
     android:layout_height="2dp" 
     android:layout_marginTop="265dp" 
     android:background="#c0c0c0"/> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="280dp" 
     android:paddingLeft="20dp" 
     android:textColor="@color/red" 
     android:textStyle="bold" 
     android:id="@+id/Amount" 
     android:textSize="20dp" 
     android:text="Amount"/> 

    <EditText 
     android:layout_width="200dp" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="310dp" 
     android:paddingLeft="20dp" 
     android:id="@+id/amount" 
     android:textColor="@color/deep_sky_blue" 
     android:textSize="20dp" 
     android:hint="Amount"/> 

    <View 
     android:layout_width="500dp" 
     android:id="@+id/line1" 
     android:layout_height="2dp" 
     android:layout_marginTop="345dp" 
     android:background="#c0c0c0"/> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="370dp" 
     android:paddingLeft="20dp" 
     android:textStyle="bold" 
     android:id="@+id/Comments" 
     android:textSize="20dp" 
     android:text="Comments"/> 

    <EditText 
     android:layout_width="330dp" 
     android:layout_height="140dp" 
     android:layout_marginTop="410dp" 
     android:paddingBottom="45dp" 
     android:layout_marginLeft="15dp" 
     android:paddingLeft="13dp" 
     android:id="@+id/comments" 
     android:textColor="@color/deep_sky_blue" 
     android:textSize="20dp" 
     android:background="@drawable/roundedcorner_edittext" 
     android:hint="Comments"/> 

</RelativeLayout> 

ScreenShot моего устройства. Любая помощь будет принята с благодарностью.

Android Студия Скриншот

Answer 1

Использование layout_below поместить под видом на view.here вы использовали MarginTop разместить все точки зрения (это не правильный путь) это место вид с в отношении Parent layout.it будет разорваться, если высота будет различной.

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

<android.support.v7.widget.Toolbar 
    android:id="@+id/toolbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:theme="@style/Theme.AppCompat" 
    android:background="@color/darkpurple" 
    android:minHeight="?attr/actionBarSize"> 

    <Button 
     android:text="Save" 
     android:id="@+id/save" 
     android:background="@color/darkpurple" 
     android:layout_width="wrap_content" 
     android:layout_gravity="right" 
     android:textColor="#fff" 
     android:layout_height="wrap_content" 
     android:textSize="16dp" /> 

</android.support.v7.widget.Toolbar> 

<ImageView 
    android:layout_height="170dp" 
    android:layout_width="170dp" 
    android:layout_marginTop="15dp" 
    android:background="@color/light_gray" 
    android:layout_below="@+id/toolbar" 
    android:layout_alignParentRight="true" 
    android:textColor="#295186" 
    android:src="@drawable/camera" 
    android:id="@+id/imageView" 
    android:layout_gravity="center_horizontal" /> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="190dp" 
    android:paddingLeft="20dp" 
    android:textColor="@color/red" 
    android:textStyle="bold" 
    android:id="@+id/Date" 
    android:textSize="20dp" 
    android:text="Date"/> 

<EditText 
    android:layout_width="wrap_content" 
    android:id="@+id/date" 
    android:layout_below="@+id/Date" 
    android:layout_height="wrap_content" 
    android:layout_toLeftOf="@+id/imageview" 
    android:paddingLeft="20dp" 
    android:textColor="@color/deep_sky_blue" 
    android:textSize="20dp" 
    android:hint="Date"/> 

<View 
    android:layout_width="500dp" 
    android:id="@+id/line" 
    android:layout_height="2dp" 
    android:layout_below="@+id/date" 
    android:background="#c0c0c0"/> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/line" 
    android:layout_marginTop="10dp" 
    android:paddingLeft="20dp" 
    android:textColor="@color/red" 
    android:textStyle="bold" 
    android:id="@+id/Amount" 
    android:textSize="20dp" 
    android:text="Amount"/> 

<EditText 
    android:layout_width="200dp" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/Amount" 
    android:paddingLeft="20dp" 
    android:id="@+id/amount" 
    android:textColor="@color/deep_sky_blue" 
    android:textSize="20dp" 
    android:hint="Amount"/> 

<View 
    android:layout_width="500dp" 
    android:id="@+id/line1" 
    android:layout_height="2dp" 
    android:layout_below="@+id/amount" 
    android:background="#c0c0c0"/> 

<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/line1" 
    android:layout_marginTop="10dp" 
    android:paddingLeft="20dp" 
    android:textStyle="bold" 
    android:id="@+id/Comments" 
    android:textSize="20dp" 
    android:text="Comments"/> 

<EditText 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_marginBottom="50dp" 
    android:layout_marginRight="50dp" 
    android:layout_below="@+id/Comments" 
    android:paddingBottom="45dp" 
    android:layout_marginLeft="15dp" 
    android:paddingLeft="13dp" 
    android:id="@+id/comments" 
    android:textColor="@color/deep_sky_blue" 
    android:textSize="20dp" 
    android:background="@drawable/roundedcorner_edittext" 
    android:hint="Comments"/> 

Answer 2

Вы использовали

android:layout_marginTop 
android:layout_marginLeft 
android:paddingBottom 
android:paddingLeft 

и т.д. с закодированных значений.

Вот где проблема. Значения, которые вы предоставили, могут хорошо работать на ВАШЕМ устройстве, но не на других, поскольку различные устройства имеют различные разрешения экрана и плотность пикселей.

Например, на экране высокой плотности 190dp может быть слишком маленьким, а на экране с низкой плотностью 190dp может быть слишком много.

Следовательно, вы должны использовать несколько файлов dimens.xml для поддержки различных типов экранов. В этих файлах вы должны указать значения полей и заполнения. Во время выполнения ваше приложение будет выбирать, какие размеры использовать в зависимости от типа экрана.

Answer 3

Проблема находится в теме предварительного просмотра.

Измените ваш Android Studio Предварительный просмотр страницы в дизайнером Тема от NoTitle до NoActionBar, являющегося вашим AppTheme. Выберите AppTheme с выбором темы в предпросмотре дизайнера.

Answer 4

изменить приложение темы для

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
    <item name="windowActionBar">false</item> 
    <item name="windowNoTitle">true</item> 
</style> 

этого будет удалить панель действий по умолчанию. Теперь вы можете добавить свою собственную панель инструментов и установить его в качестве панели действий по

setSupportActionBar(toolbar);