Разработка Android пользовательского интерфейса приложения для вкладок и мобильных устройств

Question

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

[![<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_margin="35dp"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/lblLogo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:autoSizeTextType="uniform"
        android:gravity="center"
        android:padding="15dp"
        android:text="My App Name"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="32sp" />


    <!-- Email Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>


    <!-- Password Label -->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilLoginPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/etLoginPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Password"
            android:inputType="textPassword" />

    </com.google.android.material.textfield.TextInputLayout>


    <com.google.android.material.button.MaterialButton
        android:id="@+id/btnLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:padding="12dp"
        android:text="@string/btnLogin" />
</LinearLayout>

]

Так выглядит приведенный выше код на мобильном телефоне (например, Nexus 6)

**This is how the above code looks like on tablet (i.e Nexus 10) введите описание изображения здесь

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

Заранее спасибо ......

Answer 1

Вместо дублирования макета попробуйте:

• избегать жесткого кодирования размера в макете.
• использовать ConstraintLayout
• использовать разные квалификаторы

Например, поле в вашем root представлении:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/login_layout_margin"
    android:layout_marginEnd="@dimen/login_layout_margin"
    android:layout_gravity="center"
    android:orientation="vertical">
    
           <TextView
            android:id="@+id/lblLogo"
            ..>
    
</LinearLayout>

Затем создайте другое измерение в другой папке:

res/values/dimens.xml:

<dimen name="login_layout_margin">35dp</dimen>

res/values-sw600dp/dimens.xml:

<dimen name="login_layout_margin">350dp</dimen>

More details здесь .