How to create a CardView with clickable rows

Question

For my App I need to create a layout similar to this:

I have been thinking about having a RecyclerView inside a CardView. But if I do it like that I have to create two separate row.xml (one for first and second row and the other for third and fourth). I was wondering if there is a simpler way to get the same result.

Can you point in the right direction?

thanks for the comment. I thought about that, but how do I get the above text to center vertically then? — Daniele, Mar 01 '17 at 09:01
@daniele If your bottom textview is gone and parent has gravity as center_vertical, It will automatically be centerally aligned — Payal, Mar 01 '17 at 09:04
you can set padding to the icon, so the icon will rule the height of the view. And then place TextViews in the LinearLayout, one below another. And set LinearLayout's gravity to center. This way all content will be centered, and if you set one view to GONE, the other one will be centered — Vladyslav Matviienko, Mar 01 '17 at 09:05
@VladMatvienko yes, that seems like a viable solution. I'm gonna try that. Thanks — Daniele, Mar 01 '17 at 09:07
if you have only four items to display then make one xml with static view — Aditya Vyas-Lakhan, Mar 01 '17 at 09:09
@AdityaVyas-Lakhan yes I do have only this four elements. I thought about that, nut then how do I make the whole row clickable? — Daniele, Mar 01 '17 at 09:12

Aditya Vyas-Lakhan · Accepted Answer · 2017-03-01T09:21:27.840

Create it using Relative layout or linear layout,and set id for parent layout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view_notification"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        card_view:cardCornerRadius="2dp"
        card_view:contentPadding="7dp">
        <LinearLayout 
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/rel_one"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Version"
            android:id="@+id/hedone"
            android:textColor="#000000"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="5.3(123)"
            android:textColor="#000000"
            android:layout_below="@+id/hedone"
            android:textSize="14sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_two"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Version"
            android:id="@+id/hedtwo"
            android:textColor="#000000"
            android:textSize="18sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Disponibile"
            android:textColor="#000000"
            android:layout_below="@+id/hedtwo"
            android:textSize="14sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_three"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="Your text"
            android:textColor="#000000"
            android:textSize="18sp" />



    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="#7B7A7F"
        />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="15dp"
        android:id="@+id/relative_four"
        >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:text="Yourtext"
            android:textColor="#000000"
            android:textSize="18sp" />



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

</LinearLayout>

OUTPUT

I succeded by modifying your code a bit. I added the ImageViews and this way I do not need to use RecyclerViews. Please if you got some time, add the ImageViews for future reference. Thank you very much — Daniele, Mar 01 '17 at 10:02

score 1 · Answer 2 · answered Mar 01 '17 at 09:02

1

Take a listview and initially make bottom textview gone. Make it visible as and when needed. Using cardview wont help you create such layout.

answered Mar 01 '17 at 09:02

Payal

903
1
9
28

I chose to use CardView because I wanted to have that border with shadows. Is there any other way I can get it? – Daniele Mar 01 '17 at 09:03
check this out..This might help you with border http://stackoverflow.com/questions/24095223/android-linearlayout-add-border-with-shadow-around-a-linearlayout – Payal Mar 01 '17 at 09:05
Thanks. I'll check this out – Daniele Mar 01 '17 at 09:08

score 1 · Answer 3 · answered Mar 01 '17 at 09:03

1

Maybe you could create a single row.xml and hide the subtitle when it's necessary.

mySubtitleTextView.setVisibility(View.GONE) like that subtitle doesn't take any space and title is still in center.

answered Mar 01 '17 at 09:03

Cochi

2,199
2
12
15

thanks for the answer. I could do that but in the first two rows the title isn't centered vertically. how do I get it centered when I set the subtitle to `View.GONE`? – Daniele Mar 01 '17 at 09:05
You use a parent for your textview with gravity center_vertical, childs will be always centered vertically . – Cochi Mar 01 '17 at 09:08

score 1 · Answer 4 · edited May 23 '17 at 12:02

1

I would suggest making multiple card views and using the getItemViewType method. You can set various view types for different layouts and in the onCreateViewHolder method you can inflate the card view based on the view type. How to create RecyclerView with multiple view type?

edited May 23 '17 at 12:02

