Speed Test Mobile App UI Design in Jetpack Compose

[Music] hello everyone in this video I'm going to show you how to create a very simple UI design of internet speed test app in Jetpack compose let's start by defining the UI state for this purpose I create a new data class and name it UI State this class contains all properties the app need to render the UI I mean for example maximal speed average ping and so on now I can create a speed test screen composable it represents the whole screen and use the state as a parameter and I update the default preview using stayed with hard-coded data when this is done I add column with nice gradient background that will arrange all other UI elements on the screen all UI elements will be arranged on the screen inside the column and I will create a composable function for each of these elements the first one is a header it's the easiest one just text with some Style then navigation view where I use some prepared drawables and show them as a bottom navigation items the third item representing the current screen will be pre-selected and colored with pink color while other icons are gray as you can see in the preview now the info about average pink and Max Speed reached during the test here I will show you two columns with the same design just different information to minimalize the code duplication I create the extension function info column with two parameters title and value and I use the info column inside the row to display the pink and Max Speed next to each other I fill the composable with State data you can see the result in the preview to make it looks nicer and more readable let's add one more thing a vertical divider separating pink and Max Speed yeah it's much better now the speed indicator this is the most complex part of the screen it will display a circular speedometer similar to one you may know from the car together with a text field displaying the current Internet Speed and the start button before I start with the implementation I would like to show you how to draw basic shapes in jpeg compose at first we need a canvas canvas exposes draw scope which is the drawing environment it provides API to draw basic shapes and paths and do sizing and transformations now let's define two points point a in the center and point B on the left edge of the canvas I can draw a line between these points using draw line method when I wrapped the line inside the rotate method I can rotate it by arbitrary angle now let's use different points both close to the left edge of the canvas connect them with the line and rotate it like before but this time in a for Loop it creates this semicircle I can even use lines of different lengths based on the index of the line by doing this I can highlight some values I separate this logic into extension function and use angle size and number of lines as a parameter so I am able to draw different semicircles of different shapes like this one now let's draw an arc using draw Arc method it draws this shape similar to slice of pizza or Pacman if I choose a different star angle and sweep angle as a parameter and by changing the style to stroke I get the desired look and as in the previous example I move the implementation into extension function where I use angle size and progress as a parameter so I can animate the arc using this knowledge I implement the draw line method it's the same as in the example before and draw Arc method this method actually draw three arcs with the same size but slightly different styles the idea is to combine the fat Arc with a low opacity and a thin one to create a nice blur effect you can see the result in the preview I tried different values to check that it's working as expected now I create a start button to be able to start the speed test it's just an outline button with rounded corners and text displaying the current speed during the speed test okay the UI is done and it displays the correct state of the app however we cannot see it moving as there is no real speed test implemented I'm not going to implement it as this is just an UI showcase but I will create an easy animation using an enable object animable is part of low level animation API it's a value holder that can animate the value as it changed in this case the value is a floating number from 0 to 1. I implement the extension function to UI state which uses this value and creates the appropriate UI state from it unenable object provides a suspended method animate too I can call it to change the animation state I Implement start animation method where I hard code some animation keyframes this method is called when the user presses the start button and let's check the final result [Music] I hope you like this video if so please share it with others and subscribe to my channel see you next time

Channel: Juraj Kusnier

Views: 4,333

Keywords:

Id: 8LuWMYXW6nw

Length: 8min 4sec (484 seconds)

Published: Fri Jan 20 2023