Android отображение квадратного изображения рядом с двумя сложенными видами

Question

Я пытаюсь отобразить изображение рядом с меткой и текстовым полем. Конечный результат должен выглядеть следующим образом:

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

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

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

Answer 1

Вы можете достичь этого очень просто, используя ConstraintLayout:

<?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="#f4f4f4"
  tools:context="MainActivity">


<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_percent="0.3"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.3"
    android:elevation="6dp"
    android:layout_margin="8dp"
    app:layout_constraintDimensionRatio="1:1"
    app:layout_constraintBottom_toBottomOf="@+id/button2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/button2"
    android:background="@color/colorAccent"/>

<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:elevation="6dp"
    android:layout_marginLeft="8dp"
    android:text="TextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView2"
    app:layout_constraintTop_toTopOf="@+id/imageView2" />

<EditText
    android:id="@+id/editText4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:elevation="6dp"
    android:ems="10"
    android:layout_marginLeft="8dp"
    android:inputType="textPersonName"
    android:text="Name"
    app:layout_constraintBottom_toBottomOf="@+id/imageView2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/imageView2" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

Важные атрибуты:

• Чтобы сделать изображение квадратным:
  
  app:layout_constraintDimensionRatio="1:1"

• Чтобы сделать ваши взгляды отзывчивыми:
  
  app:layout_constraintWidth_percent
app:layout_constraintHeight_percent

  Вместе с:

  android:layout_width="0dp"
android:layout_height="0dp"
  

• Чтобы ваши взгляды на контейнер выглядели так, как будто они внутри него (в этом примере я использовал кнопку, но вы можете использовать любой вид )
  android:elevation="6dp"