Community

1
1

answered Mar 01 '17 at 09:08

sanket pahuja

325
2
12

Thanks for the answer. It's definitely an interesting option – Daniele Mar 01 '17 at 09:10

score 1 · Answer 5 · answered Mar 01 '17 at 09:32

First of all a point with in a RecyclerView there will be CardView not reverse .if you want to do it with RecyclerView then follow some steps like: step 1: create a Layout named as Activity_main.xml which having a RecyclerView like:

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".ui.MainActivity">


<android.support.v7.widget.RecyclerView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/recycler_view"
    android:scrollbars="vertical"
    ></android.support.v7.widget.RecyclerView>
</RelativeLayout>

step 2. Create layout named as product_layout which having a CardView like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="100dp">
    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:text="Products"-->
        <!--android:gravity="center"/>-->
<!--<RelativeLayout-->
    <!--android:layout_width="match_parent"-->
    <!--android:layout_height="wrap_content">-->
    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:gravity="center"-->
        <!--android:textStyle="italic"-->
        <!--android:text="Products"-->
        <!--android:textAppearance="?android:textAppearanceLarge"/>-->
<!--</RelativeLayout>-->
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cardview">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:src="@drawable/smartphone"
                android:id="@+id/mobileimage"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SmartPhones"
                android:layout_toRightOf="@+id/mobileimage"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:textStyle="bold"
                android:id="@+id/productname"
                android:layout_alignParentTop="true"/>
        </RelativeLayout>

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


</LinearLayout>

step 3. Now set first RecyclerView layout in MainActivity.java, if you are working on json then parse it after that set Your adapter like:

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        adapter = new ProductAdapter(list, getApplicationContext());
        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.addItemDecoration(new DividerItemDecoration(this, LinearLayoutManager.VERTICAL));
        recyclerView.setHasFixedSize(true);
        recyclerView.setAdapter(adapter);

step 4. create an Adapter named as ProductAdapter.java dafile like:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.dharmendras.productdetail.models.Products;
import com.example.dharmendras.productdetail.R;

import java.util.ArrayList;


public class ProductAdapter extends RecyclerView.Adapter <ProductAdapter.ProductsViewHolder> {
    ArrayList<Products> products = new ArrayList<Products>();
    private Context context;
    public ProductAdapter(ArrayList<Products> products,Context context){
        this.context = context;
        this.products = products;
    }
    @Override
    public ProductsViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.product_layout,parent,false);
        ProductsViewHolder productsViewHolder = new ProductsViewHolder(view);

        return productsViewHolder;
    }

    @Override
    public void onBindViewHolder(ProductsViewHolder holder, int position) {
         Products pdt = products.get(position);
        //Picasso.with(context).load(pdt.getImage_url()).resize(120, 60).into(holder.product_img);
        //pdt.getProduct_name()
        holder.product_name.setText(pdt.getProduct_name());
        //Drawable myDrawable = context.getResources().getDrawable(pdt.getImage_url());

       // int id = getContext().getResources().getIdentifier("imageName", "drawable", getContext().getPackageName());
       // ImageView myImageView = (ImageView)findViewById(R.id.myImage);

        //myImageView.setImageResource(R.drawable.icon);


       // holder.product_img.setImageDrawable(pdt.getImage_url());
        //imageView.setBackground(getResources().getDrawable(getResources().getIdentifier("name","id",getPackageName())));
        String name = pdt.getImage_url();
        int id = context.getResources().getIdentifier(name, "drawable",context.getPackageName());
        Drawable drawable = context.getResources().getDrawable(id);
        holder.product_img.setImageDrawable(drawable);
    }

    @Override
    public int getItemCount() {
        return products.size();
    }

    public static  class ProductsViewHolder extends  RecyclerView.ViewHolder{

        ImageView product_img;
        TextView product_name;
        public ProductsViewHolder(View view){
            super(view);
            product_img = (ImageView) view.findViewById(R.id.mobileimage);
            product_name = (TextView) view.findViewById(R.id.productname);

        }

    }
}

Step 5. if u want to add RecyclerView clickable then set onClickListener on RecyclerView in your Activity_main.java.

How to create a CardView with clickable rows

5 Answers5