In previous article we learnt about how to use multiple choices in ListView. Today we are going to learn how to enable single choice/radio button in ListView, GridView and in RecyclerView using RadioButton, you’ll configure the ListView to display a radioButton next to each item. You can combine many components like TextView, RadioButton, ImageView, etc. and can make ListView as you require.
In this tutorial, we are going to learn how to enable single choice/radio button in ListView, GridView and in RecyclerView using RadioButton.
1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.
2. Open build.gradle and include this libraries show below:
1 2 |
compile 'com.android.support:design:25.1.0' //Library need for material tabs compile 'com.android.support:recyclerview-v7:25.1.0' //Library need for recycler view |
3. Now create 3 material tabs naming ListView, GridView and RecyclerView. For this you can check this link for reference.
4. After creating tabs lets move to creating xml layouts for individual tabs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"> <ListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_container" /> <include android:id="@+id/bottom_container" layout="@layout/bottom_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"> <GridView android:id="@+id/grid_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_container" android:horizontalSpacing="2dp" android:numColumns="2" android:verticalSpacing="2dp" /> <include android:id="@+id/bottom_container" layout="@layout/bottom_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@+id/bottom_container" /> <include android:id="@+id/bottom_container" layout="@layout/bottom_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout> |
5. In all the above xml layouts i am using one common layout i.e. bottom_container.xml. Lets create the common layout xml, this layout contains two buttons for implementing actions over selected row.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?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="wrap_content" android:gravity="center" android:orientation="horizontal"> <Button android:id="@+id/show_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/show" android:textColor="@android:color/black" android:textSize="14sp" /> <Button android:id="@+id/delete_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="@string/delete" android:textColor="@android:color/black" android:textSize="14sp" /> </LinearLayout> |
6. Now lets create java classes for all the above three xml files.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
package com.listradiobutton_demo.main; import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ListView; import com.listradiobutton_demo.R; import com.listradiobutton_demo.adapter.GridListAdapter; import java.util.ArrayList; /** * Created by sonu on 08/02/17. */ public class ListViewFragment extends Fragment { private Context context; private GridListAdapter adapter; private ArrayList<String> arrayList; public ListViewFragment() { } @Override public void onAttach(Context context) { super.onAttach(context); this.context = context; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.list_view_fragment, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); loadListView(view); onClickEvent(view); } private void loadListView(View view) { ListView listView = (ListView) view.findViewById(R.id.list_view); arrayList = new ArrayList<>(); for (int i = 1; i <= 50; i++) arrayList.add("ListView Items " + i); adapter = new GridListAdapter(context, arrayList, true); listView.setAdapter(adapter); } private void onClickEvent(View view) { view.findViewById(R.id.show_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Get the selected position adapter.getSelectedItem(); } }); view.findViewById(R.id.delete_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Delete the selected position adapter.deleteSelectedPosition(); } }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
package com.listradiobutton_demo.main; import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.GridView; import com.listradiobutton_demo.R; import com.listradiobutton_demo.adapter.GridListAdapter; import java.util.ArrayList; /** * Created by sonu on 08/02/17. */ public class GridViewFragment extends Fragment { private Context context; private GridListAdapter adapter; private ArrayList<String> arrayList; public GridViewFragment() { } @Override public void onAttach(Context context) { super.onAttach(context); this.context = context; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.grid_view_fragment, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); loadGridView(view); onClickEvent(view); } private void loadGridView(View view) { GridView gridView = (GridView) view.findViewById(R.id.grid_view); arrayList = new ArrayList<>(); for (int i = 1; i <= 50; i++) arrayList.add("GridView Items " + i); adapter = new GridListAdapter(context, arrayList, false); gridView.setAdapter(adapter); } private void onClickEvent(View view) { view.findViewById(R.id.show_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Get the selected position adapter.getSelectedItem(); } }); view.findViewById(R.id.delete_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Delete the selected position adapter.deleteSelectedPosition(); } }); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
package com.listradiobutton_demo.main; import android.content.Context; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.listradiobutton_demo.R; import com.listradiobutton_demo.adapter.RecyclerViewAdapter; import java.util.ArrayList; /** * Created by sonu on 08/02/17. */ public class RecyclerViewFragment extends Fragment { private Context context; private RecyclerViewAdapter adapter; private ArrayList<String> arrayList; public RecyclerViewFragment() { } @Override public void onAttach(Context context) { super.onAttach(context); this.context = context; } @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.recycler_view_fragment, container, false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); populateRecyclerView(view); onClickEvent(view); } private void populateRecyclerView(View view) { RecyclerView recyclerView = (RecyclerView) view.findViewById(R.id.recycler_view); recyclerView.setHasFixedSize(true); LinearLayoutManager linearLayoutManager = new LinearLayoutManager(context); recyclerView.setLayoutManager(linearLayoutManager); arrayList = new ArrayList<>(); for (int i = 1; i <= 50; i++) arrayList.add("RecyclerView Items " + i);//Adding items to recycler view adapter = new RecyclerViewAdapter(context, arrayList); recyclerView.setAdapter(adapter); } private void onClickEvent(View view) { view.findViewById(R.id.show_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Get the selected position adapter.getSelectedItem(); } }); view.findViewById(R.id.delete_button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //Delete the selected position adapter.deleteSelectedPosition(); } }); } } |
7. Now after creating all fragment classes we have to create Adapters for ListView, GridView and RecyclerView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
package com.listradiobutton_demo.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.RadioButton; import android.widget.TextView; import android.widget.Toast; import com.listradiobutton_demo.R; import java.util.ArrayList; /** * Created by sonu on 08/02/17. */ public class GridListAdapter extends BaseAdapter { private Context context; private ArrayList<String> arrayList; private LayoutInflater inflater; private boolean isListView; private int selectedPosition = -1; public GridListAdapter(Context context, ArrayList<String> arrayList, boolean isListView) { this.context = context; this.arrayList = arrayList; this.isListView = isListView; inflater = LayoutInflater.from(context); } @Override public int getCount() { return arrayList.size(); } @Override public Object getItem(int i) { return arrayList.get(i); } @Override public long getItemId(int i) { return i; } @Override public View getView(final int i, View view, ViewGroup viewGroup) { ViewHolder viewHolder; if (view == null) { viewHolder = new ViewHolder(); //inflate the layout on basis of boolean if (isListView) view = inflater.inflate(R.layout.list_custom_row_layout, viewGroup, false); else view = inflater.inflate(R.layout.grid_custom_row_layout, viewGroup, false); viewHolder.label = (TextView) view.findViewById(R.id.label); viewHolder.radioButton = (RadioButton) view.findViewById(R.id.radio_button); view.setTag(viewHolder); } else viewHolder = (ViewHolder) view.getTag(); viewHolder.label.setText(arrayList.get(i)); //check the radio button if both position and selectedPosition matches viewHolder.radioButton.setChecked(i == selectedPosition); //Set the position tag to both radio button and label viewHolder.radioButton.setTag(i); viewHolder.label.setTag(i); viewHolder.radioButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { itemCheckChanged(v); } }); viewHolder.label.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { itemCheckChanged(v); } }); return view; } //On selecting any view set the current position to selectedPositon and notify adapter private void itemCheckChanged(View v) { selectedPosition = (Integer) v.getTag(); notifyDataSetChanged(); } private class ViewHolder { private TextView label; private RadioButton radioButton; } //Return the selectedPosition item public String getSelectedItem() { if (selectedPosition != -1) { Toast.makeText(context, "Selected Item : " + arrayList.get(selectedPosition), Toast.LENGTH_SHORT).show(); return arrayList.get(selectedPosition); } return ""; } //Delete the selected position from the arrayList public void deleteSelectedPosition() { if (selectedPosition != -1) { arrayList.remove(selectedPosition); selectedPosition = -1;//after removing selectedPosition set it back to -1 notifyDataSetChanged(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
package com.listradiobutton_demo.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.RadioButton; import android.widget.TextView; import android.widget.Toast; import com.listradiobutton_demo.R; import java.util.ArrayList; /** * Created by sonu on 19/09/16. */ public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.RecyclerViewHolder> { static class RecyclerViewHolder extends RecyclerView.ViewHolder { private TextView label; private RadioButton radioButton; RecyclerViewHolder(View view) { super(view); label = (TextView) view.findViewById(R.id.label); radioButton = (RadioButton) view.findViewById(R.id.radio_button); } } private ArrayList<String> arrayList; private Context context; private int selectedPosition = -1; public RecyclerViewAdapter(Context context, ArrayList<String> arrayList) { this.arrayList = arrayList; this.context = context; } @Override public RecyclerViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) { View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_custom_row_layout, viewGroup, false); return new RecyclerViewHolder(v); } @Override public void onBindViewHolder(final RecyclerViewHolder holder, final int i) { holder.label.setText(arrayList.get(i)); //check the radio button if both position and selectedPosition matches holder.radioButton.setChecked(i == selectedPosition); //Set the position tag to both radio button and label holder.radioButton.setTag(i); holder.label.setTag(i); holder.radioButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { itemCheckChanged(v); } }); holder.label.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { itemCheckChanged(v); } }); } //On selecting any view set the current position to selectedPositon and notify adapter private void itemCheckChanged(View v) { selectedPosition = (Integer) v.getTag(); notifyDataSetChanged(); } @Override public int getItemCount() { return (null != arrayList ? arrayList.size() : 0); } //Return the selectedPosition item public String getSelectedItem() { if (selectedPosition != -1) { Toast.makeText(context, "Selected Item : " + arrayList.get(selectedPosition), Toast.LENGTH_SHORT).show(); return arrayList.get(selectedPosition); } return ""; } //Delete the selected position from the arrayList public void deleteSelectedPosition() { if (selectedPosition != -1) { arrayList.remove(selectedPosition); selectedPosition = -1;//after removing selectedPosition set it back to -1 notifyDataSetChanged(); } } } |
In both the above adapter the common code to select row is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//On selecting any view set the current position to selectedPosition and notify adapter private void itemCheckChanged(View v) { selectedPosition = (Integer) v.getTag(); notifyDataSetChanged(); } //Return the selectedPosition item public String getSelectedItem() { if (selectedPosition != -1) { Toast.makeText(context, "Selected Item : " + arrayList.get(selectedPosition), Toast.LENGTH_SHORT).show(); return arrayList.get(selectedPosition); } return ""; } //Delete the selected position from the arrayList public void deleteSelectedPosition() { if (selectedPosition != -1) { arrayList.remove(selectedPosition); selectedPosition = -1;//after removing selectedPosition set it back to -1 notifyDataSetChanged(); } } |
8. Finally all things done. Now you can also make your any type of single choice list view.
Thanks. 🙂
Subscribe to us and get the latest news.