ConstraintLayout set rounded corner by Shape Resource file doesn't work

Viewed 3670

I have met a strange problem, It didn't work when I set layout used for adapter item corners by shape resource file.

This is my shape resource file

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="8dp" />
</shape>

This is my adapter item layout

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

        <import type="android.view.View.OnClickListener" />

        <import type="android.view.View" />

        <import type="com.zhixin.wedeep.homepage.data.model.BriefComposition" />

        <variable
            name="clickListener"
            type="OnClickListener" />

        <variable
            name="composition"
            type="BriefComposition" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="108dp"
        android:layout_height="150dp"
        android:background="@drawable/homepage_shape_recommend_composition_background"
        android:gravity="center"
        android:onClick="@{clickListener}"
        android:orientation="vertical">

        <TextView
            android:id="@+id/text_view_label_is_new"
            android:layout_width="36dp"
            android:layout_height="22dp"
            android:text="@string/homepage_new"
            android:textColor="@color/color_white"
            android:textSize="@dimen/font_size_10"
            android:visibility='@{composition.tag == "NEW" ? View.VISIBLE : View.INVISIBLE}'
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="新上" />

        <ImageView
            android:id="@+id/image_view_cover"
            imageFromUrl="@{composition.cover}"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            tools:src="@drawable/gt3_new_bind_logo" />

        <LinearLayout
            android:id="@+id/linear_layout_text_area"
            android:layout_width="match_parent"
            android:layout_height="42dp"
            android:orientation="vertical"
            android:paddingStart="5dp"
            app:layout_constraintBottom_toBottomOf="parent"
            tools:ignore="RtlSymmetry">

            <TextView
                android:id="@+id/text_view_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:text="@{composition.title}"
                android:textColor="@color/color_white"
                android:textSize="@dimen/font_size_13"
                tools:text="助眠脑波" />

            <TextView
                android:id="@+id/text_view_duration"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="1dp"
                android:text="@{composition.duration}"
                android:textColor="@color/color_white"
                android:textSize="@dimen/font_size_10"
                tools:text="5-30min" />
        </LinearLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

This is my RecylerView for display the above item layout

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view_recommendation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:layout_marginStart="15dp"
    android:layout_marginEnd="15dp"
    app:layoutManager="androidx.recyclerview.widget.GridLayoutManager"
    app:spanCount="3"
    tools:itemCount="6"
    tools:listitem="@layout/homepage_item_recommend_composition" />

This is my RecylerView Adapter

class RecommendCompositionsAdapter : ListAdapter<BriefComposition, RecommendCompositionsAdapter.ViewHolder>(BriefCompositionDiffCallback()) {


    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        return ViewHolder(HomepageItemRecommendCompositionBinding.inflate(
                LayoutInflater.from(parent.context), parent, false))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

        val briefComposition = getItem(position)
        briefComposition?.let {
            holder.apply {
                itemView.tag = it
                bind(createOnClickListener(it.id), it)
            }
        }
    }

    private fun createOnClickListener(id: String): View.OnClickListener {
        return View.OnClickListener {
            ARouter.getInstance().build(RouterConstant.PATH_AUDIO_PLAYER).withString(AudioPlayerActivity.KEY_ID, id).navigation()
        }
    }

    class ViewHolder(private val binding: HomepageItemRecommendCompositionBinding)
        : RecyclerView.ViewHolder(binding.root) {

        fun bind(listener: View.OnClickListener, item: BriefComposition
        ) {
            binding.apply {
                clickListener = listener
                composition = item
                // from View

                executePendingBindings()
            }
        }
    }
}

Any ideas for this odd problem? Thank you in advance!

1 Answers

It looks like even if you are setting the background of your ConstraintLayout, it is overlapped by the ImageView and hence you are not getting the shape that your ConstraintLayout has. I would recommend using a CardView instead of the ConstraintLayout. Set the drawable as the background of your CardView and put everything inside of your CardView as you have done it for the ConstraintLayout.

I hope that helps!

Related