blog.pleb.in

Life of Apps

Showing posts with label RecyclerView. Show all posts
Showing posts with label RecyclerView. Show all posts

CardView Basics

The new version of Google apps such as Google Now and Google News all use cards in their UI.

    Google Now

    Google News

Behind the scenes, it is CardView at work. CardView is part of the android support library and is being used extensively with RecyclerView as a replacement for the ListView.
Just like you would define a list item, you define a cardview in its own xml file such as list_item.xml. The CardView can include Imageviews and Textviews inside a linearlayout. To provide a card-like to the component, CardView includes the following attributes:

app:cardCornerRadius="10sp"app:cardElevation="2sp"app:cardBackgroundColor="#ffffff"app:cardUseCompatPadding="true"

The cardCornerRadius provides for a rounded view for the cards, like rounded rectangles. The cardElevation gives a 3D look to the cards. The cardUseCompatPadding provides uniform padding for the cards across platforms (Lollipop and others).

As with any other UI component, CardView can be added using the findViewById method

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.main_view_row, parent, false);

If you are using this with RecyclerView, the CardView will be typically added inside the RecyclerView adapter's onCreateViewHolder method.
, ,

ListView to RecyclerView - Key Code Changes

There are several good blog posts that explain the concept and theory of a RecyclerView and how to implement it. This post is mainly looks at the key code changes required when moving from ListView to RecyclerView.

1. Add the following to the build.gradle under the app module
    dependencies {
        compile 'com.android.support:recyclerview-v7:23.2.1'
    }

2. Probably the biggest change is the adapter from BaseAdapter or ArrayAdapter to  RecyclerView.Adapter.
public class MainViewAdapter  extends RecyclerView.Adapter<MainViewAdapter.PostViewHolder>

3. If like me you had been using an ArrayAdapter , make the arrays into lists as the new adapter code looks more elegant with them

4. The ViewHolder class becomes a must - it is a public static class inside the adapter that holds the UI items such as TextViews

5. UI items get added to a view holder instead of a View

6. Implement custom ViewHolder classes such as PostViewHolder that I have mentioned above to hold the layout that you need (e.g. TextViews, ImageView etc. that make a row in a list)

7. getView method in adapter is replaced by onCreateViewHolder - holder is created here, onBindViewHolder - UI attributes such as TextView.setText happen here

8. XML layout file has to include a RecyclerView instead of a ListView

9. Usually a CardView is used for the "list row" inside the RecyclerView. It can be made to look like a list with the right tweaks to cardElevation

10. Handling clicks is a big pain as there is no onItemClick like lists and OnItemTouchListener requires implementing several methods. The workaround is to create an interface like ItemClickListener and attach it to a view. This article shows how to do it along with a detailed tutorial on other aspects of the RecyclerView.

, ,