android disable clipping recyclerview's item

user_3152652 0
Viewed 2761

To-be and As-is

First picture describe what I want, and second picture is what I got.

Black rectangle means RecyclerView, dark red means it's item. Navy is ImageView.

I tried clipChildren on parent viewgroup where recyclerview belong to.

Is there any wany to achieve that ? (I also tried animation)

val animation = TranslateAnimation(
    Animation.ABSOLUTE, 0f,
    Animation.ABSOLUTE, 0f,
    Animation.ABSOLUTE, 0f,
    Animation.ABSOLUTE, -dpToPixel(21f, itemView.context)
)
animation.duration = 0

imageView.startAnimation(animation)

--- EDIT ---


Activity Layout

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerView"
                                               android:layout_width="match_parent"
                                               android:layout_height="60dp"
                                               android:background="@android:color/black"
                                               app:layout_constraintLeft_toLeftOf="parent"
                                               app:layout_constraintRight_toRightOf="parent"
                                               app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>


ViewHolder Layout

<?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"
                                                   android:orientation="vertical"
                                                   android:layout_width="50dp"
                                                   android:layout_height="50dp">


    <!-- image -->
    <View android:id="@+id/dummy"
          android:layout_width="0dp"
          android:layout_height="0dp"
          android:background="@android:color/holo_green_dark"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintBottom_toBottomOf="parent" />

    <!-- marker here -->
    <View android:layout_width="20dp"
          android:layout_height="20dp"
          android:translationX="-5dp"
          android:translationY="-5dp"
          android:background="@android:color/holo_red_dark"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

Note that I can't give more height than 60dp and inner item has fixed height (50dp).

enter image description here

android-recyclerview android-layout android
2 Answers

In your example, the view holder layout is contained within the RecyclerView and the RecyclerView is contained within a_ConstraintLayout_.

ConstraintLayout
----> RecyclerView
--------> ConstraintLayout (view holder)
------------> ImageView

According to the documentation for clipChildren

android:clipChildren

Defines whether a child is limited to draw inside of its bounds or not.

You want the view holder to be able to draw the ImageView outside the bounds of the view holder and the RecyclerView to draw the view holder outside of the bounds of the RecyclerView. To do this, you will need to set android:clipChildren="false" on the RecyclerView and the top-level ConstraintLayout.

user_62879100

With ConstraintLayout you can achieve the "view over view" in a few seconds:

All you need to do is to make the proper constraints, the upper view will be constrained to another view and he will be on top of him.

Something like this:

<?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"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

<ImageView
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Lower view" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@+id/button2"
    app:layout_constraintEnd_toStartOf="@+id/button2"
    app:layout_constraintStart_toStartOf="@+id/button2"
    app:layout_constraintTop_toTopOf="@+id/button2"
    tools:text="top" />
</android.support.constraint.ConstraintLayout>

And it will look like this:

enter image description here

And this is how you can put 1 view on top on another view, now all left for you to do is implement it for your case.

user_82747560
Related