Как автоматически изменить размер изображения для разных размеров экрана Android Studio?

Question

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

Расположение изображения при разных размерах экрана выглядит совершенно по-разному. Если экран достаточно мал, изображение иногда будет размещено за пределами области обзора.

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

Кто-нибудь знает, как сделать автоматическое изменение размера изображения в соответствии с размером экрана?

Вот изображения того, что происходит:

Это макетприложение:

Вот как я хочу, чтобы это выглядело (Пиксель 3):

Но вот так выглядит на меньшем экране (Nexus 5):

В XCode есть функция, называемая автоматическим изменением размера, которая автоматически изменяет размер содержимого для вас. Есть ли в Android Studio что-то подобное?

Это xml:

<?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"
    tools:context=".MainActivity">
    
    <Button
        android:id="@+id/resetButton"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:layout_marginBottom="56dp"
        android:background="#F70000"
        android:text="Undo"
        android:textColor="#000000"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="288dp"
        android:layout_height="248dp"

        android:background="#1750DF"
        android:scaleType="fitXY"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.685" />


</androidx.constraintlayout.widget.ConstraintLayout>

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

Answer 1

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

https://github.com/intuit/sdp

Answer 2

изображения не меняются автоматически

Поскольку вы используете фиксированное значение размера на imageView, у вас возникла эта проблема:

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

---

Как исправить

Вы можете использовать эти атрибуты, чтобы сделать ваше изображение отзывчивым в размере:

app:layout_constraintHeight_percent="0.25"
app:layout_constraintWidth_percent="0.25"

Вам нужно будет указать размер вашего изображения 0dp в android:layout_width и android:layout_height

Что я сделал, чтобы сказать, что представление равно 25%как по ширине, так и по высоте в зависимости от размера экрана, это позволит вам просматривать изображение с учетом всех размеров экрана и, таким образом, будет автоматически изменять размер

Answer 3

Обновление

После ответа @ tamir-abutbul, это хороший обходной путь, чтобы использовать layout_constraintHeight_percent и layout_constraintWidth_percent, чтобы подогнать вид под размер экрана. Я поместил верхние элементы в макет сетки, вы можете применить это к любому из ваших топовых макетов, которые вы используете, главное, что нужно учитывать, это layout_constraintHeight / Width_percent здесь. Кроме того, для изображения я установил прозрачный фон и изменил scaleType на «fitCenter», чтобы изображение сохраняло соотношение сторон на любом экране. надеюсь это поможет. Вы можете изменить Android на AndroidX.

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

<GridLayout
    android:id="@+id/gridLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginTop="0dp"
    android:background="#faf"
    android:columnCount="5"
    android:rowCount="4"
    app:layout_constraintHeight_percent="0.4"
    app:layout_constraintTop_toTopOf="parent">


</GridLayout>

<ImageView

    android:id="@+id/imageView3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="8dp"
    android:background="#00000000"
    android:scaleType="fitCenter"
    android:src="@drawable/lamborghini"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.30"
    app:layout_constraintHorizontal_bias="0.495"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/gridLayout"
    app:layout_constraintVertical_bias="0.265"
    app:layout_constraintWidth_percent="0.7" />

<Button
    android:id="@+id/resetButton"
    style="@style/Widget.AppCompat.Button.Borderless.Colored"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="16dp"
    android:background="#F70000"
    android:text="Undo"
    android:textColor="#000000"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView3"
    app:layout_constraintVertical_bias="0.395" />




 </android.support.constraint.ConstraintLayout>