Android display a square image view next to two stacked views

Question

I am trying to display an image view next a label and a text box. The end result should look like this:

The height of the image view should be the same as whatever space the label and the text box take up and the width should be the same as the height so it is a square.

I have looked at this question to make an image view with equal width and height.

I have also looked at this other question which is similar to mine but using weightSum and layout_weight made the image view take up too much space or become distorted. I have also tried combining answers from the two questions but nothing worked.

Answer 1

You can achieve this very simply using 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>

This will look like this

The important attributes:

• To make your image square:
  
  app:layout_constraintDimensionRatio="1:1"

• To make your views responsive:
  
  app:layout_constraintWidth_percent
app:layout_constraintHeight_percent

  Together with:

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

• To make your views over the container so it looks like they are inside it (in this example I have used a button but feel free to use any kind of view)
  android:elevation="6dp"