Simple Login UI with Background Video in Jetpack Compose

[Music] hello everyone in this video i'm going to show you how to create a fancy looking login screen in jetpack compose so here i have android studio with new empty project some dependencies like exoplayer it's open source media player that will be used to render the video and resources like logo and video that will be displayed as animated background so let's build the app for the first time and let's start coding i start with a simple column that holds all basic elements such as logo input fields for username and password buttons and text elements are aligned to the bottom and centered horizontally there is an icon on the top i use painter resource api to load the rasterized logo and tint it with the white color next let's create a new composable for user name and pass for text fields the design will be very similar just with slide changes so the composable will contain some shared code later next there will be a white rounded button with sign in text i will implement the onclick method later for now let's focus only on the design so let's rebuild the screen to see how it looks add a thin slightly transparent divider line to visually separate the sign in and sign up part of the screen let's check if there is enough padding okay and at the end raw holding text and sign up text button actually strings should be also loaded from the resources and not be hard coded in the composables i could show you how to do it properly in some of the future videos let's up the app to display content h2h i can achieve this behavior by editing teams xml file the difference will be more visible later when i change the background now let's focus on the text fields i declare sealed class input type that i can later use as an input parameter for my composable input type contains two nested objects name and password with predefined parameters which i will use to set up text fields as you can see the parameters are label icon keyboard options and visual transformation now i setup name object using username as a label some material design icon keyboard options which you will be able to see in the bottom right corner of the software keyboard and now visual transformation is necessary similarly for the password object i use password label lock icon keyboard option appropriate for the password text field and password visual transformation that will hide the original text and replace it with dots i have to update the declaration of the text input composable function to use input type as a parameter and also the function calls in the code now i can use icon from the input type as leading icon of the text field and label of the input type as a label of the text field and see how the design change when the project was rebuilt as you can see labels and icons work but the shape and the background colors should be changed i use another composable function text field colors that create default text filled colors object with custom colors this is not part of the input type because it's the same for both text fields and now it looks much better i must not forget the single line parameter and the rest of the input type properties such as keyboard options and visual transformation besides these parameters i need to provide focus requester it will be used to change focus to the next text input and keyboard action where i specify action that will be triggered in response to imi action on software keyboard when this is done let's scroll up back to the login composable where i define focus requester and focus manager focus manager will be used to clear focus and close software keyboard at the end so let's implement this behavior into the right method of keyboard action object focus password field in on next action and clear focus in on done action let's build the app and test if everything works as expected this doesn't seem to be right but besides this small glitch everything works i implement small workaround by manually applying padding when software keyboard appears on the screen actually after short investigation i found out that the issue where the input field is sometimes partially covered by the software keyboard is actually a bug in jetpack compose and it should be fixed in the latest version so i could revert the figs after updating dependencies ok let's finally implement the video background at first i need the uri pointing to the video location video is saved in the resource directory so i need to get the resource identifier and manually assemble this nice path with android resource schema or maybe there is a better way to do it but anyway the method returns the location of the file that can be used as a parameter of logging composable then i will need the exoplayer itself exoplayer instance can be created using exoplayer builder which provides a range of customizations let's create and set the media item consisting only of the stream uri that i have as a function parameter then repeat mode set play when ready to true and call prepare player the next one will be player view it displays video subtitles playback controls and so on but i actually don't need any of these fancy features just pure video let's link the view with the player setup layout parameters remove any user controls and set the resize mode to make sure that the video will be always displayed without black strips then use context and build exoplayer instance inside remember method to make sure that the player will be instantiated just once during the composition exoplayer view is not composable but only classic android view to make it work here i need to wrap it inside android view composable which can make android view works inside jetpack compose world and let's test it and it doesn't work but it looks like i made the typo in video uri now it works as you may notice nothing happens when i press the sign in button let's implement some dummy login function providing at least some feedback to the user this method will be called when the user clicks on the sign in button or triggers imi keyboard action on the password text field as this is only a ui demo the method won't perform any real action just display toast with an error message something like something went wrong please try it again later or just try it again later to keep it short then i need to scroll down and find the siding button update the on click listener and also pass for text field and update the keyboard action okay and that's it if you like this video please like and subscribe to see more videos like this one thank you [Music] [Music] you

Channel: Juraj Kusnier

Views: 13,866

Keywords:

Id: -oT9-IbPQWY

Length: 9min 54sec (594 seconds)

Published: Tue Jun 14 2022