Saturday, 23 January 2016

Interactive ListView using Recyclerview with CheckBox and SeekBar

Introduction : 

In this tutorial we are going to see RecyclerView with CheckBox and SeekBar. RecyclerView contains number of items, when clicking checkbox the SeekBar percentage is automatically increased. If the number of CheckedBox items are increased then the SeekBar values are adjusted according to the user interaction.




 


Now let us start with the coding..


First create a xml file that holds the RecycleView


activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical" >     <android.support.v7.widget.RecyclerView         android:id="@+id/my_recycler_view"         android:layout_width="match_parent"         android:layout_height="0dp"         android:layout_margin="5dp"         android:layout_weight="1"         android:scrollbars="vertical" />     <Button         android:id="@+id/btnShow"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_margin="5dp"         android:text="Show Selected"         android:background="@color/colorPrimary"         android:textColor="#ffffff"/> </LinearLayout>
Another xml for row item
row_item.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:layout_margin="2dp">     <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:weightSum="1">         <LinearLayout             android:layout_width="0dp"             android:layout_height="wrap_content"             android:layout_weight="0.8">             <RelativeLayout                 android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:padding="5dp">                 <TextView                     android:id="@+id/title"                     style="@style/TextAppearance.AppCompat.Body1"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:singleLine="true"                     android:padding="5dp"                     android:text="unit"                     android:textColor="@android:color/black"/>                 <RelativeLayout                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:layout_below="@+id/title"                     android:gravity="center">                 <TextView                     android:id="@+id/seekbar_count"                     style="@style/TextAppearance.AppCompat.Body1"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:padding="5dp"                     android:singleLine="true"                     android:text="10"                     android:textColor="@android:color/black"/>                 <SeekBar                     android:id="@+id/range"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:layout_centerVertical="true"                     android:layout_toRightOf="@+id/seekbar_count"/>             </RelativeLayout>             </RelativeLayout>         </LinearLayout>         <LinearLayout             android:layout_width="0dp"             android:layout_height="match_parent"             android:layout_weight="0.2">             <CheckBox                 android:id="@+id/chk_item"                 android:layout_width="wrap_content"                 android:layout_height="match_parent"                 android:layout_gravity="center_vertical"                 android:padding="5dp"/>         </LinearLayout>     </LinearLayout> </android.support.v7.widget.CardView>
Implement a Bean Class to hold the item values of Recyclerview
Units.class
public class Units implements Serializable {

    private static final long serialVersionUID = 1L;
    private String StrUnitName;
    private int NoOfquestions;
    private boolean isSelected;

    public Units() {
    }

    public Units(String strUnitName, int noOfquestions, boolean isSelected) {
        StrUnitName = strUnitName;
        NoOfquestions = noOfquestions;
        this.isSelected = isSelected;
    }

    public static long getSerialVersionUID() {
        return serialVersionUID;
    }

    public String getStrUnitName() {
        return StrUnitName;
    }

    public void setStrUnitName(String strUnitName) {
        StrUnitName = strUnitName;
    }

    public int getNoOfquestions() {
        return NoOfquestions;
    }

    public void setNoOfquestions(int noOfquestions) {
        NoOfquestions = noOfquestions;
    }

    public boolean isSelected() {
        return isSelected;
    }

