Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Add Header to RecyclerView Using ViewType Property in Android

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.38k
    Comment on it

    We all Known that scrollable view does not work inside another scrollable View, so to scroll some views with recyclerView for that we have to use Header property.

    There are many ways to Add Header to RecyclerView but in this tutorial I will guide you to add header to recyclerview using ViewType property.

     

     

     

     

    Lets see how:

     

    Custom recyclerView adapter

    The adapter will be used to bind the data source to HeaderView and ItemView holder. Adding header to android recyclerview will be involved creating two different android ViewHolder instances. One for the HeaderView and the other for the ItemView.

     

    onCreateViewHolder(ViewGroup parent, int viewType) : In onCreateViewHolder we will differentiate between the HeaderView and the ItemView. We will create the View object of each instance and pass as an parameter.

     

    onBindViewHolder(RecyclerView.ViewHolder holder, final int position) :

    We check the instance of the holder and use it accordingly.

     

    getItemViewType(int position) : In this method we will set the header in zeroth position and return the respective ViewType. It’s used in the onCreateViewHolder() and onBindViewHolder to inflate the mapped layouts.

     

    getItemCount() : We known this method return the size of list but will return the “size + 1” because zeroth position already reserved the headerView.

     

     

    RecycleViewAdapter.java

    public class RecycleViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
        private static Context mContext;
        private LayoutInflater inflater;
        private List<NewsList> list;
        private NewsFragment newsFragment;
        private static final int TYPE_HEADER = 0;
        private static final int TYPE_ITEM = 1;
        private String title="", content="";
        public RecycleViewAdapter(Context context, List<NewsList> songsList, NewsFragment newsFragment, String title, String content) {
            this.mContext = context;
            this.list = songsList;
            this.title = title;
            this.content = content;
            this.newsFragment = newsFragment;
            inflater = LayoutInflater.from(mContext);
        }
    
        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (viewType == TYPE_HEADER) {
                View view = inflater.inflate(R.layout.header_view, parent, false);
                return new HeaderViewHolder(view);
            }else if (viewType == TYPE_ITEM){
                View view = inflater.inflate(R.layout.item_view, parent, false);
                return new ItemViewHolder(view);
            }
            throw new RuntimeException("No match for " + viewType + ".");
        }
    
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            if (holder instanceof HeaderViewHolder){
                ((HeaderViewHolder)holder).tvTitle.setText(title);
                ((HeaderViewHolder)holder).tvContent.setText(content);
            }
            else if(holder instanceof ItemViewHolder){
                if (position-1 == 0){
                    ((ItemViewHolder)holder).viewBlank.setVisibility(View.VISIBLE);
                }else {
                    ((ItemViewHolder)holder).viewBlank.setVisibility(View.GONE);
                }
                Utility.getInstance().setUserImage(mContext, ((ItemViewHolder)holder).imgVideoCover, list.get(position-1).getThumb_img());
                ((ItemViewHolder)holder).tvVideoTitle.setText(list.get(position-1).getTitle());
                ((ItemViewHolder)holder).tvContent.setText(list.get(position-1).getContent());
    
            }
        }
    
        @Override
        public int getItemCount() {
            if (list != null && list.size() == 0){
               return 1;
            }else {
                return list.size()+1;
            }
        }
    
    
        public void swipList(List<NewsList> songsList, String title, String content) {
            this.list = songsList;
            this.title = title;
            this.content = content;
            notifyDataSetChanged();
        }
    
        @Override
        public int getItemViewType(int position) {
            if (isPositionHeader(position))
                return TYPE_HEADER;
    
            return TYPE_ITEM;
        }
    
        private boolean isPositionHeader(int position) {
            return position == 0;
        }
    }

     

    Adapter Layout files:

    We will create two separate file one for the Headerview and another for Itemview.

    Header_view.xml : It is responsible for the header UI appearance. Create this file inside the layout folder.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:paddingRight="@dimen/ten_dp"
        android:paddingLeft="@dimen/ten_dp"
        android:paddingTop="@dimen/five_dp"
        android:background="@color/color_gray"
        android:layout_height="wrap_content">
        <com.android.exposedpost.fonts.MontserratMediumTextView
            android:layout_width="wrap_content"
            android:id="@+id/tvTitle"
            android:text="jfjhjhf"
            android:textSize="@dimen/fourteen_sp"
            android:textColor="@color/color_black"
            android:layout_height="wrap_content" />
        <com.android.exposedpost.fonts.MontserratRegularTextView
            android:layout_width="wrap_content"
            android:id="@+id/tvContent"
            android:text="kjkjhkfg jhfgd"
            android:textSize="@dimen/twelve_sp"
            android:textColor="@color/color_black"
            android:paddingBottom="@dimen/five_dp"
            android:layout_height="wrap_content" />
    </LinearLayout>

     

    Item_view.xml : It is responsible for the list UI appearance. Create this file inside the layout folder.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_marginBottom="@dimen/ten_dp"
        android:paddingRight="@dimen/ten_dp"
        android:paddingLeft="@dimen/ten_dp"
        android:orientation="vertical"
        android:layout_height="wrap_content">
        <View
            android:layout_width="match_parent"
            android:id="@+id/viewBlank"
            android:layout_height="@dimen/ten_dp"/>
            <RelativeLayout
                android:id="@+id/rlNewsView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <ImageView
                    android:id="@+id/imgVideoCover"
                    android:layout_width="120dp"
                    android:src="@drawable/index"
                    android:scaleType="fitXY"
                    android:paddingBottom="1dp"
                    android:layout_height="90dp" />
                <RelativeLayout
                    android:layout_toRightOf="@+id/imgVideoCover"
                    android:layout_width="match_parent"
                    android:paddingTop="@dimen/five_dp"
                    android:paddingLeft="@dimen/ten_dp"
                    android:layout_height="wrap_content">
                    <com.android.exposedpost.fonts.MontserratMediumTextView
                        android:id="@+id/tvVideoTitle"
                        android:maxLines="2"
                        android:ellipsize="end"
                        android:text="Who let the lap dogs out ft. Arnab Goswami Ravish Kumar"
                        android:textSize="@dimen/sixteen_sp"
                        android:textColor="@color/color_black"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" />
                    <com.android.exposedpost.fonts.MontserratRegularTextView
                        android:layout_below="@+id/tvVideoTitle"
                        android:id="@+id/tvContent"
                        android:layout_width="wrap_content"
                        android:text="Why is rural India so poor?"
                        android:layout_height="wrap_content" />
                </RelativeLayout>
            </RelativeLayout>
        <View
            android:layout_below="@+id/rlNewsView"
            android:layout_width="match_parent"
            android:background="@color/color_darkGray"
            android:layout_height="0.5dp"/>
        <!--</android.support.v7.widget.CardView>-->
    </LinearLayout>

     

    ViewHolder Class’s

    We will create two different ViewHolder class which is hold the header_view and item_view .

    HeaderViewHolder.java : Create file inside the project package folder.

    public class HeaderViewHolder extends RecyclerView.ViewHolder{
        public TextView tvTitle;
        public TextView tvContent;
        public HeaderViewHolder(final View itemView) {
            super(itemView);
            initView();
        }
    
        private void initView() {
            tvTitle =itemView.findViewById(R.id.tvTitle);
            tvContent =itemView.findViewById(R.id.tvContent);
        }
    
    }

    ItemViewHolder.java : Create file inside the project package folder.

    public class ItemViewHolder extends RecyclerView.ViewHolder{
        public View viewBlank;
        public ImageView imgVideoCover;
        public TextView tvVideoTitle, tvContent;
        public ItemViewHolder(View itemView) {
            super(itemView);
            viewBlank = itemView.findViewById(R.id.viewBlank);
            imgVideoCover = itemView.findViewById(R.id.imgVideoCover);
            tvVideoTitle = itemView.findViewById(R.id.tvVideoTitle);
            tvContent = itemView.findViewById(R.id.tvContent);
    
        }
    }

    Find the below Screen short showing with header and after scrolling the RecyclerView

    Add Header to RecyclerView Using ViewType Property in Android

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: