--

Thursday, 9 February 2017

Flexi-RecyclerView

The more advanced and flexible features of Listview is called Recycler View. A large amount of data sets is loaded & scrolled very efficiently by maintaining a limited number of views. I have developed the FelxiRecycler application which loads tourist places in Recycler view customized with CardView widget.
A layout manager positions item views inside a RecyclerView and determines when to reuse item views that are no longer visible to the user. I am loading UI based on user choice either cards or grids.



Step 1: Add required library in gradle
compile 'com.android.support:support-annotations:23.2.0'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:design:23.2.0'
compile 'com.android.support:cardview-v7:23.2.0'
compile 'com.android.support:recyclerview-v7:23.2.0'
compile 'com.mcxiaoke.volley:library-aar:1.0.1'
Step 2: Designing layout for custom cards
Add RecyclerView to the main layout & designing custom CardView to load show datasets efficiently.
//Initializing ViewsrecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setHasFixedSize(true);
layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
Step 3: Creating & loading data into RecyclerAdapter
We have to create View Holder to fetch UI elements from holder and get data from ArrayList based on position then assign values to UI elements in onBindViewHolder method.
@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(
            R.layout.tourist_place_list, parent, false);
    v.setOnClickListener(new PlacesOnClickListener());
    ViewHolder viewHolder = new ViewHolder(v);
    return viewHolder;
}
@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {

    TouristPlaceModal place =  touristPlaceList.get(position);

    imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader();
    imageLoader.get(place.imageUrl, ImageLoader.getImageListener(holder.imageViewPlace,
            R.drawable.default_pic, android.R.drawable.ic_dialog_alert));

    holder.imageViewPlace.setImageUrl(place.imageUrl, imageLoader);
    holder.textViewPlaceName.setText(place.name);
    holder.textViewPlaceRank.setText(String.valueOf(place.rank));
    holder.textViewPlaceCity.setText(place.city);
    holder.textViewPlaceBestTime.setText(place.bestTime);
    holder.textViewPlaceHoursSpent.setText(place.hoursSpent+" hours");
}
Step 4:  Creating & loading data into GridAdapter
if (view == null) {
    LayoutInflater inflater = (LayoutInflater) context.getSystemService
            (Context.LAYOUT_INFLATER_SERVICE );
    view = inflater.inflate(R.layout.tourist_place_grid_raw, parent, false);
    gridViewImageHolder = new ViewHolder();
    gridViewImageHolder.imageViewPlace = (NetworkImageView)
            view.findViewById(R.id.networkImgPlace);
    gridViewImageHolder.textViewPlaceName= (TextView)
            view.findViewById(R.id.txtPlaceName);
    gridViewImageHolder.textViewPlaceCity= (TextView)
            view.findViewById(R.id.txtCity);
    view.setTag(gridViewImageHolder);
} else {
    gridViewImageHolder = (ViewHolder) view.getTag();
}
Reinitializing ViewHolder if convertView is null. Loading image url into imageView using Volley imageLoader.
TouristPlaceModal place =  touristPlaceList.get(position);
imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader();
if(place.imageUrl!=null){
    imageLoader.get(place.imageUrl,
            ImageLoader.getImageListener(gridViewImageHolder.imageViewPlace,
            R.drawable.default_pic, android.R.drawable.ic_dialog_alert));
    gridViewImageHolder.imageViewPlace.setImageUrl(place.imageUrl, imageLoader);
}
Step 5: Initializing adapter
//Finally initializing our adapteradapter = new CardviewAdapter(listPlaces,recyclerView, this);
//Adding adapter to recyclerviewrecyclerView.setAdapter(adapter);

adapterGrid=new GridAdapter(listPlaces,this);
gridviewPlaces.setAdapter(adapterGrid);
I have uploaded the complete source code in Github,
https://github.com/JayaprakashR-Zealot/Knowledge-Circle---Android/tree/master/FlexiListview

Happy Coding !!!
Cheers!

No comments:

Post a Comment