Search code examples
androidandroid-layoutandroid-constraintlayout

Group multiple views in Constraint Layout to set only one click listener

I have got multiple views in a Constraint Layout. Those multiple views are made out of multiple ImageViews and TextViews. I want to give them, as a whole, only one click listener that triggers something. For example:

Views in Constraint Layout

With the code:

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    app:layout_constrainedWidth="true"
    android:background="@drawable/rounded_corners_with_shadow">

    <ImageView
        android:id="@+id/imageView"
        style="@style/CustomIcon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@mipmap/mic_icon_foreground" />

    <ImageView
        android:id="@+id/imageView2"
        style="@style/CustomIcon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:srcCompat="@mipmap/mic_icon_foreground" />

    <EditText
        android:id="@+id/editText2"
        style="@style/CustomText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:background="@android:color/transparent"
        android:ems="10"
        android:hint="@string/RemindHint"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintVertical_bias="1.0" />

    <EditText
        android:id="@+id/editText3"
        style="@style/CustomText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:background="@android:color/transparent"
        android:ems="10"
        android:hint="@string/SummaryHint"
        android:inputType="textPersonName"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/editText2"
        app:layout_constraintStart_toEndOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

    <ImageView
        android:id="@+id/imageView3"
        style="@style/CustomIcon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:srcCompat="@mipmap/calendar_icon_foreground" />

    <TextView
        android:id="@+id/textView"
        style="@style/CustomText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:text="Mon, Sep 19, 2016"
        app:layout_constraintBottom_toBottomOf="@+id/imageView3"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="@+id/imageView3" />

    <TextView
        android:id="@+id/textView2"
        style="@style/CustomText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:clickable="true"
        android:text="Mon, Sep 19, 2016"
        app:layout_constraintBottom_toBottomOf="@+id/imageView3"
        app:layout_constraintStart_toEndOf="@+id/imageView3"
        app:layout_constraintTop_toTopOf="@+id/imageView3" />

    <TextView
        android:id="@+id/textView3"
        style="@style/CustomText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:text="12:25 AM"
        app:layout_constraintBottom_toBottomOf="@+id/imageView4"
        app:layout_constraintStart_toEndOf="@+id/imageView4"
        app:layout_constraintTop_toTopOf="@+id/imageView4"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/textView4"
        style="@style/CustomText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="24dp"
        android:layout_marginLeft="24dp"
        android:text="One-time event"
        app:layout_constraintBottom_toBottomOf="@+id/imageView5"
        app:layout_constraintStart_toEndOf="@+id/imageView5"
        app:layout_constraintTop_toTopOf="@+id/imageView5"
        app:layout_constraintVertical_bias="1.0" />

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="@mipmap/close_icon_foreground"
        app:layout_constraintBottom_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="@+id/editText3"
        app:layout_constraintTop_toTopOf="@+id/textView" />

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="@mipmap/close_icon_foreground"
        app:layout_constraintBottom_toBottomOf="@+id/textView3"
        app:layout_constraintEnd_toEndOf="@+id/imageButton2"
        app:layout_constraintTop_toTopOf="@+id/textView3" />

    <ImageView
        android:id="@+id/imageView4"
        style="@style/CustomIcon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView3"
        app:srcCompat="@mipmap/alarm_icon_foreground" />

    <ImageView
        android:id="@+id/imageView5"
        style="@style/CustomIcon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView4"
        app:srcCompat="@mipmap/repeat_icon_foreground" />

    <ImageButton
        android:id="@+id/imageButton4"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="@mipmap/arrow_icon_foreground"
        app:layout_constraintBottom_toBottomOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/imageButton3"
        app:layout_constraintTop_toTopOf="@+id/textView4" />

    <Button
        android:id="@+id/cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginLeft="32dp"
        android:backgroundTint="#FFF"
        android:text="Cancel"
        android:textColor="#555"
        app:layout_constraintBottom_toBottomOf="@+id/save"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/save" />

    <Button
        android:id="@+id/save"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="32dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="#dd4b40"
        android:text="save"
        android:textColor="#FFF"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/imageButton4"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toEndOf="@+id/cancel"
        app:layout_constraintTop_toBottomOf="@+id/textView4"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

How do I make it so that when I click the area indicated by the green rectangle (Remind me to.. rectangular area), a click listener fires? Also, notice that there is a little space between the ImageView and TextView (indicated by the green paints). Can I group them so that their "click area" becomes one large rectangle?

Solution

  • Either place the ImageView and the EditText together in one ViewGroup and set a View.OnClickListener on the ViewGroup.

    Or use just the EditText. Set the drawable from the ImageView as android:drawableStart="@mipmap/mic_icon_foreground" for the EditText and control the distance between drawable and text with android:drawablePadding="24dp"