Android-приложение не масштабируется должным образом для небольших устройств

Question

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

Вот мой XML-код:

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


<ScrollView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.CardView
            android:id="@+id/culinary"
            android:layout_width="221dp"
            android:layout_height="144dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">


            <ImageView
                android:id="@+id/imageView23"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/culinary" />
        </android.support.v7.widget.CardView>


        <android.support.v7.widget.CardView
            android:id="@+id/music"
            android:layout_width="161dp"
            android:layout_height="146dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">

            <ImageView
                android:id="@+id/imageView25"
                android:layout_width="143dp"
                android:layout_height="133dp"
                android:layout_gravity="center"
                android:foregroundGravity="center"
                app:srcCompat="@drawable/music" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/literature"
            android:layout_width="146dp"
            android:layout_height="128dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="400dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/culinary"
            app:layout_constraintVertical_bias="0.0">


            <ImageView
                android:id="@+id/imageView26"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/literature" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/acting"
            android:layout_width="146dp"
            android:layout_height="128dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/photography"
            app:layout_constraintVertical_bias="0.072">

            <ImageView
                android:id="@+id/imageView21"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/drama" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/design"
            android:layout_width="122dp"
            android:layout_height="122dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.571"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/music"
            app:layout_constraintVertical_bias="0.009">

            <ImageView
                android:id="@+id/imageView17"
                android:layout_width="114dp"
                android:layout_height="105dp"
                android:layout_gravity="center"
                app:srcCompat="@drawable/fashion" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/handicrafts"
            android:layout_width="99dp"
            android:layout_height="122dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="400dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.974"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/photography"
            app:layout_constraintVertical_bias="1.0">

            <ImageView
                android:id="@+id/imageView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/handicraft" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/drawing"
            android:layout_width="146dp"
            android:layout_height="128dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="60dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/photography"
            app:layout_constraintVertical_bias="0.225">


            <ImageView
                android:id="@+id/imageView10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/drawing2" />
        </android.support.v7.widget.CardView>


        <android.support.v7.widget.CardView
            android:id="@+id/photography"
            android:layout_width="390dp"
            android:layout_height="165dp"
            android:layout_marginTop="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.533"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/handicrafts"
            app:layout_constraintVertical_bias="0.034">


            <ImageView
                android:id="@+id/imageView18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/photography1" />
        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:id="@+id/miscellanous"
            android:layout_width="77dp"
            android:layout_height="124dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/acting"
            app:layout_constraintHorizontal_bias="0.222"
            app:layout_constraintStart_toEndOf="@+id/drawing"
            app:layout_constraintTop_toBottomOf="@+id/photography"
            app:layout_constraintVertical_bias="0.083">

            <ImageView
                android:id="@+id/imageView22"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/misc" />
        </android.support.v7.widget.CardView>


    </android.support.constraint.ConstraintLayout>
</ScrollView>

Вот желаемый вывод и вывод, который я получаю:

Пожалуйста, помогите мне решить эту проблему!

Answer 1

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

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="146dp"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:id="@+id/culinary"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">


                <ImageView
                    android:id="@+id/imageView23"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:srcCompat="@drawable/culinary" />
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/music"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">

                <ImageView
                    android:id="@+id/imageView25"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center"
                    android:foregroundGravity="center"
                    app:srcCompat="@drawable/music" />
            </android.support.v7.widget.CardView>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="128dp"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:id="@+id/literature"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">


                <ImageView
                    android:id="@+id/imageView26"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:srcCompat="@drawable/literature" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/acting"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">

                <ImageView
                    android:id="@+id/imageView21"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/drama" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/design"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">

                <ImageView
                    android:id="@+id/imageView17"
                    android:layout_width="114dp"
                    android:layout_height="105dp"
                    android:layout_gravity="center"
                    app:srcCompat="@drawable/fashion" />
            </android.support.v7.widget.CardView>

        </LinearLayout>

        <android.support.v7.widget.CardView
            android:id="@+id/handicrafts"
            android:layout_width="match_parent"
            android:layout_height="122dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            app:cardCornerRadius="17dp"
            app:cardElevation="20dp">

            <ImageView
                android:id="@+id/imageView19"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:srcCompat="@drawable/handicraft" />
        </android.support.v7.widget.CardView>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="165dp"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:id="@+id/drawing"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">


                <ImageView
                    android:id="@+id/imageView10"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/drawing2" />
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:id="@+id/photography"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginTop="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">


                <ImageView
                    android:id="@+id/imageView18"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/photography1" />
            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:id="@+id/miscellanous"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_marginStart="8dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_weight="1"
                app:cardCornerRadius="17dp"
                app:cardElevation="20dp">

                <ImageView
                    android:id="@+id/imageView22"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:srcCompat="@drawable/misc" />
            </android.support.v7.widget.CardView>

        </LinearLayout>
    </LinearLayout>
</ScrollView>

Answer 2

В Android вам необходимо учитывать количество экранов разных размеров при разработке приложения для Android.

Разные телефоны имеют разный размер экрана , в вашем макете вы используете фиксированный размер наваш вид (например, фиксированный размер 50dp) и в результате то, что на одном экране (ваш экран предварительного просмотра в Android-студии) может выглядеть не очень хорошо на другом экране (ваш реальный телефон).

Чтобы решить вашу проблему, я бы рекомендовал использовать ConstraintLayout с направляющими и Цепи для поддержки экранов разных размеров.

Вот примермакета, который выглядит так, как вы хотите:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
  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">

<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="1"
    app:layout_constraintBottom_toTopOf="@+id/button6"
    app:layout_constraintDimensionRatio=""
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="2"
    app:layout_constraintBottom_toBottomOf="@+id/button"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button"
    app:layout_constraintTop_toTopOf="@+id/button" />

<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="5"
    app:layout_constraintBottom_toBottomOf="@+id/button5"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/button5"
    app:layout_constraintTop_toTopOf="@+id/button5" />

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="9"
    app:layout_constraintBottom_toBottomOf="@+id/button8"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/button9"
    app:layout_constraintTop_toTopOf="@+id/button8" />

<Button
    android:id="@+id/button9"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="8"
    app:layout_constraintBottom_toBottomOf="@+id/button8"
    app:layout_constraintEnd_toStartOf="@+id/button4"
    app:layout_constraintStart_toEndOf="@+id/button8"
    app:layout_constraintTop_toTopOf="@+id/button8" />

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="4"
    app:layout_constraintBottom_toBottomOf="@+id/button6"
    app:layout_constraintEnd_toStartOf="@+id/button3"
    app:layout_constraintStart_toEndOf="@+id/button6"
    app:layout_constraintTop_toTopOf="@+id/button6" />

<Button
    android:id="@+id/button6"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="3"
    app:layout_constraintBottom_toTopOf="@+id/button7"
    app:layout_constraintEnd_toStartOf="@+id/button5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button" />

<Button
    android:id="@+id/button7"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginStart="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginRight="8dp"
    android:text="6"
    app:layout_constraintBottom_toTopOf="@+id/button8"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button6" />

<Button
    android:id="@+id/button8"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:text="7"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/button9"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/button7" />

</android.support.constraint.ConstraintLayout>

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