 Good afternoon everyone and what now the session would be is it would be a basically image and media handling. So what we will see is dealing with images, audio, video and a camera app also. So it would be a pretty interesting session for you because I am doing a very minimal coding but what output you will see there are lot of things. I mean I am capturing a camera, taking a pic, giving back the picture to the to my activity and showing it. So even there are lots of interesting things and very I am that this is the power of Android I mean with minimal coding you can do lot of things. So let us start so I will just switch my workspace to the media works. So let it get load we will take little bit of time meanwhile what we can do is we can check out Android SDK manager this is what I wanted to show you in a session one. So if you see this is the Android SDK manager I went to Windows then Android SDK manager okay. So these are all versions and here is the corresponding API. So what you see is Android 4.2 version have API 17 similarly 4.1.2 API 16. So if you remember the chart which I had shown you in an introduction so this is what it has come from. So and if you see these versions have been installed like 4.1.2 is not installed 4.0.3 is installed. So you know depending on which version you want you can just select this and install these packages I guess yes everything has been sorted out it has loaded my projects. So let us start with the first media example. So what we will do is you must have already now familiar with the layout concept rather in our layout what we have is a XML files. So this is my main XML file the main activity yeah let me just zoom it for you okay this is in a portrait let me just change it to the landscape yeah. So this is how the final output will look like where I have two image buttons this is little different than the buttons I mean if okay just concentrate on the left side in the form widgets we have all this common widgets then there are text field layout composite then in images and media we have these all widgets. So I will be basically taking these widgets these are something you know pretty cool widgets. So this is what you see on the screen are image buttons. So what happens is it is nothing but just a button with a image. So I mean you can just give a source of this image to a button so I have what I have done is simply dragged and dropped a button then in a source if you see this properties let me just do that okay so right hand side right hand side here is a source. So what it says is a drawable image button so now you have already seen resources in a morning session so I assume you have understood what does this drawable do for us. So I have simply copied my images in this drawable folder so if you see here are images available which I am using in my application. So here are the images available so I have just copied in all three folders drawable hdpi which is for high definition then low definition and medium. So I have already copied and I am just using it in the source so pretty simple just take your image copy here drag and drop your image button give a source and it will automatically come whatever you copy in a drawable folder if it is a form of image then this will automatically show you that those all names. So here we have two image buttons so what we expect is on clicking of this image button I will show you the image view if you see this left hand side the first widget is a image view so what image view does is you have already seen a text view the morning session which I showed you the first program which was displaying hello world that was a text view now this is a image view as name suggests it is a self-explanatory this is a view which will help you to display a image. So on click of images I will show you image view where image is displayed and on click of video we will have a video view now in this left hand side the last widget is a video view so what we will do is on click of video we will have a video view and our video will start playing. So this do not worry I mean I know I am talking a lot so it may be difficult to grasp but see this is our first activity and what I will do first is I will just show you the output so that and then we will just revert back so my team member has done already work for me they have connected a pen drive and this was a point in morning which did not work that I wanted to show you how to install an apk on the device this if you see I have connected I have a connector and connected a pen drive and inserted in the USB port and now let me just zoom in for you so that you will see the folder clearly yeah. So the third folder is my USB folder and now this is the apk thus the starting point apk so starting point apk now it ask me do you want to install this application I say install and as I had mentioned in the morning it will show your dialog box to open so I say open so yeah this is what the program we I showed you in the morning so it is displaying a hello world so if I click on this text gets changed to the starting point I mean this is a just I wanted to show you to procedure how to install it on the device but now let us resume back to our image session where I will show you the output of media example which I was discussing with you so let me just check out my media example yeah ok. So here are two image buttons as I shown you in the layout on click of images this is the image view so on the image view I am displaying a image and this is just to add a functionality on click of next the image gets changed on the image view ok the activities same it is just that I am changing a image if you see above this is a image display activity ok if you come here see this is the first is a image display activity if I click on next this is also image display activity it is just then programmatically I am changing the picture because I wanted to show you the code that how to set a source programmatically and on click of video we have this video which is getting played this is a complete video view what you are see watching on the screen and on when I when I tap on this when I tap on this I get this controller buttons so this is happening using media controller this just gets visible for 3 seconds so you can do I mean programmatically it is possible to you know get it as a default I mean by default the screen will look like this it is possible so when I tap on this it I mean I get this control I can just click on this and it works so this is our first example and now what we will do is we will just look into the code of it I mean very minimal code not much so you have already understood this first this first layout which shows two image buttons so what we will do is definitely now we have to go to the Java code because on click of this buttons we want something to happen so what we will do is let us go to our main activity now if you see my source fold has three activities other than the media example media example is my main activity where two image buttons are shown and there are two more because when I click on image I am starting a different activity which is image display when I click on video I am starting a video view which is a video display activity I mean let us look at the step by step so let us go to the media example first so this is my media example activity what I am simply doing is I have this two methods one is a display video and another is display images these methods I have called on those two buttons which I showed you and what I am doing on this click of button I am simply asking the other activity to start I am using intent so that this is the syntax of intent the media example it needs a current class reference and which activity you want to call so I am saying under display images call the image display activity so it has current reference that is the media example dot this and the activity which you want to call and to start the activity I simply say start activity and pass the intent object that is it I mean by this you will start the another activity then there you can have a image view and display image and do whatever you want to do so these are simply two methods one is calling a display image display activity and another is calling video display activity with exactly same syntax and I will suggest not to go to a syntax level at this point just try to understand the concepts how it works how to get the UI widget to work that is more important I mean syntax and everything once you start doing it you will automatically understand again I am coming back to the media example to show two image buttons and to just show I have on click I have called these methods the display images and display video and what these methods now are doing for me they are calling those two activities so let us go to those two activities and see what is happening there so let us go to the image display first where we have a image view so if I click on this this is the image view one so in this source I have just set this image by default and when you click on this next button I am changing a source programmatically so this was attempt to show you both ways to set images one is just click on this set your source if you want a dynamic setting of your image then do it programmatically so this is that is it I mean on image display activity I have image view I have button and I have to do some programming that by clicking on next change this image so I will just go to my image display activity dot java so that is it I mean I have only the switch code the rest all is a system generated code so I just have a move next method which is which I am calling on that next button and the syntax would be same as I have showed you that it should it should have that parameter view v that is why I had got that exception in the morning because I did not pass it and what the next step should be get the reference of image view get the reference of button and alright the button reference I have got just to set the visibility because if you see when I click on next button you see the different image but next button is gone so activity is same how can then button would be gone automatically it is not possible I have done it programmatically that is just to show you okay so here is something for your work it is I am getting the reference of image view and on click of this method on click of the button my move next will be called and my image view would be now having a different image so what I have done is image dot set image resource if you see there are lots of methods available you see I mean see set image bitmap from drawable from resource there are from you even you are I so wherever your images or wherever your resource is depending on that you can set you can have this set method so my resource is in simple just in drawable folder so I do not need to do any great logic for it so I just simply said image dot set image resource and the reference of my image this is nothing but r dot drawable dot image image name basically so I mean that is it on image display activity this is the only code only this four lines of code for you and next let us look at the video display activity let us look at the XML first and then we will come to the Java so in video display activity I simply have a video view that is it then you may have a question how those controllers are coming those controllers are coming using media controller and that is happening through programmatically because video view by default do not give you any controllers you have to program to get those controls so this is simple a video view I have just drag and drop from this and given some you know parameters for alignment so margin left top right bottom so it is symmetric from all sides and what is happening in the Java file let us look at that so this is obviously a system generated code we do not we are not getting into that yeah so I mean you can now even think what should be the steps you have your video view in a your XML file that is in your layout file so what should be the case you should have a reference in the Java file and give the path of give path of the video well path where the video is stored alright so that is it I mean only is two steps to do it and third step it is optional if you want those controls so that can be achieved using a media controller so that is it first step I am getting the reference this is a very this is a common syntax you will find it almost everywhere this is a typecasting then find view by ID so whatever you see in that layout in that XML that is you know under a view so this is the method which gives you the reference of all those whatever is present on that XML or on that layout file so it will give you the reference of it and then R dot ID your view name video view name so I have given it as a video display over there and I have just set the path of my video as a hard coded path actually there are lots of other ways to do it I have just given this comment for your reference that you can set path in different ways it can be dot URI or it can be from environment or get external storage and file name or it can be hard coded there are so many ways to do it depends on where you are what your applications required for example if you do not know do not know already that you know where your video would be present so depending on that for example it can mean internal memory external memory so depending on that you need to I mean you need to apply the required method I knew my video would be present in my internal memory so I have given the path and this is the third step which I spoke about which is optional this is view dot set media controller this is the step which is giving me those controls of play forward backward so this is the only a single line which is giving me that there are so many other things in media controller also for example I will be soon showing you that by default how the video gets played in the device and what all different controls are available so that's it and I am just saying this path that view dot set video path and start playing video I mean you can see the code is not at all a difficult and with this three four lines I am able to play a video in my application I mean how cool is that and I just wanted to show you one more thing most of people have already shown you this DDMS perspective so this is a MNT SD card let me just select this first alright we will look into this little later there should seems to be some issue because it's not showing me the file so basically I have as I have mentioned in my path I have gone to the DDMS perspective and I have stored my video under MNT SD card folder as simple as that because this is important if you if you don't have the video in the path where you have set it won't get played and you will come up with question why is it not getting played so it's a simple logic your video should be there whatever path you want to give so place the video over there get the path get the video view reference set the video path and you are ready to play your video I mean as simple as that so that's it about the media example the one more thing when you are dealing with the video it's always better to check with your actual device because the same example it doesn't run on the emulator because of the video because what happens the video play needs lot of power consumption and the emulator is not able to support that much so you know the videos which are in very small size which you know which are not of very good quality those place those gets played in the emulator but whenever you are dealing with videos it's a it's always it's mandatory to check it on a actual device so let me just see if my application is here on the AVD here then I will show you what I'm talking about so many applications let me just open this media example let me just not changing its landscape yeah okay I just pressed control f11 to change the landscape of the emulator okay so when I click on video yeah so this is what I get can't play the video or sometimes what happens is you get your audio but video is not there or sometimes you get a lot of delay in your video there is lag so just be careful that you whenever you're dealing with video you always check with the tablet or with the device so let's check go to the two next applications I will show you the output first and then we'll quickly go to the code yeah so okay so next is image capture demo so I'm opening my application okay so what do we have is a image view over here and a button now magic starts when I click on the smile button you just wait and watch what happens but click on smile now camera has started okay I'm just clicking a pic okay I click on yes I mean accept now this image has been given back to my application and I'm able to view it in my application okay and if you see the code this is just almost a four five lines of code to do this much of work this is what I was talking about when I was telling you the Android features that you know application reusability application component reusability I don't need to think about the camera accessing I don't need to think about you know how to save the image what to do nothing the camera activity gets called it does its work it gives me that my data back and I'm able I'm ready with my data it's as simple as that and similarly I have a video streaming example video capture demo so what happens here so I click on start and if I click on this the video starts if you see here is a timing information let's stop this okay so now I have video if I click on the play that video starts getting played okay I can hear my voice also so completely video gets recorded you see now you will look at my so I accept this and it just shows the path where this video has been stored so my program has now got my video path so I have my video path I can display it in my video view I can do whatever I want and let's then look at the code behind this cool applications let's go to the image capture demo now I quickly run through it because I don't have much time so let's go to the layout layout with very simple I have showed you I just have a simple button and a image view this is my button let me just zoom it further button and a image view so that once camera clicks its picture and gives me back I want to show display the image what camera has clicked so let me just go to the source folder where a Java code is there where all the magic is there so I have just got the reference of my image view over here then the button so on click of button see this is a different way to implement your on click listener whatever I have till now I have shown you that you know in XML file I click I call that method on click what should happen the method name I specify in XML file this is another way to do it so in a code itself you can do that button dot set on click listener new on click listener and implement the on click method and write code whatever you want to happen inside on click so I mean this way the code little become little bit becomes a complicated that's why I always follow the previous approach so what happens on click a camera should start right so with a similar syntax what we use to call a different activity our custom activity we are just calling a new intent and passing the reference as sorry media store dot action image capture ok so media store is a basically a class where these all constants has been defined action image capture video capture and lots of them so I am just passing that ok this is the action which I want camera to perform that is a image capture and with similar syntax you can do a video streaming but obviously you can guess it quickly that the constant name would differ that there it would be a video capture we will look into the code and next I just call start activity for result camera intent and camera request so if you if you just observe this this is a start activity for result it's not just start activity which I did in a previous example to call another activity why I have called this you can guess the reason it's because I expect camera to give me back the result give me back some output give me back that picture which camera has clicked that's why I have called this method so what we pass here is a camera intent which is nothing but a intent which where you know we have given reference to the media store constant and the next is a camera request this is just a unique identifier integer value if you see I have just declared this here this value can be anything ok this is just to identify so that when because see this has said ok you call the camera and then something should happen when the camera activity is done it's work so what should happen I have to I have to code it definitely that you know image views should have that picture so what I am doing here is I have method which is on activity result which takes this three parameters one is a request code result code and intent data so I have already given this comment here the request code basically determines what type of request I mean this I basically this integer identifier which you have defined on your own this is a user defined one ok this is not is that what we did in action ok let me sort of the confusion basically this is a action to be performed by a camera and this camera request is an integer value to identify which request is giving back the result this is a user defined value it can be anything ok so on on activity result I am it's expecting request code then the result code so camera it may be possible you know camera application is not available ok so instead of result underscore ok it will give me back result underscore cancelled it can you know say that unfortunately application is closed so my you know camera activity was not successful to perform its work so I have to understand in my code that ok my activity was not successful so accordingly I have to take some steps so this is what this result code does if it was it is successful it returns result ok if it is not result underscore cancelled and this is the interesting part intent data this is what it gives me that picture back ok this data object only contains the data depends on the what type of activity you have called for example in image it will give me back the image in case of video it can give me a video path it can give me a complete video also so that's it I am just checking against the request code that ok whether it is a camera request which I had all called and the result whether result is ok or not and yes then just set my image in a image view using the data I mean simple very pretty simple syntax no rocket science logic required and it is doing so many things for you so as we are just running out of time and click I will quickly go for my video streaming also ok so video capture demo is a it is on a similar line in a layout I have a I have simple button simple button nothing and I want click of this the camera activity starts the video recording starts once it is done it gives me back the path so once I have the path I mean I have the access to video I can do whatever I want to do I mean play a video edit a video so this is the Java code very simple one nothing great so this basically method gets called when I click on click on start you have seen that start button let me not confuse you let me just show it to you let me go to the XML yeah so this is the button start and it has on click this method dispatch video intent so what should happen in this dispatch video intent my camera should start video recording so I have to code of course for that it won't understand on its own so I am calling a video recording so my action now here is action video capture if you see the syntax is pretty similar there it was media store dot in action image capture here it is media store dot action video capture ok the syntax pretty simple it is just that what your application needs depending on that you need to understand what action to be given so I have just said that ok action video capture and then start activity for result so there I have to pass the intent object that which activity should be called and an integer identifier which will identify my request once I get the result back so again I have called start activity for result instead of start activity and yeah so what should happen if once the video recording is done once camera activity has done its work I want to have a toast message where the video path would be shown where the video is getting stored I have one I need to do that because otherwise it's of no use I am just keeping keep on recording videos but if I don't get it back what's the use no use right so I need that path where it is getting default stored so on activity result see it's again a same syntax that's a request code result code intent data request code would be your integer identifier of your request result code is whether determines whether activity was successful in doing its work or not intent data will give you back the data depends on which activity you have called what type of activity you have called so I have simply said that you know data get my data it's not required let me just save this and yeah so using this data object I am getting my path so this data is giving back me the URI and from URI I am retrieving my path over here this is a simple toast message toast dot make this make text it needs the current activities reference the my this is a URI get path from where I can actually show the path where videos getting stored and this is just to syntax to show the toast message on the screen so that's it I mean pretty similar syntax what we had in image capture also and let me just show you where this video gets stored I mean it just stores in with its own naming convention even programmatically you can do that also there are in media store there are there are some methods available using that you can inform that with what video name it should be stored or you can even store it in your SQLI database also you can specify path where it should be stored I haven't done that because it may add the complexity of the application so let me just show you where it gets stored where is my file manager this is the internal memory so this is a folder the camera folder so by default here it stores if you see it has its own naming convention that vid then date and then I guess a timing information so you can just rename this also in your code there are lot of methods lot of things are available this is just to give you the kickstart that what all things are possible so you can just start exploring on this front and yeah I guess that's it from my session