Android Basics – Learn how to handle the user clicks in a RecyclerView

You are familiar with how to respond to user clicks in a ListView using an OnItemClickListener. RecyclerView does not have a similar set of built in functionality so you will have to write some code to handle user clicks.

The code you will add will be in the Adapter’s onBindViewHolder. You will also add an interface, similar to the ay you did for Fragment interaction.

Follow the steps below:

Add a Listener interface to the Adapter.

public static interface Listener{
    public void onClick(int position);
}

Add a setListener method. This method will be called from the Activity.

public void setListener(Listener listener) {
    mListener = listener;
}

Add setOnClickListener

cardView.setOnClickListener(new View.OnClickListener(){
    @Override
    public void onClick(View view){
        if(mListener != null){
            mListener.onClick(position);
        }
    }
});

In Activity class set the Listener defined in Adapter.

SampleAdapter adapter = new SampleAdapter(inputData);
adapter.setListener(new SampleAdapter.Listener() {
    @Override
    public void onClick(int position) {
        //Add code here
    }
});

Source code is available here

Android Basics – Using Layout Manager with Recycler View to arrange Views

The advantage of using a RecyclerView over ListView is that you get the option to arrange how the views display.

You have the option to display views in a linear list, a grid or a staggered grid.

To use the LayoutManager you need to add the following code

LinearLayoutManager manager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(manager);

Source code is available here

Android Basics – Learn how to create Recycler View

So far you have created an Adapter and added a View Holder and also code to onBindViewHolder.

Now it’s time to create a Recycler View which will use this Adapter. It will also pass data to this Adapter.

In order to do this you can create a new Activity, for the purpose of understanding. Let’s call this MaterialActivity. You will call this from the MainActivity on click of a button.

In the layout file for the new Activity you need to add the RecyclerView.

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/sample_recycler"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:scrollbars="vertical"
    />

In the Activity class you need to set the Adapter.

public class MaterialActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_material);

        String[] inputData = {"Hello Sam", "Hello John", "Hello Riki"};

        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.sample_recycler);

        SampleAdapter adapter = new SampleAdapter(inputData);
        recyclerView.setAdapter(adapter);
    }

}

Source code is available here.

In the next Article we will take this further.

Android Basics – Learn how to use the onBindViewHolder method to bind the data to the View

So far you have created an Adapter for the RecyclerView. You have also added a View Holder.

In order to display data you need to write code to the onBindViewHolder method. This method will map the data to the Card View.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    CardView cardView = holder.mCardView;
    TextView cardText = (TextView) cardView.findViewById(R.id.cardTextId);
    cardText.setText(textData[position]);
}

Source code is available here.

Android Basics – Adding a ViewHolder to the RecyclerViewAdapter

When you create a RecyclerView Adapter then you need to create a view holder by extending the RecyclerView.ViewHolder class.

Like the name suggests a ViewHolder is used to hold and display the View. Recycler view maintains a set of these views.

The number of these holders depends on the size of the view.

When the Recycler view is first constructed it builds this set by calling the onCreateViewHolder() method.

public static class ViewHolder extends RecyclerView.ViewHolder{
    CardView mCardView;
    public ViewHolder(View itemView) {
        super(itemView);
        mCardView = (CardView) itemView;
    }
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    CardView cardView = (CardView) LayoutInflater.from(parent.getContext())
            .inflate(R.layout.card_view_sample,parent,false);

    return new ViewHolder(cardView);
}

Source Code is available here

Android Basics – Create the basic Adapter for RecyclerView

To create a basic Adapter which can be used by the RecyclerView create a new class and extend RecyclerView.Adapter

Once you do this you need to override the following three methods

  • The getItemCount method is used to return the number of items in the data set.
  • The onCreateViewHolder method is used to create the views.
  • The onBindViewHolder method is used to bind views to data.
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    return null;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

}

@Override
public int getItemCount() {
    return 0;
}

Source Code is available here

Android Basics – An introduction to the Recycler View Adapter

Recycler View is an efficient and an advanced version of a List View. It can be used to display a list of Card Views.

This widget is a container for displaying large data sets that can be scrolled very efficiently by maintaining a limited number of views.

Courtesy – http://developer.android.com/training/material/lists-cards.html

In order to do this it uses an Adapter and a Layout Manager. The Adapter needs to be created by you and should be a sub class of RecyclerView.Adapter

The Adapter is responsible to create and configure the View.

Android Basics – Learn how to create a Card View

The last Article introduced you to Material Design basics. In this Article you will learn how to create a Card View.

Steps to add a CardView

  • Add support libraries – com.android.support.cardview and recyclerview
  • Create a layout xml file for the card view.
  • Refer to the below code snippet
<?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:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="4dp">

    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="fill_parent"
                  android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello Card View"
            android:layout_margin="5dp"/>

    </LinearLayout>

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

Source Code is available here

Android Basics – An Introduction to Material Design

Material Design was launched with Android 5.0 (API level 21). The purpose being to provide consistent look and feel to all the Apps. So your App looks consistent with a Google App like Gmail.

It uses Animation and 3D effects.

Android provides the following elements for you to build material design apps:

  1. A new theme – Provides a new style for your App.
  2. New widgets for complex views
  3. New APIs for custom shadows and animations

Two of the most important Material Design widgets are Recycler and Card Views.

RecyclerView widget is a more pluggable version of ListView that supports different layout types and provides performance improvements.

CardView widget lets you display important pieces of information inside cards that have a consistent look and feel.

In addition to the X and Y properties, views in Android now have a Z property. Views with higher Z values cast bigger shadows and appear on top of other views.
To learn more about the principles of Material Design visit the following URL

Source : Android Documentation

Calling the Bound Service from Main Activity

In the last Article you learnt how to bind MainActivity with BoundService.

Time for you to call the displayDistance method to display the distance traveled. You can create a new method which will return the distance computed. This method will create a Handler and invoke the Service every second.

private void displayDistance() {
    final Handler handler = new Handler();
    handler.post(new Runnable() {
        @Override
        public void run() {
            double distance = 0;
            if(mDistanceTraveledService != null){
                distance = mDistanceTraveledService.getDistanceTraveled();
            }
            distanceTraveled.setText(String.valueOf(distance));
            handler.postDelayed(this, 1000);
        }
    });
}

Next add a TextView in the Layout XML file to display this.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:layout_margin="15dp"
    android:id="@+id/displayDistanceId"
    android:text="100metres"/>

Full source code is available here