‫Hello, my friends.
‫In the previous video we have added successfully that dependencies the camera X and the ML kit for the
‫QR code.
‫So in this video we are going to design our layout.
‫So here I will remove that text view, open the activity main dot xml and we are going to add this camera
‫x widget which is an Android X camera dot view and preview view, which is allowing us to use a preview
‫of the camera and access the camera directly.
‫Okay.
‫So first of all, we are going to add frame layout, match parent and match parent.
‫The background would be be like these zeros black and the ID would be contained.
‫This is the container and.
‫Here.
‫We are going to add the camera preview.
‫We will start by Android x dot camera
‫dot view, dot preview view.
‫Let's see if there add dependency on Android x view alpha.
‫Let me see that dependency here.
‫Build that grado.
‫Okay.
‫There is a newer version of Android X.
‫Okay.
‫Let me see.
‫And your version is available 1.2.0 Alpha three.
‫So I will copy this.
‫1.2.0
‫Alpha
‫three.
‫Let me see again.
‫Alpha three Dash.
‫Alpha three.
‫Alpha zero three.
‫That sink now.
‫And see if the error have been.
‫Successfully solved.
‫And there we go.
‫We have seen the successful.
‫Now let me click here and here.
‫The error have been solved.
‫Insert required.
‫With Android.
‫Layout height which is required to match that width match burned also.
‫And that id would be
‫ID.
‫Preview.
‫Okay.
‫This is the preview.
‫And here we have solved it correctly.
‫This is about the preview.
‫Now here we are going to add.
‫An image view inside a relative layout.
‫So relative layout.
‫Match parent and the height is about 718 DPI.
‫And inside this relative layout I will add an image of you here I width as 300 dpi and the.
‫Height is 300 DPI and again the ID would be that image and that the center in parent because I need
‫to display a box like the like the container that you need to center the barcode inside this image view.
‫So I use this image of you in order to detect the borders of our scanner.
‫We will see it when we run the application.
‫So here center and parent and center center horizontal and it is equal to true.
‫The background would be from the troubles that I will add it now double slash and here I will name it
‫as camera borders.
‫So I will add this image now and here we close it.
‫I will click on alt plus enter to create the draw resources and root element is a selector.
‫I will select all and paste this code.
‫So this is the shape, this is the border, this is the square of that that will be displayed as an
‫overlay above the camera view in order to detect the box that will be centering the QR code inside it.
‫So if we see here our layout, it will be like this.
‫So I will add the constraints for this.
‫Relative late out, I put zero zero.
‫And here it is.
‫That's good.
‫Okay.
‫This is our lay out.
‫This is the container, the frame layout.
‫I will add here the frame layout.
‫This is how we design our main.