image
Edit Post
Start course
Difficulty
Intermediate
Duration
3h 12m
Students
20
Ratings
5/5
Description

The course covers Recycler Views, which is one of the most important features of Android app development. They allow us to work with lists or grids of data with a ton of built-in optimizations. We'll then put your knowledge into practice by building an app to display a list of posts that we can scroll through, edit them, delete them, etc.

We'll also explore object-oriented programming with Kotlin, focusing on how to build objects, work with inheritance concepts and interfaces, and other highly advanced features. You'll also learn about classes and objects and how to work with them with the Kotlin programming language.

Intended Audience

This course is intended for beginners to Android app development or anyone who wants to master coding in Kotlin.

Prerequisites

Since this is a beginner level course, there are no requirements, but any previous experience with coding would be beneficial.

Transcript

Hello, and welcome back. In this video, we'll quickly implement an edit functionality for our posts. So, when we tap on the edit image over here, it changes the contents of the post to edited. Now, usually for edit functions, you would want to provide a new view where you could manually update the title and the body or maybe the image as well. But we won't do that here at this time. The aim right now is to understand the recycler view functionality and also how to organize our code. And once we learn this, what's going on behind the scenes, we can add whatever view modifications later on to make for a good user experience. So, let's get started. 

We have our edit image in our post over here. If I go to post and scroll down, within my Linear Layout, there is my edit_post_image So, I'll add a reference to this ID in my post view holder like we did for delete and the others. So, over here I'm going to say val editImage, and, actually, that doesn't make sense. So, what I'll do is say editPost, that sounds more appropriate of type ImageView and then postView.findViewById(R.id.) there we go, edit_post_image. And inside the in it block, I'm going to add an OnClickListener for this as well. So, editPost.setOnClickListener(this) so this view holder and now this, once this image is clicked will be handled by this onClick method over here as well. 

And right now, our onClick method is just handling deletion of the post, but now that we have edit as well, we have to account for the edit functionality. So, how do we do that? Well, you see, we're getting the view over here as a parameter p0, it's getting passed in. So, if the click happens in the editPost, so if the click happens here, then this View so, p0 will be the edit_image_ view. Similarly, if the click happens in the delete post image, then this View or p0 will be the delete_image_view. And since we have this, it's being passed in to our method as a parameter. We can simply check the ID of this view to see if it's the editPost image or the deletePost image and implement our functionality accordingly. So, over here, after I have my position, I'll say, if within parenthesis p0 that's my parameter if (p0.id == editPost.id) And you see, here I have a red, and that's because this view can be null as well. To make this work, all I have to do is put a question mark in here. So, p0?

All right? And so, if the id of my view matches editPostId, so that means the edit button was clicked, then I'll do something else I know it was the deleteImage that was clicked, I'll handle delete over here. So, I'll simply tab this in and close the curly brace. All right. So, let's handle edit over here. First, we'll grab the postObject so val I'll call it clickedPost = with the object in my position of the dummy list. So, dummyData my list and I have the position so the object at that position index of my dummyData list. So, now that I have my post that I want to update, what I'll say is clickedPost. Let's update the title to be something else. Let's say "Updated title" and body to be "Updated body" But you see these are red and that's because if you look at our postObject, so in Post.kt file, we declared title and body to be val and val means these properties are read only. 

If you want to make them editable, we have to change these to var. So, right here I'll change title to var and body to var as well. And as soon as we do that, the error should go away. There you go. And once we've updated the title and body of the postObject that I'm working with, I would want to notify the adapter so that it knows that our view has changed. So, similar to what we did for delete down here, I'll say this and there's the PostAdapter. And here if I scroll down, you see notifyItemChanged. Before, we use notifyItemRemoved, since we're updating it notifyItemChanged and the change has happened at position, okay? So, that's the simple edit function. Let's run it and to make sure that it works and apply changes and run. 

All right, let's pull up the emulator. Let's tap on an edit image right here. Okay, Updated title, Updated body. Great. Let's edit another one right here. Post 7 edit Updated title, Updated body. Great. Now, let's make sure our delete is still working because remember we added this else condition for the delete. So, let's tap on the trash image right here for post 4. Okay, that's still working, that post is gone. Let's do another one. Title of post 10, that's gone. Great. Now, let's delete one we have previously updated. So, right here delete. That's working as well. Now, as a last test let's edit and delete the same one in a row. So, edit, edit has happened, delete. Gone. Perfect. Now, that we have the functionality working. 

Let's talk about optimizing our implementation and a problem that currently exists in the way that we have implemented this. If you look at our adapter here, we're making our edit and delete functionality happen here itself within the adapter. But, usually, for edit you would want another activity or view to show up. So, here when you click on edit, you wouldn't want the edit to happen in the main activity. You would want another page to show up, where you have the text fields for title and body which you can fill in and that's how an edit functionality of existing content would usually work. So, you'd want that functionality to be tied to that activity, to that edit activity and view, and handled by that activity itself. 

And all you want the adapter to do is be the enabler in that situation. All the adapter would do is forward the relevant information, like the position of the view or the entire view itself to that activity. Similarly, for delete, you'd want that to be handled by the activity. Maybe you'd want a pop-up confirmation or something else and you'd want that handled by the activity that's doing it as well. So, in our adapter all would want to say is, "Hey, if you use this adapter then implement the delete and edit methods and here is the information on them." Right? The position information or whatever other information that we want to forward and you can do that by creating an interface. 

Remember, we saw how this works in our Object-oriented programming portion earlier in this section. We want to create an interface here, which will specify the methods that need to be implemented in that interface and leave the actual implementation to the activity which is using this adapter or the interface. So, let's create an interface here inside our adapter, okay? So, I'll say, actually, I'll make some more room. Okay, interface and let's come up with an appropriate name. You can call it whatever, I'll say OnPostClickListener. And within it, I'll specify the two methods and since I have edit and delete, which I want handled, so I'll say fun and I'll come up with a name for the edit method. I'll say onEditPostClick with the position as parameter, so position of type Int. 

Similarly, fun onDeletePostClick(Position: Int) as well. And the idea behind the position is that we're simply going to forward the position and let the methods when they're implemented handle, what to do with the objects in that position. All right. And we're going to leave it at that in this video. Our app still works and all we've done is started exploring this concept of modularizing our code. So, it's more reusable. So, in the next video, we'll make our main activity right here implement this interface, which in turn will require our main activity to have these two methods implemented here and we'll take the logic from the edit and delete functionality. That we've already built over here, and simply paste it in there, So, I hope you're excited to take care of this. And I'll see you in the next video.

 

About the Author

Mashrur is a full-time programming instructor specializing in programming fundamentals, web application development, machine learning and cyber security. He has been a technology professional for over a decade and has degrees in Computer Science and Economics. His niche is building comprehensive career focused technology courses for students entering new, complex, and challenging fields in today's technology space.

Covered Topics