Content inside RecyclerView getting messed up

Question

I'm encountering some really strange behaviors with RecyclerView and it's about anchoring and aligning views inside one row of RecyclerView. So here is how the result from row should look:

And here are two pictures showing final result:

This is not happening always. Sometimes views inside are messed up like on attached images above and sometimes are not. Anyway here is my xml file showing how row layout looks:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <RelativeLayout android:id="@+id/background"
                    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">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_margin="24dp"
            android:id="@+id/iv_user_icon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_zelena_bez_lopte"
            app:civ_border="true"
            app:civ_border_color="@color/colorAccent"
            app:civ_border_width="1dp"
            app:civ_shadow="true"
            app:civ_shadow_color="@android:color/black"
            app:civ_shadow_radius="10"/>

        <LinearLayout
            android:id="@+id/username_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/iv_user_icon"
            android:layout_alignTop="@+id/iv_user_icon"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:layout_toEndOf="@+id/iv_user_icon"
            android:layout_toRightOf="@+id/iv_user_icon"
            android:gravity="center|start"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_username"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Mr.Bean"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:typeface="sans"/>

            <TextView
                android:id="@+id/tv_city_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:textColor="@color/colorAccent"
                android:textSize="12sp"
                android:typeface="sans"/>
        </LinearLayout>

        <ImageView
            android:id="@+id/iv_option"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_alignBottom="@+id/iv_user_icon"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/iv_user_icon"
            android:layout_marginEnd="20dp"
            android:layout_marginRight="20dp"
            android:background="@null"
            android:src="@drawable/ic_message"/>

        <View
            android:id="@+id/lst_item_divider"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_alignLeft="@+id/username_container"
            android:layout_alignStart="@+id/username_container"
            android:layout_below="@+id/username_container"
            android:background="@color/main_text_color"/>
    </RelativeLayout>

    <ImageView
        android:visibility="visible"
        app:layout_anchor="@+id/iv_user_icon"
        app:layout_anchorGravity="bottom|center|end|right"
        android:src="@drawable/icon"
        android:id="@+id/iv_star"
        android:layout_width="30dp"
        android:layout_height="30dp"/>

</android.support.design.widget.CoordinatorLayout>

I'm doing some hiding views inside adapter when i need to, and maybe that's an issue, i really don't know. I have tried without hiding views when checking some conditions inside adapter, but same results. Just to explain, i'm hiding inbox icon because if my username is showed in list i would like to hide it because i wouldn't want to send myself message and also this badge icon will be shown to one user only.

Here is code from adapter:

@Override
public void onBindViewHolder(final TeamMembersListAdapter.HeaderViewHolder holder, int position) {
    final User user = teamUsers.get(position);

    Glide.with(mContext)
            .load(Uri.parse(user.getImage()))
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .placeholder(R.drawable.ic_zelena_bez_lopte)
            .error(R.drawable.ic_zelena_bez_lopte)
            .dontAnimate()
            .into(holder.profileImage);

    String selfUserId = AppController.getInstance().getDatabase().getUserDetails().get("user_id");

    if (user.getCreatorId() == Integer.parseInt(user.getId())) {
        holder.ivBadge.setVisibility(View.VISIBLE);
    } else {
        holder.ivBadge.setVisibility(View.INVISIBLE);
    }

    if (selfUserId.equals(user.getId())) {
        holder.ivSendMessage.setVisibility(View.INVISIBLE);
    } else {
        holder.ivSendMessage.setVisibility(View.VISIBLE);
    }

    holder.tvUsername.setText(user.getName());
    holder.tvCityName.setText(user.getCity());

    holder.bgContainer.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mOnItemClickListener.onItemClickListener(holder.getAdapterPosition());
        }
    });
}

Answer 1

Shouldn't all views be together inside the RelativeLayout? I don't get why You even need the CoordinatorLayout, maybe try to get rid off Coordinator and wrap all inside Relative.

I would suggest also to try the ConstraintLayout - it should be super easy to done this in such layout.

Here, check this out https://developer.android.com/training/constraint-layout/index.html#add-constraintlayout-to-your-project