CODEWITHSUNDEEP
androidandroid-layoutandroid-listviewandroid-cardviewandroid-recyclerview
dzigydosmbib
dzigydosmbib

Reputation: 41

CardView and RecyclerView divider behaviour

I am trying to use RecyclerView with CardView as an single item of the list.
I want to implement horizontal list, with LayoutManager it is really easy.
So I started to implement it. It seems that everything works, but not as I expected here is the result using CardView as an list item.

enter image description here

Looks pretty good, but I haven't set any paddings, dividers and rounded corners.
Here is my XML for card view item. 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        android:gravity="center"
       >
        <ImageView
            android:id="@+id/image_view"
            android:src="@drawable/androidsss"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_centerInParent="true"
            />
        <TextView
            android:id="@+id/info_text"
            android:layout_below="@+id/image_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:ellipsize="end"
            android:singleLine="true"
            android:textColor="@android:color/black"
            android:textSize="14sp" />
    </RelativeLayout>

</android.support.v7.widget.CardView>

Also there is something like small divider at the bottom of layout.
I haven't specified any.
Here is my setting up code for RecyclerView 

 mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
    mRecyclerView.setHasFixedSize(true);
    mLayoutManager = new LinearLayoutManager(this);
    mLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
    mRecyclerView.setLayoutManager(mLayoutManager);
 //   mRecyclerView.addItemDecoration(new SimpleDividerItemDecoration(this));
    mAdapter = new CardViewDataAdapter(myDataset);
    mRecyclerView.setAdapter(mAdapter);

Interesting thing that with simple item, not card view, everything works as expected. Here is an example.

enter image description here

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="150dp"
    android:layout_height="100dp"
    android:background="@android:color/white"
    >

    <ImageView
        android:id="@+id/item_image"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        />
    <TextView
        android:id="@+id/item_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/item_image"
        android:text="Hello World !!"
        android:layout_centerInParent="true"
        android:textColor="@android:color/black"
        />
</RelativeLayout>

Where is the problem, is it my fault or bug ?

Upvotes: 2

Views: 4955

Answers (3)

paulina_glab
paulina_glab

Reputation: 2487

The spaces you can see are compat paddings and they're visible only on pre-Lollipop devices (or everywhere if you set card_view:cardUseCompatPadding="true"). You can find values here (CardView's doc).

Before L, CardView adds padding to its content and draws shadows to that area. This padding amount is equal to maxCardElevation + (1 - cos45) * cornerRadius on the sides and maxCardElevation * 1.5 + (1 - cos45) * cornerRadius on top and bottom.

Also, as far as I can see, there is some default radius for CardView's corner (probably it is 2dp).

You can try any tricks to avoid these spaces or (IMHO it's better) consider if you should make view with custom background, like simple "tile". Here you have some info from Google about design.

Upvotes: 5

Muthukrishnan Suresh
Muthukrishnan Suresh

Reputation: 241

Try this layout 

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_gravity="center"
            android:gravity="center">

            <ImageView
                android:id="@+id/image_view"
                android:src="@drawable/androidsss"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_alignParentTop="true"
                android:layout_centerInParent="true" />

            <TextView
                android:id="@+id/info_text"
                android:layout_below="@+id/image_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:ellipsize="end"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:textSize="14sp" />
        </RelativeLayout>

    </android.support.v7.widget.CardView>
</LinearLayout>

Upvotes: 0

theJango
theJango

Reputation: 1108

That's the default behavior of CardView, however you can modify how it should look, like removing the border radius and etc by adding attributes to your CardView declaration.

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="200dp"
    android:layout_height="200dp"
    card_view:cardCornerRadius="4dp"
    card_view:cardBackgroundColor='#ffffff'>

For more information must visit this to clip shadows https://developer.android.com/training/material/shadows-clipping.html https://developer.android.com/reference/android/support/v7/widget/CardView.html

Upvotes: 0

Related Questions