You are planning to integrate a camera functionality into your Jetpack compose Android app, then stay tuned to learn how. Hi guys. My name is Yanneck Reiß. I hope you're doing well and I welcome you to a new video. While the camera is nowadays often the main selling point of a new smartphone. It has always been a hustle to integrate in-app camera functionalities in an Android app. While in the old days we had to use the Camera one API to integrate in-app camera features into our Android apps. In the recent years, Google provided us the Camera X Library, its a support library that really helps us to integrate such a feature into our Android apps. However, for Jetpack compose, there is still no direct implementation for this library. But don't worry, there is a way to use it in your Jetpack Compose app, which I'm going to show you in this video. So let's waste no time and get started. Now in Android Studio, I already prepared a small example project which I will provide for you in a GitHub repository, which I will link down in the description. However, let's go step by step through the process of implementing this feature in Jetpack Compose. So the first thing we need to do is to go into our Build Gradle app file. And here it's important that we add this dependency here. The Camera X version, which I'm using here right now is 1.3.0 alpha zero seven. But you can also use the stable version to build No problem. Next, we go into our main activity and you can see that I have here the main screen. Nothing more, a regular jetpack compose set up. And if we go in here we have a main screen and as you can see, we also have a camera permission state. And this camera permission state is of the accompanist library, as you can see here. So if you also want to use it, use the Google accompanist permissions library. And then you can also do the same like I do here because I am checking here if my app has the camera permission. And of course, if you have ever implemented a camera functionality, you know that you need to go to the Android manifest and also need to check that you edit the use permissions camera here. But as you can see, the user permission is underlined in red and you can see permission exists without corresponding hardware use use-feature Android hardware camera. So this is also required and we can simply copy it in here. Here we also need the android prefix and then we also need to close the tech and should be fine. Next we go back to our main screen and you can see that we have here the main screen and then the main content. And in this main content you can see that I simply check for the has permission state, which comes from the permission state object here. And if we have the permission, we show the camera screen, which we will see in a second. And if we have no permission to use the camera, you can see that we here have a placeholder screen, no permission screen. And we add here the callback for asking for the permission. So let's quickly take a look into the no permissions screen. And as you can see, it's a simple screen. We have a column, we have an explanation text that we need, the camera functionality and also button to trigger this permission request. And just to mention also, I can here and yeah, the button text. So now that we discussed the set up, let's come to the interesting part. We go back and go into the camera screen composable and you can see that we have the camera content and this is the place where we actually want to implement our camera preview. So our final goal is that we open up our app and we can see the camera preview of our camera and they'll do some stuff with it later. As already mentioned, we cannot directly use the camera functionalities, but we can make use of it by a little trick. We can use the Android view. This composable allows us to use views from the legacy view system, let's say, and view. And here we use this factory function to initialize our preview so this can see with the context as input. And with this context we can now say preview view. And here we now import this context so that this preview also fits all the screen. We additionally need to set some parameters. The first thing we need to set here are the layout prompts. So let's say layout params, and then we can simply say a linear layout layout parents and then here we can say the width and the height. So we say match parent for the width and also match parent for the height, cos we want that for for camera preview. If you have another use case, of course you need to add depth and say what is the current color of the preview we want to have. And this is only relevant if the camera is not open yet and we have a loading state for example. So here we can say color black and we take the Android graphics, not the compulsive version. And then we also say scale type and which comes from the preview. And he will say Preview, we'll scale type, and then we say first start. So that helps us to avoid some cropping issues on some devices. Additionally, we also want to add a modifier to the Android view and he will say heading and we take the inner padding here. And what we also want to do is to add fill max size. So we fill out the whole screen. Now we have already the preview in place. You would stop the app. Who would see that nothing happens. We only see the black screen. That's why we also need a camera controller to get the camera control in place. We first introduce here the context, say loca context, but current. And we also say life cycle owner lock lifecycle on a current. And finally, we also need the camera controller. So we see camera controller member lifecycle come on controller and here we at the contexts. So now we only need to import and are fine. So the lifecycle camera controllers actually what comes from the camera library and contains a lot of helper functionalities that really facilitates the implementation process. So to connected to the preview view, we first say here also so we can access the created view which returned from the factory and now we can say preview view and then we say have a view dot controller and we assign our camera controller to it. Next, we only need to say camera controller dot binds to lifecycle and here comes the lifecycle owner to play. So the controller reacts on lifecycle changes. So if the lifecycle owner gets destroyed, the connection to the camera controller also automatically gets destroyed. We can make sure that that is true by going into the documentation here and we can see when the lifecycle status start or greater the controller receives camera data, it stops once the lifecycle owner is destroyed. Now that we also got our camera controller into place, let's try out what actually happens if we start the app. So the app started and you can see here is our no permission screen. So in order to access the camera, I click on grant permission and we get prompted with this permission dialog, I say, while using the app, allow permission. And now you can see the default dummy emulator camera screen here. So it worked. While it's already cool that we have the camera preview in place. Let's actually do something with our camera preview. So in a common use case. We want to take a photo and with camera X, that's also very easy to do. So we just need to tweak our court a little bit. Let's say we also have a button to actually take a photo, so we use some floating action button for that. So we say here, floating action button, use the extended version and say text, take photo. And on click we actually access the camera controller and say, take pictures quickly from it. That's here. And now to access here the take picture function. We also need to put in an execute and here we can simply say main execute and then context converts get main execute to. We once again can input the context here and then additionally, we also need to use the image capture on image captured callback also import it. So in in here we can say override and we have a callback for on capture success and one for the on error. So if you want to capture a photo, you can say on capture success and use the image proxy to, for example, convert the image to a bitmap. However, note that these images from the image proxy are not rotated. So that is your responsibility. And also if you're done processing the processing this image proxy, make sure that your call dots close here. So that's how you can implement the camera preview in Jetpack Compose. Did you make already own experiences with this API in Jetpack Compose? Did you stumbled about any limitations? Leave me a comment with your opinion. As a last word. I hope that Google someday provides and owns epic compose version of the camera library. But this way I sowed in this video is also okay for the moment. Do you want to see any other tutorials of this topic. For example, video capturing or image analysis? Then let me know! As always, I hope you had some takeaways like the video. Subscribe to my YouTube channel, Activate the notification bell and I hope to see you soon.
