Category Archives: Tutorials

Advance Custom ListView Using RecycleView

By | Tutorials | No Comments

In this tutorial we will go through about how to show a list with different view and number of view in each row using the RecycleView that is an improved ListView created by google.

Our objective is to achieve the following view:

1        2


As you can see above in the screen shot in the first row we have only one view, in the second we have two then in the third we have one … etc.

So in each row we have different number of view and it is not just a different number of view but also it has different view for example the height of the two views in the second is less than the view in first row also the text size and the padding.

Before we start writing our code we need to add the RecycleView and the CardView libraries in the dependencies in the build.gradle file because we are using these in our project.

So you will need to compile the following:


Now we will create our views in xml:

1-    activity_main.xml:
This is our main view and we will only need the RecyclerView in this file to display the rows.


2-    row_card.xml:
This is an item view to be displayed in the RecyclerView and take the whole row.


3-    row_card_2.xml:
We also need another view same as the previous one but smaller display two of it in one row.


We have finished creating our view now we will create a model for each item in the list.

As the screen shot shows we only have two data the title and the image and because this only a tutorial we will get our image from the draw able folder so we only need the id number of the image.


Next we will create our view holder class the purpose of this class is to get the view only once then hold it and use it when needed as the user scroll up and down and that will help to increase the performance when scrolling.


Now we will create our card adapter to integrate the data with the view.


In this class we have a contracture that get a list of CardData model to set these data to the views and also we get the context to be able to show a toast message when we click on the image.

In the getItemCount method we returned the size of the CardData list and that says to the adapter that we want to display number of view items in the list that is equal to our list of CardData.

Now for our purpose we want to display different view depend on the data position so the first data will be displayed in row_card.xml then the next two data will be displayed in row_card_2.xml then again we will display the data after the two in row_card.xml and so on.

In this case we can override getItemViewType to tell the adapter what type of view we want to display depend on the position by returning a specific number.

So we check if the position is divided by three or not if it is true we will return 0 and 0 in our case mean that we want to row_card.xml otherwise we will return 1 and that will mean we want display row_card_2.xml.

In onCreateViewHolder method we will create the view for each item. In this method we have two parameter the parent where the new view will be added into it after it is bound to adapter position and the viewType and that is number that we have returned in getItemViewType method.

In this method we need to return a new view holder (in our case new CardViewHolder) with the view we want to display as a parameter.

So we will check if the viewType is equal to 0 then we will inflate row_card.xml otherwise it will be 1 then we will inflate row_card_2.xml

The last method we will discuss is the onBindViewHolder here in this method we will get in our hand on the view holder and its position.

In this method we can modify the view and edit it but all what we want is to set the data by getting a CardData from cardDataList depend on the position and then set the data to the view. We also have set an onClickListener to the image to show a message with the title when user click on the image.

The last thing to do will be in our Main Activity class were we will create the data model and set it to our adapter then set it in the RecycleView.


First of all we get our RecyclerView from the xml and initiate setHasFixedSize to true to increase performance because our RecyclerView size will not be changed.

Then we created a GridLayoutManager to our RecyclerView.

We did not Create LinearLayoutManager because if we do so then every row will only hold one item view so we will not have two image in single row as in the screen shot so we will use GridLayoutManager instead with 2 column and make it in vertical.

But now each row will hold 2 view by default so if we stop there everything will be missed up and we won’t have a one view in one row so we need to tell the GridLayoutManager when we want the item to take the whole row (2 column) and when we want it to take the half row (1 column).

So we setSpanSizeLookUp to our GridLayoutManager and override getSpanSize method in this method it will give us the position of the item and will return the size number of the item.

In our case the number of column in GridLayoutManager is 2 and that will be our max size we can return in getSpanSize method so what we want now is to return 2 when we want the item view to take the two column (whole row) and return 1 when we want the view to take one column (half row) so we will use the same condition we used in the adapter that is if the number is divided by 3 then it will take the whole view because we will view row_card.xml in this case otherwise it will only take half of the view.

Finally we set the layout manager to our RecyclerView, create an adapter with CardData list and set the adapter to our RecyclerView to show our list in the app.



2015-08-31 10_36_48-Classroom - Udacity

App Monetization Best Practices Course (Free)

By | Tutorials | No Comments

Ever wondered how to put a strategy for getting money out of your apps? Google and Udacity partnered to provide this free course to shed light on insights from leading startups in multiple industries, guide you to plan for a successful monetization plan for your App or Game.

In the Course, you will learn :

  • Choose & implement a monetization strategy relevant to your product
  • Set performance metrics & monitor the success of a strategy
  • Know when it might be time to change methods

It is following four phases :

  1. Introduction
  2. Strategies
  3. Plan Implementation
  4. Model optimization

To join and start learning the free course, you can click here