Boardy Boardy - 4 months ago 19
Android Question

Card layout is all bunched up

I am trying to implement the new RecyclerView and Card layout. It is all working correctly, except that the cards appear all bunched up together, i.e. none of the cards are separated, you just see one drop shadow on the last item as shown in the screenshot below.

Screenshot showing issue with card layout

As you can see from the screenshot above, there is no separation between the 3 elements and there is only the drop shadow shown on the last element.

Below is the layout that contains the recycler view

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="@+id/android_recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>


Below is the layout for card layout

<app:android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="400dp"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/tools"
android:layout_margin="40dp"
app:cardUseCompatPadding="true"
app:cardPreventCornerOverlap="false">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp"
app:cardUseCompatPadding="true">
<TextView
android:id="@+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"
android:clickable="true"
android:background="?android:selectableItemBackground" />

</RelativeLayout>
</app:android.support.v7.widget.CardView>


The recylcer view is hosted within a View Pager tab view, below is the XML for this as well in case it is needed.

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

<LinearLayout
android:id="@+id/viewContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="@layout/toolbar"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--app:layout_behaviour="@string/appbar_scrolling_view_behaviour" />-->

</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabRegisterNewApp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
app:layout_anchor="@id/viewpager"
android:src="@drawable/ic_add_white_24dp"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>


Below is my onCreateViewHolder and onBindViewHolder code

@Override
public AppViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.app_card, null);
AppViewHolder appViewHolder = new AppViewHolder(view);
return appViewHolder;
}

@Override
public void onBindViewHolder(AppViewHolder holder, int position)
{
AppDetails appDetails = appDetailsList.get(position);
holder.textView.setText(appDetails.getApplicationName());
holder.textView.setOnClickListener(mCardClickListener);
holder.textView.setTag(holder);
}


Thanks for any help you can provide

Answer

The problem lies in how you inflate the view, LayoutInflater.from(parent.getContext()).inflate(R.layout.app_card, null);

You're not providing a parent in the inflate method (You set it to null) which will provide the set of LayoutParams to be used, so the cardview just ignores some of the params you give it. You should also set the boolean attachToRoot to false to make sure the parent is only used to create the correct subclass of LayoutParams

LayoutInflater.from(parent.getContext()).inflate(R.layout.app_card, parent, false);

You can also read more about it in the docs and also here