Join Albert Lo for an in-depth discussion in this video Incorporate CheckBox view, part of Android Development: Modern Android UI Design Elements.
- [Presenter] Now that we have a code for our checkBox completed, we are ready to incorporate our custom view checkBox into Google Photos view holder. So let's open up our project view and let's go into our package and under UI we go into the Google Photos package and select view holders and select Google Photos view holder. Now I'm going to dismiss our project view.
So to incorporate our custom view checkBox we first need to initialize it, so let's declare a private member, checkBox, and we'll name it checkBox. Now let's go into our constructor right under image on line 29, let's initialize our checkBox. Call in getRootView, findViewById, and the ID we want is check_box.
We will also need to initialize the adaptor so let's create another private class member. Type is albumGridAdapter and we'll name it adapter and let's go ahead to line 32. We will initialize the reference here. Now let's go down to set data. So right below the line 40 let's add some code.
If the item is selected we want to show the checkbox. So let's add some code here. If item isSelected, let's set the visibility of our checkbox. And let's also call the onClick method. Now let's go down to our onClick handler for the root view here. So what we want to do here when we click on the root view we want to toggle the state of the checkBox.
Let's first get a reference to our Google Photos item. And we'll call the getItem method, passing in our position. Now let's call the onClick method for checkBox. Let's call the setSelected method for our Google photos item. And we'll pass in checkBox isSelected.
Now let's toggle the state of our checkBox. If checkBox isChecked, then let's toggle the visibility by calling the setVisibility method. If our checkBox is not checked, then let's set the visibility to gone.
Now I noticed that Android Studio is flagging an error here for isChecked method, so let's go into there. And it looks like we're missing a method, so let's call the create method. This will be a Boolean. So what we want to do here is let's go up to the top of the class and let's select isChecked and let's go back down to where our method is, and let's just return isChecked. Let's go back into Google Photos view holder.
We have initialized our checkBox but we also need to add the custom view into our layout file, so let's go over to Google Photos item and press command B. And in our layout file let's first add an X amount of namespace for app. Now let's scroll down near the bottom and we will add our custom view checkbox. I'm going to copy our package name up here and that's going near the bottom and our tag, and pasting our package.
And then add in checkBox. Now let's add in an ID, our ID will be called check_box. Now let's add in a width. We are going to hard code the width to 24 DP. And we'll add in a height as well. The height is also hard coded to 24 DP. And let's add our custom attribute for our checkbBx and the custom attribute is for the SBG file for the on state.
Named check under circle black. I've already added a couple of SBG assets, so if we open the project view and we go into resource and under resource we select the raw folder, we'll see the two SBG icon assets check circle off, check circle black. Now let's close our project view. One last attribute we should add is the visibility and the default visibility will be gone.
Okay, now we are finished with our changes to our layout file to incorporate our checkBox.
- Creating a custom layout with XML
- Setting up OnClick handlers
- Making API calls
- Creating custom views
- Implementing ViewHolder objects
- Signing certificates
- Adding a checkbox