Android App Development for Phones/Tablets: cardview in android

Showing posts with label cardview in android. Show all posts

Tuesday, 30 December 2014

RecyclerView with onClick and onLongClick implemtation in android example

In the Previous Post, We have create list of items with RecyclerView using appcompat v7.

Now, we have implemented onclick event functionality in the previous post for each list item using stackoverflow link.

Now, I have update the code to latest Android Api RecyclerView default way of implementing
onClick and onLongClick on the each item.

Step 1: Create an Activity with recyclerview

CardViewActivity.java
package com.pratap.cardviews1;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

public class CardViewActivity extends AppCompatActivity {

 private Toolbar toolbar;

 private RecyclerView mRecyclerView;
 private RecyclerView.Adapter mAdapter;
 private RecyclerView.LayoutManager mLayoutManager;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  toolbar = (Toolbar) findViewById(R.id.toolbar);

  if (toolbar != null) {
   setSupportActionBar(toolbar);
   getSupportActionBar().setTitle("Android Versions");

  }

  final String[] myDataset = { "Alpha", "Beta", "CupCake", "Donut",
    "Eclair", "Froyo", "Gingerbread", "Honeycomb",
    "Ice Cream Sandwitch", "JellyBean", "KitKat", "LollyPop" };

  mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

  // use this setting to improve performance if you know that changes
  // in content do not change the layout size of the RecyclerView
  mRecyclerView.setHasFixedSize(true);

  // use a linear layout manager
  mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

   
  // create an Object for Adapter 
  mAdapter = new CardViewDataAdapter(myDataset);
  
  // set the adapter object to the Recyclerview 
  mRecyclerView.setAdapter(mAdapter);

 }

}

Step 2: Create an Adapter for the recycler with the class RecyclerView.Adapter

CardViewDataAdapter.java

package com.pratap.cardviews1;


import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnLongClickListener;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

public class CardViewDataAdapter extends
  RecyclerView.Adapter<CardViewDataAdapter.ViewHolder> {
 private static String[] mDataset;

 

 // Provide a suitable constructor (depends on the kind of dataset)
 public CardViewDataAdapter(String[] myDataset) {
  mDataset = myDataset;
  
 }

 // Create new views (invoked by the layout manager)
 @Override
 public CardViewDataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
   int viewType) {
  // create a new view
  View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(
    R.layout.cardview_row, null);

  // create ViewHolder

  ViewHolder viewHolder = new ViewHolder(itemLayoutView);
  return viewHolder;
 }

 // Replace the contents of a view (invoked by the layout manager)
 @Override
 public void onBindViewHolder(ViewHolder viewHolder, int position) {

  // - get data from your itemsData at this position
  // - replace the contents of the view with that itemsData

  viewHolder.tvVersionName.setText(mDataset[position].toString());
  
  viewHolder.versionName=mDataset[position];

 }

 // Return the size of your dataset (invoked by the layout manager)
 @Override
 public int getItemCount() {
  return mDataset.length;
 }

 // inner class to hold a reference to each item of RecyclerView
 public static class ViewHolder extends RecyclerView.ViewHolder {

  public TextView tvVersionName;
  
  public String versionName;

  public ViewHolder(View itemLayoutView) {
   super(itemLayoutView);

   tvVersionName = (TextView) itemLayoutView
     .findViewById(R.id.tvVersionName);

   itemLayoutView.setOnClickListener(new OnClickListener() {

    @Override
    public void onClick(View v) {

     Toast.makeText(v.getContext(), "OnClick Version :" + versionName,
       Toast.LENGTH_SHORT).show();

    }
   });

   itemLayoutView.setOnLongClickListener(new OnLongClickListener() {

    @Override
    public boolean onLongClick(View v) {
     
     Toast.makeText(v.getContext(), "OnLongClick Version :" + versionName,
       Toast.LENGTH_SHORT).show();
     return true;

    }
   });

  }

 }

}

Step 3:

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#c9c9c9"
    android:orientation="vertical" >

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:scrollbars="vertical" />

</LinearLayout>

Step 4:

cardview_row.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    card_view:cardCornerRadius="5dp"
    card_view:cardUseCompatPadding="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp" >

        <TextView
            android:id="@+id/tvVersionName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:minHeight="55dp"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </RelativeLayout>

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

Step 5:

values/themes.xml

<resources>

    <style name="AppTheme" parent="AppTheme.Base" />

    <style name="AppTheme.Base" parent="Theme.AppCompat.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <!--  <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item> -->
        
    </style>

</resources>

Step 6:

values-21/themes.xml

<resources>
<style name="AppTheme" parent="AppTheme.Base">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>

Step 7:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.pratap.cardviews1"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".CardViewActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Step 8:

Run the Application:

Download the Source Code

ScreenShots

recyclerview onclick

recyclerview onlongclick

Monday, 3 November 2014

Recyclerview with Cards example in Android with AppCompat (V7)

I have created a sample application to show RecyclerView and CardView in android with Latest Appcompat Library (V7 Library).

Step 1:

Import three Libary Project to the Eclipse

1) AppCompat

2) RecyclerView

3) CardView

from the folder android-sdk\extras\android\support\v7

Step 2 :

Create a new Project/download the Source from below,

and add the three Libary Projects to the MainProject as a Library Projects.

CardViewActivity.java

package com.pratap.cardviews1;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class CardViewActivity extends ActionBarActivity {

 private Toolbar toolbar;

 private RecyclerView mRecyclerView;
 private RecyclerView.Adapter mAdapter;
 private RecyclerView.LayoutManager mLayoutManager;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  toolbar = (Toolbar) findViewById(R.id.toolbar);
  if (toolbar != null) {
   setSupportActionBar(toolbar);

  }

  String[] myDataset = { "Alpha", "Beta", "CupCake", "Donut", "Eclair",
    "Froyo", "Gingerbread", "Honeycomb", "Ice Cream Sandwitch",
    "JellyBean", "KitKat", "LollyPop" };

  mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

  // getSupportActionBar().setIcon(R.drawable.ic_launcher);

  // getSupportActionBar().setTitle("Android Versions");

  // use this setting to improve performance if you know that changes
  // in content do not change the layout size of the RecyclerView
  mRecyclerView.setHasFixedSize(true);

  // use a linear layout manager
  mLayoutManager = new LinearLayoutManager(this);
  mRecyclerView.setLayoutManager(mLayoutManager);
  
   // specify an adapter (see also next example)
  mAdapter = new CardViewDataAdapter(myDataset);
  mRecyclerView.setAdapter(mAdapter);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button, so long
  // as you specify a parent activity in AndroidManifest.xml.
  int id = item.getItemId();
  if (id == R.id.action_settings) {
   Toast.makeText(getApplicationContext(), "Settings Clicked",
     Toast.LENGTH_SHORT).show();
   return true;
  } else if (id == R.id.action_search) {
   Toast.makeText(getApplicationContext(), "Search Clicked",
     Toast.LENGTH_SHORT).show();
   return true;
  }
  return super.onOptionsItemSelected(item);
 }
}

CardViewDataAdapter.java

package com.pratap.cardviews1;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class CardViewDataAdapter extends RecyclerView.Adapter<CardViewDataAdapter.ViewHolder> {
 public String[] mDataset;

 

 // Provide a suitable constructor (depends on the kind of dataset)
 public CardViewDataAdapter(String[] myDataset) {
  mDataset = myDataset;
 }

 // Create new views (invoked by the layout manager)
 @Override
 public CardViewDataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
   int viewType) {
  // create a new view
  View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(
    R.layout.cardview_row, null);

  // create ViewHolder

  ViewHolder viewHolder = new ViewHolder(itemLayoutView);
  return viewHolder;
 }

 // Replace the contents of a view (invoked by the layout manager)
 @Override
 public void onBindViewHolder(ViewHolder viewHolder, int position) {

  // - get data from your itemsData at this position
  // - replace the contents of the view with that itemsData

  viewHolder.tvtinfo_text.setText(mDataset[position].toString());

 }

 // Return the size of your dataset (invoked by the layout manager)
 @Override
 public int getItemCount() {
  return mDataset.length;
 }

 // inner class to hold a reference to each item of RecyclerView
 public static class ViewHolder extends RecyclerView.ViewHolder {

  public TextView tvtinfo_text;

  public ViewHolder(View itemLayoutView) {
   super(itemLayoutView);
   tvtinfo_text = (TextView) itemLayoutView
     .findViewById(R.id.info_text);

  }
 }

}

toolbar.xml
<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimaryDark"/>

activity_main.xml

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

    <!-- A RecyclerView with some commonly used attributes -->

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:scrollbars="vertical" />

</LinearLayout>

cardview_row.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:orientation="horizontal"
    card_view:cardCornerRadius="5dp"

card_view:cardUseCompatPadding="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"

android:background="?android:selectableItemBackground"  >

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="75dp"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textColor="@android:color/black"
            android:textSize="24sp" />
    </RelativeLayout>

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

Link   Source code

ScreenShots