Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Add Popup function in CardView

    • 0
    • 1
    • 0
    • 1
    • 2
    • 0
    • 0
    • 0
    • 2.78k
    Comment on it

    In the below example I have Created a Popup function, so when we will click on CardView it shows Popup on our screen and when we will click outside popup then automatically popup window will close.  
    For this First I have added I have added RecyclerView , CardView and design support library in build.gradle file. After then I have created RecyclerView and FloatingActionButton within Framelayout in main_activity.xml layout, then 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_recycler.xml layout here I have added CardView, ImageView and TextView.  
    Now see programming area here I have created Friend 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 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 Friend class-
     

       public class Friend {
        private String name;
        private String address;
        private boolean gender;
    
        public Friend(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<Friend> friends;
        private Activity activity;
    
        public MyAdapter(Activity activity, List<Friend> friends) {
            this.friends = friends;
            this.activity = activity;
        }
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
            LayoutInflater inflater =activity.getLayoutInflater();
            View view =inflater.inflate(R.layout.item_recycler, viewGroup, false);
            ViewHolder viewHolder = new ViewHolder(view);
            return viewHolder;
        }
    
        @Override
        public void onBindViewHolder(MyAdapter.ViewHolder viewHolder, int position) {
            viewHolder.name.setText(friends.get(position).getName());
            viewHolder.address.setText(friends.get(position).getAddress());
            if (friends.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(friends.get(position).getName());
            address.setText(friends.get(position).getAddress());
            if (friends.get(position).isGender()) {
                genderIcon.setImageResource(R.drawable.male);
            }else{
                genderIcon.setImageResource(R.drawable.female);
    
            }
    
        }
    
        @Override
        public int getItemCount() {
            return (null !=friends?friends.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_recycler);
                    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<Friend>friendArrayList;
        private FloatingActionButton feb;
        private  boolean gender;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            friendArrayList = new ArrayList<>();
            recyclerView =(RecyclerView)findViewById(R.id.recyle_view);
            feb=(FloatingActionButton)findViewById(R.id.fab);
            recyclerView.setHasFixedSize(true);
    
            LinearLayoutManager layoutManager = new LinearLayoutManager(this);
            recyclerView.setLayoutManager(layoutManager);
    
            setRecyclerViewData();
            adapter = new MyAdapter(this,friendArrayList);
            recyclerView.setAdapter(adapter);
            feb.setOnClickListener(onAddingListener());
        }
        private void setRecyclerViewData(){
            friendArrayList.add(new Friend("Sumit", false, "Name"));
            friendArrayList.add(new Friend("Address", true, "Kanpur"));
            friendArrayList.add(new Friend("Inder", false, "Name"));
            friendArrayList.add(new Friend("Address", true, "Lucknow"));
        }
        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);
                    dialog.setTitle("Add a new friend");
                    dialog.setCancelable(false);
    
                    EditText name =(EditText)dialog.findViewById(R.id.name);
                    EditText address=(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);
                    ArrayList<String>gendersList = new ArrayList<>();
                    gendersList.add("Male");
                    gendersList.add("Female");
                    ArrayAdapter<String>spnAdapter = new ArrayAdapter<String>(MainActivity.this,android.R.layout.simple_spinner_dropdown_item,gendersList);
                    spnGender.setAdapter(spnAdapter);
                    spnGender.setOnItemSelectedListener(onItemSelectedListener());
                    btnAdd.setOnClickListener(onConfirmListener(name, address, 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 address,final Dialog dialog){
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Friend friend = new Friend(name.getText().toString().trim(),gender,address.getText().toString().trim());
                    friendArrayList.add(friend);
                    adapter.notifyDataSetChanged();
                    dialog.dismiss();
                }
            };
        }
    
        private View.OnClickListener onCancelListener(final Dialog dialog){
            return new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    dialog.dismiss();
                }
            };
        }
    
    
    }

     

 2 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: