Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Add Dialog box in RecyclerView

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 15.1k
    Comment on it

    In The below example I have created a recyclerview app, in this app I have used CardView. First I have added I have added first RecyclerView , CardView and design support  library in  build.gradle file .Now I have created RecyclerView and FloatingActionButton within Framelayout in main_activity.xml layout, In next step i have created a new dialog.xml layout here I have added TextView, EditView, Button and Spinner. After then in fourth step I have created a new item.xml layout here I have added CardView, ImageView and TextView. Now see programming area here I have created emp class and MyAdapter class within MyAdapter class I have created ViewHolder class and In MainActivity I have used DialogBox fuction. You can see below program it will clearly describe you how to add floating action button with RecyclerView xml layout in android.

    Step(1)-I have added RecyclerView, CardView and design library in build.gradle file -
         

    compile 'com.android.support:recyclerview-v7:22.2.1'
          compile 'com.android.support:cardview-v7:22.2.1'
          compile 'com.android.support:design:22.2.1'
    
    

    Step(2)activity_main.xml -
     

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        tools:context=".MainActivity">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyle_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            android:src="@mipmap/one"
            app:fabSize="normal" />
    
    </FrameLayout>
    
    

    Step(3)Created a new dialog.xml layout-
     

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
              android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:gravity="center"
                android:text="UserName"/>
            <EditText
                android:id="@+id/name"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:inputType="textCapSentences"/>
    
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    
           <TextView
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_weight="0.5"
               android:gravity="center"
               android:text="Address"/>
            <EditText
                android:id="@+id/address"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:inputType="text"/>
    
        </LinearLayout>
    
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_weight="0.5"
                android:gravity="center"
                android:text="Gender"/>
            <Spinner
                android:id="@+id/gender"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:inputType="text"/>
    
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
           <Button
               android:id="@+id/btn_ok"
               android:layout_width="0dp"
               android:layout_height="wrap_content"
               android:layout_gravity="center"
               android:layout_weight="0.5"
               android:gravity="center"
               android:text="Ok"/>
            <Button
                android:id="@+id/btn_cancel"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.5"
                android:text="cancel"/>
    
        </LinearLayout>
    </LinearLayout>

    Step(4)-Created a new item.xml layout-

     

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:cardview="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:id="@+id/image"
                android:padding="5dp"
                android:src="@mipmap/ic_launcher"/>
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
               <TextView
                   android:id="@+id/name"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:text="jhjhjhnjhnjhn"
                   android:textColor="@android:color/holo_blue_dark"/>
                <TextView
                    android:id="@+id/address"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/name"
                    android:text="sfdfsdfsd"
                    android:textColor="@android:color/holo_green_dark"
                    android:textStyle="bold" />
    
    
            </RelativeLayout>
        </LinearLayout>
        </android.support.v7.widget.CardView>

    Step(5)Created Emp class-
      

      public class Emp {
        private String name;
        private String address;
        private boolean gender;
    
        public Emp(String name,boolean gender,String address){
            this.name=name;
            this.gender=gender;
            this.address=address;
    
        }
        public String getName(){
            return  name;
        }
    
        public Boolean isGender(){
            return gender;
        }
    
    
        public String getAddress(){
            return address;
    
        }
    
    }

    Step(6)-Created MyAdapter class-
     

    public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    
        private List<Emp> emp;
        private Activity activity;
    
        public MyAdapter(Activity activity, List<Emp> friends) {
            this.emp = friends;
            this.activity = activity;
        }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
            LayoutInflater inflater =activity.getLayoutInflater();
            View view =inflater.inflate(R.layout.item, viewGroup, false);
            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }
    
        @Override
        public void onBindViewHolder(MyAdapter.ViewHolder viewHolder, int position) {
              viewHolder.name.setText(emp.get(position).getName());
            viewHolder.address.setText(emp.get(position).getAddress());
            if (emp.get(position).isGender()) {
                viewHolder.imageView.setImageResource(R.drawable.male);
            }else {
                viewHolder.imageView.setImageResource(R.drawable.female);
    
            }
            viewHolder.container.setOnClickListener(onClickListener(position));
        }
        private void setDataToView(TextView name,TextView address,ImageView genderIcon,int position){
            name.setText(emp.get(position).getName());
            address.setText(emp.get(position).getAddress());
            if (emp.get(position).isGender()) {
                genderIcon.setImageResource(R.drawable.male);
            }else{
                genderIcon.setImageResource(R.drawable.female);
    
            }
    
        }
    
        @Override
        public int getItemCount() {
            return (null !=emp?emp.size():0);
        }
        private View.OnClickListener onClickListener(final int position){
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    final Dialog dialog = new Dialog(activity);
                    dialog.setContentView(R.layout.item);
                    dialog.setTitle("Position" + position);
                    dialog.setCancelable(true);
    
                    TextView name =(TextView)dialog.findViewById(R.id.name);
                    TextView address=(TextView)dialog.findViewById(R.id.address);
                    ImageView icon = (ImageView) dialog.findViewById(R.id.image);
                    setDataToView(name,address,icon,position);
                    dialog.show();
                }
            };
        }
    
        public class ViewHolder extends RecyclerView.ViewHolder {
            private ImageView imageView;
            private TextView name;
            private  TextView address;
            private   View container;
    
            public ViewHolder(View view) {
                super(view);
                imageView = (ImageView) view.findViewById(R.id.image);
                name = (TextView) view.findViewById(R.id.name);
                address = (TextView) view.findViewById(R.id.address);
                container = view.findViewById(R.id.card_view);
            }
        }
    }

    Step(7)MainActivity-
     

    public class MainActivity extends AppCompatActivity {
    
        private RecyclerView recyclerView;
        private MyAdapter adapter;
        private ArrayList<Emp>empArrayList;
        private FloatingActionButton fab;
        private  boolean gender;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            empArrayList = new ArrayList<>();
    
            recyclerView = (RecyclerView) findViewById(R.id.recyle_view);
            fab = (FloatingActionButton) findViewById(R.id.fab);
    
            recyclerView.setHasFixedSize(true);
    
            LinearLayoutManager layoutManager = new LinearLayoutManager(this);
            recyclerView.setLayoutManager(layoutManager);
    
    
            setRecyclerViewData(); //adding data to array list
            adapter = new MyAdapter(this, empArrayList);
            recyclerView.setAdapter(adapter);
    
            fab.setOnClickListener(onAddingListener());
        }
    
        private void setRecyclerViewData() {
            empArrayList.add(new Emp("RajShekhar", false, "Name Of Employee"));
            empArrayList.add(new Emp("Kanpur", true, "Address"));
    
        }
    
        private View.OnClickListener onAddingListener() {
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    final Dialog dialog = new Dialog(MainActivity.this);
                    dialog.setContentView(R.layout.dialog); //layout for dialog
                    dialog.setTitle("Add a new friend");
                    dialog.setCancelable(false); //none-dismiss when touching outside Dialog
    
                    // set the custom dialog components - texts and image
                    EditText name = (EditText) dialog.findViewById(R.id.name);
                    EditText job = (EditText) dialog.findViewById(R.id.address);
                    Spinner spnGender = (Spinner) dialog.findViewById(R.id.gender);
                    View btnAdd = dialog.findViewById(R.id.btn_ok);
                    View btnCancel = dialog.findViewById(R.id.btn_cancel);
    
                    //set spinner adapter
                    ArrayList<String> gendersList = new ArrayList<>();
                    gendersList.add("Male");
                    gendersList.add("Female");
                    ArrayAdapter<String> spnAdapter = new ArrayAdapter<String>(MainActivity.this,
                            android.R.layout.simple_dropdown_item_1line, gendersList);
                    spnGender.setAdapter(spnAdapter);
    
                    //set handling event for 2 buttons and spinner
                    spnGender.setOnItemSelectedListener(onItemSelectedListener());
                    btnAdd.setOnClickListener(onConfirmListener(name, job, dialog));
                    btnCancel.setOnClickListener(onCancelListener(dialog));
    
                    dialog.show();
                }
            };
        }
    
        private AdapterView.OnItemSelectedListener onItemSelectedListener() {
            return new AdapterView.OnItemSelectedListener() {
                @Override
                public void onItemSelected(AdapterView parent, View view, int position, long id) {
                    if (position == 0) {
                        gender = true;
                    } else {
                        gender = false;
                    }
                }
    
                @Override
                public void onNothingSelected(AdapterView parent) {
    
                }
            };
        }
    
        private View.OnClickListener onConfirmListener(final EditText name, final EditText job, final Dialog dialog) {
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Emp friend = new Emp(name.getText().toString().trim(), gender, job.getText().toString().trim());
    
                    //adding new object to arraylist
                    empArrayList.add(friend);
    
                    //notify data set changed in RecyclerView adapter
                    adapter.notifyDataSetChanged();
    
                    //close dialog after all
                    dialog.dismiss();
                }
            };
        }
    
        private View.OnClickListener onCancelListener(final Dialog dialog) {
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            };
        }
    }
    

     

 1 Comment(s)

  • Hi thank you so much for this. I had an issue with my app am working on where I wanted to show a dialog box when the recyclerView item is tapped but It wasn't showing.I was passing the context to the dialog.Builder then I saw you passed the activity there and I tried it and It worked. I posted a question on this on stack over flow but no solution till I saw your code. So thanks a lot.
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: