Simple way to upload images from galley and Camera capture Jetpack Composer, Android Studio

hi uh so in this video we are going to see uh how to get images from the gallery and how to get uh easily access the camera to take a pictures okay so this is not a uh Hardware camera so this is a system based camera we can access easily without any hardware implementations okay so this is our old application just I showed a bottom navigation demonstration with this and I just added on Fab application okay so in this Fab we can we are going to add uh the both Bottom bar okay so let's see let's started so uh for starting this we have to add some permissions I'll just project it's not in a project I'll just go to app okay so here okay manifest okay so in the Manifest we have to we are going to add to permissions user permission camera okay so if we are adding a camera permission we have to add um uh camera okay actually it's showing so add feature tag so this one this one we need to add okay so camera that's it okay so this is fine now uh so once we added this one so we are going to work on this okay actually presentation UI so where is this bottom navigation sheet okay in this bottom sheet instead of I'm going to create one bottom sheet okay so let's uh I'll just okay I'll create one name file name called okay what is this not class file bottom sheets okay bottom sheets so in the bottom sheet I'm going to create one bottom sheet which is having camera and gallery actions okay okay let's see how to create a bottom sheet at fun okay um camera bottom sheet okay okay so here composable okay we implemented the composable so inside composable bottom sheet is uh usually like we have uh modm bottom sheet we have used modm bottom sheet only right now and all time so we are going to use bottom uh what is it modern bottom sheet only so modm J for modern bottom sheet we have to add Del like is that model bottom sheet okay different okay so on dismiss listener and inside that inside that we can design our column okay column so in this we have missing the state it's like where is that seat State okay seat state is we have to remember uh few things before uh starting okay so before starting I'll just add here sheet State okay sheet State then on on on dismiss on dismiss request okay then on action request okay on action request we have to send some output and output will decide which output we need to send we are going to send okay so these things and all what is this this is experimental API we are adding this one okay in this instead of this on dismiss we are doing this on dismiss St shate we are adding this one on action we will add when we are going to add some actions okay so first we will decide uh column okay uh inside column row okay row we are going to add two things uh one is camera and one is this one so I'll just add to Icon button okay icon button okay okay icon button okay in this icon button I'm going to add icon okay so not icon icons actually okay icon only this is icon this is icons okay so this one will be what is that not default then we'll try to search something fil dot okay I'll just add some images okay uh that is fine so same kind of thing we are going to add one more okay okay so this one is okay for this itself will take more time so I'll just add this plus okay so plus is for camera this is for image okay gallery gallery we can add just one subtitles also if we want Gallery okay here camera okay so this is our bottom sheet so by clicking this each item we are going to populate what we are going to do okay right now so then we'll start uh implementing um the remember state for which we are going to use uh to them so it is very simple process so just first we need to implement Gallery two launchers Gallery launcher and Camera Launcher okay so we are going I'll just add gallery launch launcher is equal to remember launcher from activity okay we can we can launch the activity from here okay so the contract is activity result contracts do get Contract okay get Contract okay then inside what what what is the purpose is this is activity once you receive the gallery it will give you U Ur for the specific path okay so with this Ur you can process so with this Ur we are going to upload or activate images which is we are going to use so uh I'll just return return this one as a string okay string means we can send the URI as a string to the output okay on action result u.2 string okay I'm sending the URI do2 string to back in this so this is a gallery launcher so we are I'm going to add Camera Launcher same thing okay contract okay take pictures so here we are getting get contacts right get instead of get contacts we are going to add take pictures as a contract so this is the difference between camera launcher and that one so here also the same thing so it will return return it as um uh success it won't give it as this one so the process is if where is it if this is a success of failure flavor it is true actually it will be success or failure right Boolean found bit map okay okay let's see okay uh this should be will change okay then we have to get the permission so for permission uh we are I'm going to add one dependency actually okay so it will be easy it it will be easy to get a permission from the peoples okay so that will be like um I'm just taking the permission there is it okay let's see I'm having it or not I'm not having it okay yeah this is the permission so uh the dependency so the dependency will we don't want to work uh more more uh to get uh so many permissions when we are doing it so it will automatically get the permissions for us okay but we need to implement few few codes compared to other things let's Implement those codes okay where is the bottom sheet okay so the thing is um here I'm going to implement Val camera permission is equal to remember permission State okay remember permission state so this permission state will active when the build will done okay then we will add it okay in this one inside that permission we have in this one we have permission is there so in the permission we are going to add camera okay so actually it is builded we can found the context now where is it okay remember permission State okay actually this is also experimental API mostly it is in a development pH right so mostly will be experimental API okay so we have a camera permissions so once we we got a camera permissions we need to do two things okay so one is uh create file okay we are going to create a file uh that is a function function called okay this is a create image file okay we are going to create image file where storage is equal to context actually we didn't get take context or what yeah we didn't take any context before right so okay so let's take two things well image Ur is equal to remember okay Val is to remember mutable mutable State off okay null okay okay yeah state of null so once the image Ur is equal to well context text do current okay local context. current okay so here context. get external storage directory okay so contact students we get the external storage directory this is not a null actually instead of okay yeah this one environmental permissions do direct okay so this one we are getting in a storage so once we got the storage we are going to create a file okay file okay file uh create temporary file so image suffice equal to jpg and storage we are going to store so the prefix should be uh not uh image plus so because we we will take multiple image right this field need doesn't want to change so system. current time Time Miles okay system. current time mile we are going to do this and we are adding the storage directory so this is done so image ur. val. do from file okay so uh u. from file should be uh this one but we don't want to do this one actually now we are going to return something as returning is URI we are going to return a URI so return file provider. get okay yeah this is the one file provider get urri from file context then this file provider. file so actually what I am using is this is a provider it's a content provider you all you guys already know mostly so content provider we are going to create a content provider in manifest and this will store in that content provider place and then we are taking it from that one okay so the taking captured picture picture will store in that place okay so then now we are going to add um where is it uh we are going to take that one okay so let's see how to capture the image okay once again here here here okay Gallery okay Gallery okay Gallery I'm going to if camera permission dot state DOT is granted if it is granted image ur. value is equal to create file okay so we are taking okay taking a file and the same thing okay what we are getting launch. image ur. launcher. value okay so record VI found U so there is some mistake we found Camera Launcher okay launch camera permission okay let's see let's let's finish this and we'll see another one okay gallery for gallery what we need to do is very galleries as usual we did last time right it's very simple procedure Gallery answer. launch do launch okay in this launch we have to give yeah this one so it will take all the galleries from your place so this one uh let's see what to do with this so actually we need to go to this place where is that in make Camera Launcher okay camera launcher we have done something wrong okay okay take pictures only take picture there is no preview so now it is done so one uh what is what will come inside is if it is a Boolean okay when it is a Boolean so this won't be a URI so this the image which we are storing here right that is a URI for this one image U dot two string okay two string okay so this is a UR on action both will go back and show the images right okay so this is happening then okay so these things are done so let's go and see how to do that um provider thing in a manifest okay let's see so we came to a manifest file uh so in the Manifest we inside application we are going to write a providers okay provider so provider authenticator is our thing okay so but uh authenticator is this one only but not this one we have actually this one but we have to give what we are giving here okay Authority right so Authority this one means we have to give the same thing over here this is here the name is provider but same name the name is andex doc. file provider okay this is the name and I'm going to add some more thing export export is false okay granted UI permission true okay you permission is true and inside we have to add meta okay metad data not this one metad data inside metadata name okay name is same name Android Dot support dot not V4 file provider no no actually uh underscore pa okay so this one then resource so resource should be at XML SL underscore okay so uh don't worry so we are going to create an XML too so where is it resource okay resource XML okay so resource XML we are going to create the same file path folder okay okay let's [Music] see we are going to create a XML so this is path okay file path just create the XML okay once we create once I created an XML I don't want the image I need to directly go to the code and okay first line I leave it okay Parts okay okay extended path okay name is external files okay path this Android slash okay I'll just copy and paste it I already taken that okay okay this one only okay this is done done okay so this is the external Parts okay we added this one over here so this one also we have it okay so now the content provider is done it will take the place once it is done now we can run and check okay I'll just run and check it is working or not okay so sorry we didn't add that one in here right so where is it okay I'll create Val okay well open open bottom sheet is equal to remember mutable state of false okay so mutable state of balls so wherever this is the action so do value is equal to okay so when it is done where is it it is inside s FL okay so here only here if open bottom sheet. value okay if it is it means we have to create camera bottom sheet so bottom sheet States also we have to open page State not page state well sheet State okay okay remember modern sheat State okay this also experimental API okay so this sheat state we need to give where is it give over here then on dismiss on dismiss then okay wa import function on action where is it on action okay so on action what is it something is different on dismiss okay okay value value okay so here uh once again we are going to create well image PA is equal to remember okay mutable state of string okay what is it so in the image path we are going to add dot value is equal to value okay so this is the value well let's run and check I'll run my application we can check this is working or not log D value okay I'll just run the application again let's see so uh we have used content provider to store the applic store the taken image then we are going to we are we used the uh uh we used camera and gallery so this camera is not a hardware camera this is an easily access camera you just need to have an launcher the system will launch systems camera and you can take a picture okay yeah our application runs let's I clicked I'm clicking Gallery it's asking for permission I allow crashed let's see why the crash C and what is this file provider fail to find configuration route that contain we gave the same name name right actually tosc do TOS do okay then we'll go to this path file oh here here the name is different yeah okay yeah I think that name I just copy and paste right that's right okay yeah uh now I am running Gallery sorry that is camera actually so camera is working so we can see the camera I'm just taking the picture okay it take came giving okay so it is returning back to our application okay so we can Pro we can show the images Also let's see let's I disconnected it will connect back okay yeah uh now we can click Gallery so it is going to Gallery okay so I'm just going back okay so Galler is working

Channel: Charles Realm : Developer

Views: 13

Keywords: image capture in jetpack compose, capture image in jetpack compose, image capture and save to gallery in jetpack compose, easy way to create custom camera and capture image in jetpack compose, custom camera in jetpack compose, camerax in jetpack compose, camerax updates 2024, upload images from gallery, upload images from gallery in jetpack compose, user system camera to capture images in jetpack compose, simple way to user camera in jetpack compose

Id: 5jCFprrUTXY

Length: 23min 42sec (1422 seconds)

Published: Wed Jul 03 2024