    public void setIsSelected(boolean isSelected) {
        this.isSelected = isSelected;
    }
} 
Finally create a main class
MainActivity.class
public class MainActivity extends AppCompatActivity{     private RecyclerView mRecyclerView;     private RecyclerView.Adapter mAdapter;     private List<Units> unitsList;     private Button btnSelection;     private int Max =100;     int count =0;     String checkedItems = "";     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         btnSelection = (Button) findViewById(R.id.btnShow);         unitsList = new ArrayList<Units>();         for (int i = 1; i < 11; i++) {             Units st = new Units("Unit"+i,0,false);             unitsList.add(st);         }         mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);         // use this setting to improve performance if you know that changes         // in content do not change the layout size of the RecyclerView         mRecyclerView.setHasFixedSize(true);         // use a linear layout manager         mRecyclerView.setLayoutManager(new LinearLayoutManager(this));         // create an Object for Adapter         mAdapter = new CardViewDataAdapter(unitsList);         // set the adapter object to the Recyclerview         mRecyclerView.setAdapter(mAdapter);         btnSelection.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 String data = "";                 List<Units> stList = ((CardViewDataAdapter) mAdapter).getSelectedUnitsist();                 for (int i = 0; i < stList.size(); i++) {                     Units singleUnits = stList.get(i);                     if (singleUnits.isSelected() == true) {                         data = data + "\n" + singleUnits.getStrUnitName()+ " , " + singleUnits.getNoOfquestions();                     }                 }                 Toast.makeText(MainActivity.this,"Selected Units with ranges: \n" +data , Toast.LENGTH_LONG).show();             }         });     }     /*Adapter for the RecycleView*/     public class CardViewDataAdapter extends RecyclerView.Adapter<CardViewDataAdapter.ViewHolder> {         private List<Units> stList;         public CardViewDataAdapter(List<Units> units) {             this.stList = units;         }         // Create new views         @Override         public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {             // create a new view             View itemLayoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.cardview_row, null);             // create ViewHolder             ViewHolder viewHolder = new ViewHolder(itemLayoutView);             return viewHolder;         }         @Override         public void onBindViewHolder(final ViewHolder viewHolder, final int position) {             final int pos = position;             viewHolder.tvName.setText(stList.get(position).getStrUnitName());             viewHolder.tvValues.setText(stList.get(position).getNoOfquestions() + "");             viewHolder.chkSelected.setChecked(stList.get(position).isSelected());             viewHolder.seekBar.setProgress(stList.get(position).getNoOfquestions());             viewHolder.chkSelected.setTag(stList.get(position));
            viewHolder.chkSelected.setOnClickListener(new View.OnClickListener() {                 public void onClick(View v) {                     checkedItems = "";                     count = 0;                     CheckBox cb = (CheckBox) v;                     Units contact = (Units) cb.getTag();                     contact.setIsSelected(cb.isChecked());                     for (int i = 0; i < stList.size(); i++) {                         if (stList.get(i).isSelected()) { //                            checkedItems = checkedItems + stList.get(i).getStrUnitName() + ",";                             count++;                         }                     } //                    Toast.makeText(v.getContext(), checkedItems, Toast.LENGTH_LONG).show();                     int questionPerUnit = 0;                     int reminder = 0;                     if (count != 0) {                         questionPerUnit = Max / count;                         reminder = Max % count;                     }                     for (int i = 0; i < stList.size(); i++) {                         if (stList.get(i).isSelected()) {                             stList.get(i).setNoOfquestions(questionPerUnit);                         } else {                             stList.get(i).setNoOfquestions(0);                         }                     }                     for (int i = 0; i < reminder; i++) {                         if (stList.get(i).isSelected()) {                             int previous = stList.get(i).getNoOfquestions();                             stList.get(i).setNoOfquestions(previous + 1);                         }                     }                     notifyDataSetChanged();                 }             });
            viewHolder.seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {                 public void onStopTrackingTouch(SeekBar bar) {                     int value = bar.getProgress();                     stList.get(position).setNoOfquestions(value);                 }                 public void onStartTrackingTouch(SeekBar bar) {                 }                 public void onProgressChanged(SeekBar bar, int paramInt, boolean paramBoolean) {
                    //update textview while dragging seekbar                     viewHolder.tvValues.setText("" + paramInt); // here in textView the percent will be shown                 }             });         }         // Return the size arraylist         @Override         public int getItemCount() {             return stList.size();         }
        public class ViewHolder extends RecyclerView.ViewHolder {             public TextView tvName;             public TextView tvValues;             public CheckBox chkSelected;             public SeekBar seekBar;             public ViewHolder(View itemLayoutView) {                 super(itemLayoutView);                 tvName = (TextView) itemLayoutView.findViewById(R.id.title);                 tvValues = (TextView) itemLayoutView.findViewById(R.id.seekbar_count);                 chkSelected = (CheckBox) itemLayoutView.findViewById(R.id.chk_item);                 seekBar = (SeekBar) itemLayoutView.findViewById(R.id.range);                 seekBar.setMax(Max);             }         }         // method to access in activity after updating selection         public List<Units> getSelectedUnitsist() {             return stList;         }     } }
That all..!
Now You can download the source Here

No comments:

Post a Comment