How to make right side of my layout clickable?

Question

I have this layout:

<?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>

And I would like to make whole right side where imageview is placed clickable not only imageview. I decided to put my imageview into 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>

And then override click event:

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;
            }
        });

But as I see I can click only the bottom part of my layout. This layout is used like view of my RecyclerView item and when I click on the right side I will show hidden linearlayout like this:

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);
            }

        });

Maybe somebody can help me with my problem? I tried to use constraint layout and I didn't manage to solve my problem. Then I tried to use weight for this task but it didn't help me :(

UPDATE

After adding click handler for both framelayout and imageview:

Answer 1

Try to write onClick listener for both, FrameLayout and your ImageView , because your ImageView now covers your FrameLayout and you have only this small area which is not covered by ImageView . This should help.

Answer 2

You need to add your click Listener to your frame layout not on imageview . In that case your frameLayout will work as your 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 3

Remove your Framelayout and set ImageView like this

    <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" />

Your image will take the whole right side and with fitEnd the icon will be placed on bottom side.

Answer 4

I have managed to solve my problem via 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>

maybe it will help someone else. Good luck :)