Ограничение макета не работает на всех android устройствах с размером экрана

Question

У меня есть следующий макет, он отлично работает для больших экранов, таких как Note 9 Samsung, но он не будет уменьшаться, чтобы соответствовать размеру экрана в небольших телефонах, пожалуйста, обратитесь к приложенному изображению и кодам. Мне нравится использовать макеты ограничений, я выбрал все элементы в форме WRAPCONTENT или MATCHCONSTRAIN, но в небольших телефонах кнопка запуска запускалась за пределами экрана.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="@drawable/scroll"
    tools:context=".teamselect">

    <EditText
        android:id="@+id/team1EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginLeft="148dp"
        android:layout_marginTop="7dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:layout_marginBottom="22dp"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/team1EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginLeft="148dp"
        android:layout_marginTop="7dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:layout_marginBottom="54dp"
        android:clickable="false"
        android:editable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt1" />

    <EditText
        android:id="@+id/team2EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginLeft="148dp"
        android:layout_marginTop="7dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:layout_marginBottom="22dp"
        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/team2EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginLeft="148dp"
        android:layout_marginTop="7dp"
        android:layout_marginEnd="49dp"
        android:layout_marginRight="49dp"
        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="209dp"
        android:layout_marginLeft="209dp"
        android:layout_marginTop="129dp"
        android:layout_marginEnd="41dp"
        android:layout_marginRight="41dp"
        android:layout_marginBottom="24dp"
        android:text="الفريق الاول"
        android:textSize="36sp"
        app:fontFamily="@font/advent_pro_thin"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="209dp"
        android:layout_marginLeft="209dp"
        android:layout_marginTop="44dp"
        android:layout_marginEnd="41dp"
        android:layout_marginRight="41dp"
        android:layout_marginBottom="24dp"
        android:text="الفريق الثاني"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt2" />

    <Button
        android:id="@+id/startBtn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="110dp"
        android:layout_marginLeft="110dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="110dp"
        android:layout_marginRight="110dp"
        android:layout_marginBottom="10dp"
        android:background="@drawable/buttondomeno"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt2" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Не подходит из-за фиксированных размеров текста и полей в ваших представлениях. Вы можете попробовать одну из двух вещей: 1) использовать ScrollView, чтобы сделать макет прокручиваемым 2) Удалить жестко закодированные размеры и использовать разные размеры для разных размеров экрана

Answer 2

Добавляя к ответу @Hamza Khan, старайтесь избегать использования любых фиксированных размеров на ваших представлениях, вы можете использовать этот макет:

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="0dp">


    <EditText
        android:id="@+id/team1EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt2"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <EditText
        android:id="@+id/team1EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:clickable="false"
        android:editable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/textView2"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/team1EdtTxt1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="الفريق الاول"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/team1EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="الفريق الثاني"
        android:textSize="36sp"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline3" />

    <EditText
        android:id="@+id/team2EdtTxt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 1"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/team2EdtTxt2"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

    <EditText
        android:id="@+id/team2EdtTxt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clickable="false"
        android:ems="10"
        android:hint="اللاعب 2"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toTopOf="@+id/startBtn"
        app:layout_constraintEnd_toEndOf="@+id/textView2"
        app:layout_constraintTop_toBottomOf="@+id/team2EdtTxt1" />

    <Button
        android:id="@+id/startBtn"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="start"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintWidth_percent="0.3" />

    <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.50" />

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


</androidx.constraintlayout.widget.ConstraintLayout>

Это будет выглядеть так:

Обратите внимание, что я использовал 2 очень полезных атрибута:

  app:layout_constraintHeight_percent="0.1"
  app:layout_constraintWidth_percent="0.3"

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

  app:layout_constraintGuide_percent="0.x"