Как сделать правую часть моего макета кликабельной?

Question

У меня есть такой макет:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/expand_btn"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignBottom="@id/name_of_service"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="30dp"
            android:src="@drawable/down_arrow" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

</LinearLayout>

И я бы хотел, чтобы вся правая сторона, где размещен просмотр изображений, была кликабельной, а не только просмотром изображений.Я решил поместить свой просмотр изображений в framelayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#F2F2F2">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />

        <FrameLayout
            android:id="@+id/click_area"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignBottom="@id/name_of_service"
            android:layout_alignParentEnd="true"
            android:clickable="true"
            android:focusable="true">

            <ImageView
                android:id="@+id/expand_btn"
                android:layout_width="wrap_content"
                android:layout_gravity="bottom"
                android:layout_height="wrap_content"
                android:src="@drawable/down_arrow" />
        </FrameLayout>


    </RelativeLayout>

    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

</LinearLayout>

и затем переопределить событие клика:

holder.frameLayout.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent event) {
                if(event.getAction() == MotionEvent.ACTION_UP){
                    Log.i("m","sjn");
                    return true;
                }
                return false;
            }
        });

Но, как я вижу, я могу щелкнуть только нижнюю часть моего макета.Этот макет используется как вид моего элемента RecyclerView, и когда я нажимаю на правой стороне, я показываю скрытый линейный макет, как это:

holder.showHideBtn.setOnClickListener(view -> {
            if (invisible) {
                holder.layout.setVisibility(View.VISIBLE);
                invisible = false;
                holder.showHideBtn.setImageResource(R.drawable.ic_up_arrow);
            } else {
                holder.layout.setVisibility(View.GONE);
                invisible = true;
                holder.showHideBtn.setImageResource(R.drawable.down_arrow);
            }

        });

Может быть, кто-нибудь может помочь мне с моей проблемой?Я пытался использовать макет ограничения, и мне не удалось решить мою проблему.Затем я попытался использовать weight для этой задачи, но это не помогло мне: (

ОБНОВЛЕНИЕ

После добавления обработчика щелчков как для разметки кадров, так и для просмотра изображений:

Answer 1

Вам необходимо добавить свой прослушиватель щелчка к макету фрейма, а не к imageview.В этом случае ваш frameLayout будет работать как ваш imageView.

    holder.frameLayout.setOnClickListener(view -> {

 if (invisible) {
                holder.layout.setVisibility(View.VISIBLE);
                invisible = false;
                holder.showHideBtn.setImageResource(R.drawable.ic_up_arrow);
            } else {
                holder.layout.setVisibility(View.GONE);
                invisible = true;
                holder.showHideBtn.setImageResource(R.drawable.down_arrow);
            }

        });

Answer 2

Снимите Framelayout и установите ImageView вот так

    <ImageView
        android:id="@+id/expand_btn"
        android:layout_width="wrap_content"
        android:layout_gravity="bottom"
        android:layout_alignBottom="@id/name_of_service"
        android:layout_alignParentEnd="true"
        android:scaleType="fitEnd"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/ic_start" />

Ваше изображение будет занимать всю правую сторону, а с fitEnd значок будет размещен на нижней стороне.

Answer 3

Попробуйте написать onClick слушатель для обоих, FrameLayout и вашего ImageView, потому что ваш ImageView теперь покрывает ваш FrameLayout, и у вас есть только эта небольшая область, которая не покрыта ImageView.Это должно помочь.

Answer 4

Мне удалось решить мою проблему с помощью constraint_layout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:orientation="vertical"
    app:autoSizeMaxTextSize="20sp"
    app:autoSizeMinTextSize="8sp"
    app:autoSizeStepGranularity="1sp"
    app:autoSizeTextType="uniform">

    <RelativeLayout
        android:id="@+id/relLay"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#F2F2F2"
        app:layout_constraintHorizontal_weight="0.7"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/testClick"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/service_icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp" />

        <TextView
            android:id="@+id/name_of_service"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/service_icon"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:fontFamily="@font/opensans_semibold"
            android:textAlignment="center"
            android:textColor="#4D4D4D"
            android:textSize="14sp" />


    </RelativeLayout>


    <FrameLayout
        android:id="@+id/testClick"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:background="#F2F2F2"
        app:layout_constraintBottom_toBottomOf="@id/relLay"
        app:layout_constraintHorizontal_weight="0.3"
        app:layout_constraintLeft_toRightOf="@+id/relLay"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/expand_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            android:src="@drawable/down_arrow" />
    </FrameLayout>


    <LinearLayout
        android:id="@+id/layout_descr"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:background="@drawable/test_back"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/relLay">

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="20dp"
            android:fontFamily="@font/opensans_semibold"
            android:textColor="#666666" />
    </LinearLayout>

Может быть, это поможет кому-то еще. Удачи:)