Lessons

Lesson Info

Attaching a Photo from the Library

attaching a photo from the library. Okay, so once we come, once we get past the the, uh, the point where the user stores their credentials for twitpic, Um, we need to let them attach a photo. So what we'll do that button will kind of change the mode Once we have the credentials, what we'll do is allow the user to pop up this choice, um, and choose whether they want to attach a photo from the library from the camera. And, um, that will be the first thing that we do once the most. We have the credentials and they press that button and then we will If they choose the photo library, which will be working on during this step, We're going to, um, using intent to open up. Ah, a view into the photo library. And that's all controlled by Android. At that point, he could still that the skinning is slightly different. There, it looks like a standard application on your device. If you run this on a device, it will well maybe have some other different sort of flashy looking Nieto was bang things goi...

ng on, depending on what device it is. But that's all controlled by Androids. That what we're doing here is saying, Hey, android, we want open up some media. Um, we just wanna get pictures, So show us some options, and then once the user chooses one of those, it's gonna come. The control will come back to our application, and we'll see the URL to the local Earl to the media that the user chose. So this is kind of a nice, um, flow where we delegate off the android toe to go open up some media and then android takes care of it from there. Um, and we kind of it's gonna like a like, uh, sort of a client server approach, almost like go get us a media android, and then it will come back with the media that the user chose, and we don't have to do any extra work to do something. That's a common task on the platform. So let's look at the code for that. This is all going to be closed down. These this is all gonna be in. Ah, step two of week five, where we deal with just the library and we're gonna be looking at the post activity, which uh, is what you It's not keynote. When you look at the actual running code when you go to Menu Post, this is what shows up on the screen. So let's look at how we how we deal with, um, setting the credentials and, uh and then opening up the library. So the first thing is, we've got a new button, which is the photo button online 42. And we get a reference to that and set of views just like normal. Um, but what we want to do when that button is clicked. So if you come down here to find it here on Post Button clicked, which is which is a callback that we define inside of you here, let's go look at that really quickly. And resource is layout post view in the XML. You can see that online 31. We add something called a photo button. Um, a dependency. Independent pixels wide um, height will wrap content. Um, we also align line it right so that it will sit on the right side of the screen, but then we'll on the top in the bottom with the tweet contents, which is Thea the Edit text that the user types in the tweet the contents into, and that will make it as big as that. So it'll sit kind of nicely in the view. As you can see in this picture here, um, either whether or not we're showing the picture or just the text of the button. That kind of sits as Bigas, that at a text on the screen, which is nice, and then online forties, where we define the on click function. So photo button clicked is in the post activity online with 1 57 and that will get called and have you will be passed, since we could define that from that clique handler from the view. And then, um I'm sorry, You know what I'm looking at? Post button clicked. I need to look at photo button clicked, which is on 1 75 Sorry about that. All right, line 1 75 When the photo button is clicked, the first thing we do is ask the app if we have twit pic credentials, If we do not, then line 1 88 will create an intent to open up the settings activity and then start that activity. Otherwise online. 1 76 online, 1 77 Then we're gonna build this alert dialogue that you can see here in the slides, Um, or on the left. There, attach photo, choose photo short source. Both of those will be set up. The title on the message will get those out of the string. Resource is, and then we're setting the positive button. Um, what would you like? The okay button or whatever will make the string the photo library. So we're kind of, you know, were we want there to be three buttons ultimately for but But in this step, we just have a positive and a negative button. And we're actually using this to be, um, positive or burst, be some sort of positive option. We just want to use the three buttons. So, um, in this case, we're just gonna use to. But later on we're using. We're gonna be using 31 for the camera, one for the photo library, and one been one for cancel. So the positive button at this at this point is going to be, um, labeled with this resource with a string resource photo library, and then it will have a click listener that I define in library button Click Listener, which will look at just second. And then the negative button, which will sitio to the right most, depending on how many buttons there are. It will be the right most of those buttons, and it just goes and and dismisses the dialogue, which we define, um, her, which gets passed into it. Sorry on the on click. So that's just ah, that's just the quick way to cancel dismiss the dialog. But the the button that we care about most years if the user presses the photo library button, which is on on 1 80 then, um, the library button click listener will be called something. But my insertion point on that and he had have three will go down to the definition there. So that's defined online in 2 19 And it is a dialogue interface, not on click listener, not a view that on click listener it's a subclass and believe so it still has a on click method, but instead of a view, it'll get past the dialogue that that, uh, click happened on, and then an integer, which will be which button was clicked, so you can keep a reference to if you have ah, more complex set up than we do. You could give a reference to which button is which on and see which button got clicked. But in our case, we just We know that this click listener is only for one button. So we're we're calling this on photo library method. So let's hit of three and up to that online 1 67 Here's the meat of the the actual work that's going on. Um, this is an intent, um, and this intense is different than the intense that we normally use, which opened up other activities where we pass a context and then an activity. Ah, class, Um, in this case, we're gonna pass a constant that android fines, which describes the type of thing that we want the intent to do. And in this case, we want to get some content that the user has, um, available to them somewhere on the device. So we use this, get action, get content constant, and then we have to provide some further information to kind of narrow down what kind of content we want. Because if we don't. Then it'll just It'll give us all the content so we could maybe pick a video which won't work for our conditions that we have. You happened right now, So this is kind of a filter that can pass alongs on any kind of image. I could I could make that Only pings are only on Lee J. Peg or something like that. But I want to be any kind of image, and then I want to add a category. Um, and this, um, this category category open all OpenTable, which I set up online from 1 70 Let's look at the documentation for that. Basically, I'm saying that give me something I have access to be able to read because I'm going to be dealing with this. I'm not just gonna be presenting it to the user. I'm going to be, um, actually dealing with this once the user selects it. So this is used to indicate that a get content intent on Lee wants your eyes that can be opened with content resolver open input stream, which we need to do to pass that stream of data up to twit pic open your eyes must be must support the columns in OpenTable columns when queried, though it is allowable for those columns to be blank. So basically saying, um, I want I want have permissions to be ableto work with that content and then I call start activity, um, for result, instead of just start activity, which means that I'm expecting something to come back from the from whenever the user gets done with whatever this intent fires off. Then I passed the intent. And if you remember, uh, we talked about this a bit in the past. Um, in this case, we're using a constant Teoh. Say what type of request this is for our own purposes in this activity, because later on, a callback is gonna happen, and it's going to say this is the type of requests that is finishing right now, so we will know how to deal with it. So we use our own constant, which, if I hit F three, is defined up at the top here of this activity. Um, it doesn't matter what it is, it's just needs to be unique. And then what happens is, um, on activity result will be called when the user completes whatever activities that intent has for the user to dio. So we talked through really quickly. The user cheeses photo library from that papa box that will open the photo library allow the user to choose some media once they select something on activity result will be called after the intent finishes after the photo library activity and finishes and then on activity result be called on the third pain here on the right on the activity that kicked everything off here, which is the post activity. And we'll know that the user is done choosing some media and that is right here online. 72 post activity so we can see the request code comes in, which is the same code that that android will keep around for us and call back and say this is the request that just finished so that we know how to deal with that one. Specifically, it'll also give us a result code Ah, which says whether or not the user was able to complete the task or if anything, everything was good with the result or if there was a problem that will be a different kind of result code. Then what we're looking for and then will pass up the intense that, uh, that contains the information about what the user completed during that activity. So online, 73 were checking. Well, if the Reach request was the one to chose a photo from the library not some other type of request, it's finishing. Um, And if the result was okay, wasn't result cancelled, which is the other result type you can see here canceled is another is all type. So these are cancelled. It we wanted we're not going to doing anything. We're just going to continue on as if they never even opened up the media library. But if the result is OK, then we know we can go through and pull the data out of the intent which is going to be Ah, your your eye, Um which is unified resource. Identify her, which basically looks like a your l kind of your l A is a your I, um, in the nomenclature of things, but is basically just a pointer to the data on the local device. So whatever they chose, um, will be pointed to by a unique identify where that kind of looks like an earl and android will know how to point back to that. That bit of media from that you are I So we're gonna plus pass that through to the to the method. Actually Does the work here online? 74. It's paid off. Three. Um, that on line 98 is where that method actually is defined and that will take a your I and we say photo to post chosen. Um, and here's the pointer to the photo. So we just grab that you or I, We need to keep a We need to keep a, uh, an instance variable to reference that because we maybe we may be doing some eso. We're gonna be doing something that with that after this photo to post his chosen method is complete. So basically, all we're going to do in this method is you can see back here on the slides. What we do once you choose one of these images is to show the image instead of the button that the user used to. You actually pick the image in the first place? Probably seen this kind of behavior. Another other acts of this kind. We just need to show the photo and then let them continue on what they're doing. So we're gonna replace the the ah background of the photo button, which is Ah, the the draw bowl that we talked about last week, which has the Grady in on it. We're gonna use instead bit map, draw, bill that's created off of the bit map that they use her of the image that the user picked. So we need to create that bit map here by working through this. And here's where we deal with. Here's where we start to see some examples of dealing with the media store, so we're gonna create thumbnail first of all. And by the way, this is this method, which is really nice. It's a nice, easy way. T get a thumbnail of some image that may be much bigger. Um, on the user's device there was this was a lot of work in the past, but starting and I think 2.2 point. Oh, of ah, Andrea Koppel happen Android operating system. You can use this little convenience method on media store images. Thumbnails get thumbnail, and then what you need to do is pass in something called a content resolver, which is something that knows how to deal with ease your eyes like that. We're like, we're getting as an argument in 98 online 98. And then, um, the I d of the which is the Okay, So what I'm doing here? Only one kind of comment this out. I need to get the I d and then get a content resolve and pass those two things together with the type of thumbnail that I want. Teoh, get out of this. Get thumbnail service, which is the smallest kind. Um and then, ah, this Ah, this little convenience method will go do the work of looking up that media that was passed back to us and then creating the thumbnail. If it's not already created and passing, it's back to us. So what I need to do is to get the I d of that media. That's what we're gonna get is something like in this year, I it'll be something like media the media protocol instead of http protocol so you can see this kind of gets constructed similar, similar to the girls that you use on a on the Internet from day to day and this will say something like, um, images or I can't quite remember what it will actually be. Weaken debug this in a second and see, See how it looks. But then it'll, um, have some some other sort of paths here to distinguish something, and at the end will be the unique identifier of that piece of media. So what I'm gonna do here is get that last past segment, which is the I D. Um, which which is Ah ah, I method on your eye that knows how to spoke this thing up by by these slashes and give us path segments, which are the pieces in between. And then we grab the last one. We know that is the I D. And if it's know if something went wrong, so it's not going to do anything. For now, though, you could be a little nicer if if you actually want to make this something more production ready. But once we have that, I d. We can pass it on to this, get thumbnail service and then actually show the thumbnail. And at that point, the user has chosen the immediate that they want to upload, and we've displayed the, uh have displayed the media that they want to uploads. They know that this is gonna be attached to the tweet. They could continue, continue on putting in the contents of their status message to upload to Twitter. And then we are ready to hit post at that point. So, um, let's go through. And just like I said, let's look at Let's look at the your eyes. It comes through. So I'm going to do is double click loop line number and I'm going to switch back over to the emulator. Actually, um, I don't even have to redeploy this. So what's pretty cool is let me switch over to the D. D. M s perspective and eclipse up here in the top, right? And I can tell the app that's already running. If I expand this window, you can see in the Devices tab. There's a lot of different applications running, but combat O'Reilly, that android that tweet is one of them. I can select that hit the little bug icon up here. And now that that will be the start up of the bugger connected to that application so I could do is click attach photo and she's photo Library is a source, and you can see there is a lot of the same image in here. This is the image that the camera on the emulator will create for you, which you probably have already discovered. But each one of these guys is a different instance of that. So when I pick this, I should come back to my activity once it's kind of churns up and gets ready to go. Has taken a long time to connect to the D bugger. It didn't actually come into hit my brick point yet. See why that happened? Looks like I'm connected to the bugger on the device. Photo to post chosen should be called from other locations in the code are on activity results. So let's see if theon activity result is called. So I'm gonna create a debug er point. Ah, do burger break point here by double clicking line 30 or 73 and I'll try this one more time. I'm going to click the button, go to photo library. She's a photo. It seems like I'm not connected to see if I just open this up again. So I'm gonna run Ah, step, actually, one around Step two. That's probably a problem. I'm not running the actual project that I think I am. So if a run of Runas Android application from step to that should start running here in the emulator and then I could kick into debug mode. So here's a little tip that I found, um, if you start your application, you want a debug your application. If you start the application from Eclipse by going up to the debug button and come and select the the run configuration Um, if you're a few steps into your application at the point that you want to debug something, um, I found that everything is running, uh, generally runs really slowly up until you get to that point. So it's kind of a pain to get to where you want to start debugging. So what I usually do is start up with run mode instead of debug mode by using the play button and then go to the emulator and gets where I want Teoh start my debugging and then I'll come over to the D. D. M s perspective and kick the application into debug mode. And that way I could navigate around a lot faster. And that and the debug server is not slowing everything down. So that's a little tip free there. All right, now, I'm gonna try to attach the photo. That's see. That's it. I was running the wrong version of the of the code here on the emulator. So now I've got the code that we're expecting to see. Ah, I only have photo library to find. I don't have camera to find. So, like, like photo library will come to the same gallery view here. When I select a picture, it kicks me into the bugger at the point that I expect, which is on activity result. So, um, kind of close some stuff down here long cat properties that can minimize that. The outline, um, can minimize that. Okay, so here's the code here on the bottom. And here's the stack up at the top. You can see that we're at post activity on activity result right here, which says a line Oh, actually, on resume is called first. That's that's something to note. Um, so that's interesting. So if I continue on, that should be at, uh, I was weird to the debunker said it was at on resume. But in any case, here I am at the end of post activity photo to post chosen. So I must have It was weird. The code was out of sync with Thea where it actually wasn't a stack, but it any case? Syrian With photo The Post Chosen where I wanted to see what are your I looked like. So here's what your eye looks like. If I hover over that variable, it will show me the contents and ah so I guess I was wrong. It doesn't start with media starts of content as a as a protocol and then says media, external images, media. So what that means is, this is Ah, this is some content. So we're using the content protocol to to tell us that our Andrew it is rather and it's of type media and it's of type media external, which means that it's on the the SD card that could be also be media internal if it was stored locally. But instead, when I took that picture was stored on the SD card and then it's a ah, an image, not a video for instance, or an MP three or a song or something like that and then underneath the media for that images. For that, the image there is a particular I D I. D number five, which is what? That the unique identifier of the photo that we chose. So that's now we've got a reference to that in this photo, your eye, local variable. And we can also present that to user here, instead of the button that they saw before is they can see this is what they're gonna be posting up to the Internet. And that's what we were set up to do during these steps. So, in summary, the intent with the type of action get content allows easier to pick some content off of the device. And then we also can use further, um, um types toe kind of filter down the content, the type of content that we won't allow the user to choose from. So in our case, remember, we chose Image Slash star. So any type of image and that's kind of a summary of these steps. We have any questions? Well, let's see here, Brian, do you have any questions from the chat room. I have actually have one from Mary and Goto Webinar. Why not use action? Pick for the intent. I'm not sure of what all the different action types do. I think there's probably a subtle difference between get content and pick. Um, but I think somebody in the chat room mentioned that as well. Um, Okay, well, that's that's a good point. Why don't we take that to the forms we could talk about, just like we did in with Thea, Um, with ah activity. Ah, clear top. Like we did last week to talk about the different different choices there. There's a home, long the code comment about that. Um and somebody wanted to know. Is it possible to apply your theme for the app to the android Select picture screen? Not as far as I know. So that's that's kind of an interesting thing. A lot of the I'm not even sure if you want to, so I know it would probably look nicer. And what's more, you could build your own screen if you want. If you really think it's important toe to ah to, ah, let the user experience the application that way. But that's gonna be that content picker screen is something that they may run into from other app, so that familiar experience might still be valuable to keep. So I'm not sure if you even want Teoh. Ah, Although it may look nicer, it may be a familiar experience that you want to keep during the flow of users foe of the user through the application. Eso I'm not sure if you want to or not, but I don't think you can't actually skin that. You'd have to go about building the screen yourself, which you could do. But it would be, you know, more work. Okay. And And Matthew asked, Is there a way to call the get thumbnail methods so that it does not stretch your skew the image? Um, I'm not sure we can deal with the It's just we could move on with with Thea the camera and then the rest of actually posting. Let's take that one to the forums. Okay. Not sure. Off the top of my head and Brian, do you have some questions? Yeah, I have to. From the chat room one of dispatch. The Spanish form has been green, going while about rooted phones accessing the shared preps, um, folder values. And I was wondering what the concern was there. Ah. Well, I guess if you have a rooted phone, then you're getting past any android security that stops other applications from looking at that at the directory that's supposed to be read only for your application. So another application could allow, um, could go get access to some piece of shared preferences. So I don't know the best seconds days don't run on a rooted phone. If you know you're gonna be keeping sensitive information on your device because anything anything could happen correct on that one. Um, a zai feel as well at the at other times, or are sorry at what other times were events Would you call the on activity Irizarry? When would it be called? Whenever an activity that is called, um so, so normal. You started activity with just by saying the start activity FBI method of activity. They start activity passing intent, and it'll go, um, and then when it finishes, you may come back to your activity, and then on result will be called, and that'll be the normal workflow. But if you call instead of start activity start activity for result than you're expecting. Um, the activity that you start to come back with the results. So in that case, on activity, um, when that finishes Okay, so let's look at the we didn't like to actually look at this code. This may make it more clear. Eso I'm starting. Oh, you know what? No, It's if we went off the reservation, we went Teoh to Android World so we don't get to see the code where it finishes, but it it finishes in a different way than other activities that finish by just calling the finish method that actually finishes by passing back an intense which we will get as the argument here. And Ah, um, in this one, in any case, that I was looking at the wrong one there on activity Result online 72 of step to this intent is the one that gets passed back by the activity that finishes bypassing activity instead of just simply finishing. So that's the cases that will cause on activity result to be called just one question. Ah, kind of clarifying the question. I asked first about unready phones instead of just rooted phones on an unrated phone android. The operating system should protect AAPA, protect access to the directory where the shared preferences air stored by using the normal ah Lennox um permissions system. So it's read only for that for the user that's created for that application. And root can always get to whatever it specially calls out shared preferences. How could you app apply those purposes to another APA's? Well, yes, you can. And let's go look back at that code. Ah, setting sulfur. So moving up the settings helper Java file. Um, when I first get access to the shared preferences, remember, I passed this content or context mode private. If I If I pass and said context mode public, then I'm allowing access further further applications to read those preferences. Thank you, Thank you. And I do have one more question. When you arrive at line of on activity result, why do you need to check the request code? How do you get here Unless the request code matches? Well, I think that will be even more clear in the next step when we use a different request code. OK, well, that sounds to Segway. That's a great Segway. Thanks for asking that question. All right, so I'm gonna close this down and let's start talking about the next step.