CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-recyclerviewandroid-cardview
Daniele
Daniele

Reputation: 4343

How to create a CardView with clickable rows

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

layout

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?

Upvotes: 0

Views: 3345

Answers (5)

singh.indolia
singh.indolia

Reputation: 1291

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.

Upvotes: 1

Aditya Vyas-Lakhan
Aditya Vyas-Lakhan

Reputation: 13555

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

enter image description here

Upvotes: 2

sanket pahuja
sanket pahuja

Reputation: 325

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?

Upvotes: 1

Cochi
Cochi

Reputation: 2209

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.

Upvotes: 1

Payal
Payal

Reputation: 913

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

Upvotes: 1

Related Questions