I want to develop List like this picture
I had used to RecylerView ItemDecorator for overlap. But it's overlapping without shadow. the screen & decorator code is below
public class OverlapDecoration extends RecyclerView.ItemDecoration {
private final static int vertOverlap = -50;
@Override
public void getItemOffsets (Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.set(0, 0, 0, vertOverlap);
}
}
card_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:tag="cards main container">
<android.support.v7.widget.CardView
android:id="@+id/card_view"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardBackgroundColor="@color/color_white"
card_view:cardElevation="5dp"
card_view:cardUseCompatPadding="true">
<TextView
android:id="@+id/textViewName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:text="Android Name"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</android.support.v7.widget.CardView>
</LinearLayout>
try this code
card_layout.xml
<RelativeLayout 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"
android:orientation="vertical"
android:tag="cards main container">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:clipToPadding="false"
android:elevation="0dp"
card_view:cardUseCompatPadding="false"
card_view:paddingEnd="0dp"
card_view:paddingStart="0dp">
<TextView
android:id="@+id/textViewName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:layout_marginTop="30dp"
android:gravity="center"
android:text="Android Name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_above="@id/textViewName"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="@drawable/card_shadow" />
</android.support.v7.widget.CardView>
</RelativeLayout>
for card shadow card_shadow
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#77111111"
android:startColor="@android:color/transparent" />
</shape>
Try this.
In RecyclerView Adapter- on OnBindViewHolder method add the following code:
CardView cardView = ((MyViewHolder) holder).cardView;
float elevation = cardView.getCardElevation();
float value = elevation-Float.parseFloat((position*0.5)+"");
cardView.setCardElevation(value);
See the output here:
Note: depend on your code modify the above code and use it in right place.
For reference here is my sample adaptor code.
public class CustomAdapter extends RecyclerView.Adapter {
public static final String Name = "Name";
public static final String Author = "Author";
public static final String Description = "Description";
private List<Book> dataSet;
private Context context;
public CustomAdapter(List<Book> data, Context context) {
this.dataSet = data;
this.context = context;
}
public class MyViewHolder extends RecyclerView.ViewHolder {
ImageView profile;
TextView name, author,description;
CardView cardView;
public MyViewHolder(View itemView) {
super(itemView);
profile = (ImageView) itemView.findViewById(R.id.profile_image);
name = (TextView) itemView.findViewById(R.id.name);
author = (TextView) itemView.findViewById(R.id.author);
description = (TextView) itemView.findViewById(R.id.description);
cardView = (CardView) itemView.findViewById(R.id.cardview);
}
}
@Override
public int getItemCount() {
return dataSet.size();
}
@Override
public int getItemViewType(int position) {
return position;
}
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
RecyclerView.ViewHolder vh;
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.book_layout_sample, parent, false);
vh = new MyViewHolder(v);
return vh;
}
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
if (holder instanceof MyViewHolder) {
Book book = dataSet.get(position);
((MyViewHolder) holder).profile.setImageDrawable(getResources().getDrawable(R.drawable.blank_user,this.context.getTheme()));
((MyViewHolder) holder).name.setText(book.title);
((MyViewHolder) holder).author.setText(book.author);
((MyViewHolder) holder).description.setText(book.description);
CardView cardView = ((MyViewHolder) holder).cardView;
float ele = cardView.getCardElevation();
float val = ele-Float.parseFloat((position*0.5)+"");
cardView.setCardElevation(val);
if(position==0)
{
RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)cardView.getLayoutParams();
params.setMargins(0,0,0,0);
cardView.setLayoutParams(params);
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With