Courses

Module 12: Creating an Uber Clone Transcript let’s jump into the code and styling with a mock-up of the final application but before we begin i’d like to start by setting up some styles and basic utility methods i’ve created a new uber cn1 project and placed it in the package com.codname1.apps.uberclone i gave the main class the name uberclone as well in the main form i’d like to highlight three different lines first we have the default gap between the label text and icon which is relatively large in the uber wrap so i’ve set it to two millimeters by default next we lock the phone into portrait mode this isn’t the only thing we need to use for this finally we show the login form which will get to in the next part we need to install and configure some cn1 lib extensions we’ll install more later but for the first part we’ll need sms activation for the ui of the country picker we also need google native maps for the map ui support don’t forget to set up google maps in the project as mentioned in the maps module as i mentioned before locking your in orientation and code isn’t enough for ios in ios we need to define orientation lock in the project level which we can do in the codename one settings ios section some styles are essential to begin with so we need to add the following styles into the theme notice that a lot of these styles are a result of trial and error to get the ui to look like the designs the process of choosing the values boiled down to trying grabbing device screenshots adjusting runes repeat it sounds like a lot of work but it’s not too hard as you quickly get a sense of what needs fixing i define form as white which is really the main thing here on android by default they are a bit off-white i defined label as heavily padded with a light font black on white this is consistent with the common use of labels within the app so i’ve set foreground to black and background to white i’ve set padding to a generous four millimeters as padding is very heavy in the uber the margin is set to zero for almost all of the components here i use standard native light fonts for almost everything as they look great everywhere in this case i chose a 3.2 millimeter font which seems to closely match the dimensions of uber font choices one important thing to mention is that i used derive all on pretty much every style in the theme this works by right clicking a style and selecting derive all once you do that it creates styles for selected pressed disabled that derive from this style that’s a very useful starting point it’s important even for labels as they can be used in lead components and we’d like them to have a common base setting i defined toolbar as transparent without the border that exists on some platforms notice that this doesn’t handle them consistent title issue where some forms have a black title area where others have a transparent white title area i will discuss those later i’ve set the background to opaque white just to be sure i’ve also disabled the border of the base toolbar by explicitly defining it as empty i defined title command as black on white this is a bit problematic with the black toolbar which requires a bit of a hack and code to work the padding numbers are there to make the collapsible toolbar possible this collapse effect featured in several forms such as the country’s form margin is zero as usual and the font is relatively large four millimeters this is mostly used to size the back arrow icon and the search icon the side navigation panel is mostly black on white and relatively clean so i’ll just define the background as opaque white and ignored the black since that’s part of the command we have an underline at the bottom to separate the panel from the south component below so we need to reserve 2 pixels for it in the margin the padding is zero as usual as spacing will come from the commands not from the panel the underline separator from the south component is just an underlying gray border with a thickness of two pixels side command pretty much continues what we started in side navigation panel here we set the foreground to black on transparent color this will be useful with the black toolbar where we will only change the color to leave to white but leave the transparency in place the padding of the style command prevents duplicate padding when commands are one on top of the other which is why the bottom padding is so small margin is zero as usual and the font is again a standard size light font the text field in the uber app is based on the material design simple underlined text field even when running on ios so we need the text field to have an underlying border and work with black on white we define the ui as transparent with a black foreground the padding below is relatively low too so the line won’t be too far from the text input the left and right paddings are zero so the text starts will align with the line start the margin serves the role we usually use for padding it spaces out the component the underlying border is pretty simple a black two pixel border however in the selected version of the text field we have a four pixel version of the same border to indicate selection font is a standard three millimeter light font the text hint needs to align with the text field so it’s important to override it when we manipulate the text field we use the same padding as text fields i could have derived text field which might have been better a better approach but i didn’t want to get into that the margin is again identical to the one in the text field the font size is smaller and regular instead of common light font that looked closer to the choices uber made finally the floating action button which is just white on black nothing else with this we can move forward to creating the mockup although there are some additional styles we’ll define during the creation itself

Module 12: Performance and Memory Tuning If there is one performance rule that deserves to be repeated until it becomes reflex, it is this: do not block the EDT. Most performance advice in Codename One eventually comes back to that point, because the EDT owns interaction and painting. When you make it wait, the whole application feels worse no matter how efficient the rest of the code may be. ...

Module 12: Creating an Uber Clone Transcript in this part we’ll create a mock-up for some of the forms starting with the login process we’ll start with the login form since the uber app is portrait locked it should be pretty easy to produce this ui however we’ll first start with one element and that’s the country button the reason it’s logistically separate is that it has some non-trivial logic and resides in two separate forms so it makes sense to define it in a single generic class the country code picker is a button subclass but it doesn’t really look like it because we set the uid to the country code picker ui id in this block of code we try to guess the current country based on the localization settings the flags.res file is included in the sms activation cn1 lib it’s a bit of an implementation detail so this code might break in the future if so we might need to copy the res file from there or update the code we don’t have all the flags for all the countries without a blank icon the alignment might seem broken so it’s crucial to have this show picker form is useful for overriding in the login form clicking this button should lead to a different form however there is a lot more going on here the cover transition collides with the default slide transition producing a weird effect so here we keep the transition instance remove the out transition so the cover effect will work properly we then bind a show listener that restores the old transition after we are done that’s important for when the user will click to move to the next form the styling for country code picker are pretty simple it’s black on transparent background the padding is big on the left but small on the right so the text element stays near the button margin is again zero and the font is pretty standard light three millimeter font so without further ado let’s go to the login form code this is the code of the first form you will see when the uber app launches it’s a relatively simple class without too many frills let’s go over a few elements of note initially i wrote the word uber without the right font it looked weird using an image for a logo is generally the best approach i want the logo to be square so height and width should be identical we place the entire tile section and logo in the center of the form so they will take up the available space we place the logo itself in the absolute center so it will float in the middle i override the behavior of the country picker button for consistency with the native uber app this looks like a text field but acts like a button in the native app so i implemented it as such considering the rows and size is important for proper layout the rest of the ui is relegated to the south of the form this would have issues in landscape mode but since the app is portray clocked this shouldn’t be a problem we need these two images to complete the form ui the tile png and uberlogo.png there are a few styles we need to define in order to finish this form the square logo ui id is used for the logo i still have the foreground defined as this is this used to be text and not an image the main thing here are the white opaque background we use some white padding on the logo but we don’t need margin the logo background style represents the pattern tile in behind the logo this is pretty easy to accomplish once we have the tile.png file we can style it to tile on both asus we set the transparency to 255 as the image is opaque and we want to make sure this is totally opaque we define the margin to zero as usual notice we ignore padding as it just doesn’t matter for this component the get moving with uber ui id just sets the padding to a right size so it’s spaced enough from the sides but close enough to the element below we don’t need margin color or anything else because we derive from label the main reason for this ui id is the large dominating 4.8 millimeter font size the phone number hint represents the text that looks like a hint next to the flag when we move to the next form it actually becomes the real hint text it’s gray with no background it has zero padding on the left to keep it close to the country picker button the font is 3.7 millimeters which looked right after some trial and error the separator ui id is a container which has an underline below it as a container we define it as a as completely transparent it has a two pixel bottom padding to leave space for the underline the margin is zero as usual the border is an underlying two pixel border in a gray color the connect with social button is the button at the bottom of the ui it looks like a label but has a bluish color i need to define the padding even though it should be derived from label as deriving from built-in types isn’t always 100 reliable i could have worked around it by defining a my label uiid and deriving from that i still chose to derive from label which mostly works but i define the font just to be on the safe side this is the ui we’ve made next to the native uber ui you will notice some minor differences mostly with fonts not being pixel perfect i didn’t aim for perfection with fonts as that can be endless there are some other nuances i’ll go into

Module 12: Performance and Memory Tuning Images are often the biggest single contributor to both application size and runtime memory pressure. That means image choices are not just aesthetic or API-level decisions. They are core performance decisions. The key lesson here is that not all image representations cost the same thing. Some image types are fast to draw but expensive in memory. Others are compact until decoded, but pay a cost when they need to expand into drawable form. Still others exist mainly to support specific low-level use cases and should not be your default tool. ...

Module 12: Creating an Uber Clone Transcript in this part we’ll refine the login form and go into low-level graphics for animation and background this is how i finished the previous part i discussed the fonts but there are other differences obviously the flag is slightly different since i used our own resource file but there are two other noticeable differences the first is the drop shadow behind the logo which is missing the second is the background rotation of the pattern which is ios specific in the native app but i don’t see a reason for that i’d like to have it on android too the simplest thing to do is generate a square image of the logo that already has a translucent shadow within this would be pretty trivial to anyone versed in photoshop and would look great on the device however my goal is to teach programming not photoshop so i’m picking the hard way of solving this the effects class in codename one allows us to create a shadow image for the given dimensions or image since the logo is square we can just use the dimensions approach the method accepts the size of the shadow the blur radius which means how far it should go out of the size limits and the opacity as a value between 0 and 1. so now we have an image of the shadow but the logo image and the background are already fixed so we need something new instead of using the logo as it is we place the shadow in a layer below using the layered layout and this will produce the desired effect with one huge caveat it’s really slow shadows are computationally slow we use gaussian blur to generate shadows and that’s a very slow algorithm the solution is to move that code offline the ui will appear and the shadow will appear a second later when it’s ready the placeholder is there so we can put the shadow into place when it’s ready when the shadow image is ready we replace it on the edt with the new shadow label the label uses the container ui id which is always transparent with zero padding and zero margin the android version of uber doesn’t include the rotation animation for reasons that are just unclear to me i think it might collide with some of the material design transitions or some other problem it works nicely on all os’s with the way i implemented it i could just rotate the tiles like the one pictured above and call it a day the effect would look decent and perform well however i wanted better control and in order to get that i need shapes shapes allow us to draw arbitrary vectors curves in a performant way since this is effectively a vector api rotation and scaling don’t distort the result in order to use this api i need to use the low level graphics api and the background painter we can set the painter for the logo object using this code notice that normally we don’t need a reference to the parent component logo but in this case we need it for the animation i’ll go into that soon but first i’d like to say a few words about painters styling can only go so far if you want to customize the background of a component in a completely custom way you can use the painter api to define the actual rendering of the background this overrides all style rendering and provides you with a graphic object you can use for drawing notice that the graphics api is a low level api and might have platform specific behaviors that aren’t as refined as the component style apis it’s harder to optimize low-level graphics code so use it with caution now that we got this out of the way let’s look at the painter code itself this is the rotation angle in degrees we increment this as part of the animation logic this is the shape object representing the background pattern we draw it or stroke it like a rubber stamp the constructor and the draw shape method create the pattern shape that we stroke later this code happens once to generate the lines and we then color them later on the register animated method of form is needed for low-level animations it triggers invocations of the animate method with every edt tick so we can update the animation state in this case we change the rotation angle with every tick the draw shape method adds logical lines and quads to the given path a quad means quadratic curve to the given position you can see three methods used on the path element move two moves the virtual pen in the air without drawing anything to a starting point line two draws a line from the last position of the pen to the given position quad 2 draws a quadratic curve bezier curve to the given position through the given curve position the paint method is the callback from the painter we fill the background rotate the graphics context and draw the shapes notice we just invoke draw shape and it draws with the current alpha and color in place the low level animation code invokes animate at fixed intervals based on edt heartbeats normally you would return true to trigger a repaint but here i only want to repaint a specific component notice that i only change the angle and move every other frame to conserve cpu also notice i rotate by 0.1 degrees which creates a very smooth slow and subtle rotation this paint method belongs to the animation interface we don’t need it as we always return force once all of this is done the login ui rotates in the background slowly and smoothly a shadow appears after a second and the ui looks in my opinion as good as the native ui

Module 12: Performance and Memory Tuning Performance problems do not always come from one obviously slow algorithm. Just as often they come from structural choices that look harmless until the app scales a little. Lists, parsing location, overdraw, network threading, and resource-file bloat all fall into that category. ...

Module 12: Creating an Uber Clone Transcript in this part we’ll finally leave the confines of the login form and move to the simple forms of social login and the country picker ui i’ll start with the social login markup since it’s so small and simple this is the form you see when you choose the social login option i crop the bottom as it’s just white this is a pretty trivial ui there isn’t that much to say about this form it’s trivial we use two icons for facebook and google and define the back arrow thanks to all the theming work we did up to this point everything just works and looks like the uber app we do need to define the flag button though as it’s a ui id that i reused in several forms it got the name from the country’s picker form which we’ll go into next the flag button is just a label in terms of padding etc it has a sub subtly larger font at 3.2 millimeters not much larger the country picker form lists the countries next to their flags the first letter of the country name is highlighted between the countries and when you scroll down the title area collapses to make more room it does that with a smooth animation effect speaking of the title area it’s white on black instead of black on white we reach this form when we click the country picker button but that only happens in the phone number entry form which we will discuss shortly let’s jump right into the code predictably the form is a box layout container on the y axis the init black title form method is a static method in a common utility class we’ll cover it soon we don’t have flags for all the countries so we need a blank space icon so the elements align here we loop over all the country codes and create a button with the flag letter ui id for every entry we also need to implement the alphabet letter headers every time the first character of a country changes we add a label representing the entry when an entry is selected we update the text and icon of the country code pickup button that launched this form we need to override the toolbar initialization so we can set the proper black toolbar ui id speaking of the black toolbar it is predictably styled as black and opaque we have a one millimeter padding which doesn’t exist in the default toolbar it’s helpful for the collapse animation effect so padding still remains the margin is zero as usual flag’s letter is the letter that appears on top of every letter change between country names the colors and the opacity are things are picked from the screenshot image the other aspects of this ui are derived from label the form with the black title requires some work which should be more generic as a black title area is used in several places within the uber application for this purpose we have the common code class which stores common static code in the application this is a non-trivial task as the logic needs to support animated collapse of the title area as the user scrolls down the method accepts a callback for the case of a search operation this isn’t implemented yet but if it’s null a search icon isn’t added we add the back command as a button which allows us to place it above the title in a custom way and animate the position we can’t use the title command uiid as is since it uses a black on white scheme in other forms i could have used a different ui id here if we have a search callback i build the layout that includes the search button otherwise i create a layout without it i place the title on top of the back button container using a layered layout it doesn’t seem to be on top because i’ve set the top margin so it resides below the black arrow icon i did this so i can animate the position of the label fluidly by changing the margin value the this one line allows the title to collapse into place next to the arrow it translates the style of the title which currently has a large top margin to one without top margin and with side margin this means that the change in the style causes the title to move next to the back arrow cover transition is used in the back title form on ios notice that cover transitions expect in and out values for cover and uncover the white on black title is a white title style and as the name suggests it has white foreground and a transparent background as the black portion comes from the black toolbar ui id the padding is pretty standard these numbers were picked to align properly with the commands both in expanded and collapsed states the margin is actually zero as we change this manually and code it might make sense to do the margin here for some cases the font is standard light font but four millimeters in size which should appear bigger but not huge subtle the left margin version of the style does define the side margin to leave room for the arrow this means that the collapse animation will mutate into this ui id which has no top margin so it will effectively align with the back arrow however the left margin will keep it from going on on top of the arrow it also evens out the padding so things look more aligned now that they are on the same row derive the white on black title ui id so the settings we don’t override are identical the font is the same but a smaller three millimeter size this will also animate as the title slides into place it’s subtle but noticeable

Module 12: Performance and Memory Tuning The most important rule of performance debugging is simple: stop guessing. Profiling exists because intuition is unreliable, especially in systems with several interacting layers. This lesson makes that point with exactly the right kind of story. Teams can spend hours arguing about where a slowdown must be coming from, only to discover through profiling that the real problem is somewhere much less glamorous. That is not an exception. That is how performance work usually goes. ...

Module 12: Creating an Uber Clone Transcript in this part we’ll go into the sms activation flow the first form in the sms activation flow is the enter mobile number form it’s a simple form even though there are some interesting subtle features here the cool thing is that we did almost all of the work for this element already Text Fields let’s jump right into the code that makes that form we’ll use standard back navigation since the toolbar is pretty standard here the phone number text field is right next to the country code button we place it in the center of the border layout so it will take up all available space i want the padding on the text field and button to match so they align properly once paddings are set they are always in pixels so we need to change the style to use pixels i don’t want to impact the left right padding values so i extract them first and save them so i can restore them into the ui i could technically create a separate ui id to align both but i wanted to do this in the code so future changes to the theme don’t break alignment just so you’ll get a sense of why this exists this screenshot shows side by side how this looks with and without the alignment code guess which is the right one you can start editing a text field by invoking start editing however this is a bit more challenging to do with a form that isn’t showing yet so we have a special case for that set edit on show and this is pretty much it for this form SMS Verification once the number is entered we move to the sms verification stage or password entry stage in this case i’ve hard coded the sms verification stage i didn’t do the sms resend countdown but i did do the number input notice that the text fields look like android text fields but have a sort of center alignment structure also notice that the error mode spans the four text elements let’s jump into the code and look at how this was done Digits Form the enter sms verification digits form is a bit of a mouthful but it describes the function of the form rather well let’s go over this form line by line we use a border layout and place a box in the center which we make scrollable on the y axis the reason for the border layout is so we can stick the countdown label in the south otherwise i would have used box layout for the entire form notice i set the container to be scrollable on the y-axis this is important for containers where we have text input it allows our keyboard code to resize the container properly when the keyboard shows i’d like to also point out that i used the standard back command in the toolbar we create an array of text fields to loop over this allows us to easily change the code to accept six digits i’ll discuss the create digits method soon yes this works it adds all the components and the array so it will add the four digit text fields the error label is always there we just hide it for now i don’t animate the recent text again notice that i use board layout to position the recent label at the bottom and place the rest of the stuff in a box layout in the center when the floating action button is pressed we validate the input so we can decide whether to show an error or proceed the generic creation code creates the array of numeric text fields and aligns the hints to the center this logic makes sure that once we type a character the input will automatically move to the next text field in case of an error we just change the underline style we could have also done this by invoking set ui id which might have been more elegant we bind a listener to each text field and if the length of the text is 1 we stop editing and move to the next text field and this is pretty much it with the exception of the styles we had to add to make this happen Digits Style the digit style is a special case of text field specifically designed for this form the main reason for a special style is the problematic center alignment and text field because of the way this works i preferred using a one millimeter padding on the sides to give the feel of center alignment in this case center alignment works in text area label etc however it’s flaky in text fields because it’s really hard to get the position right when moving from lightweight to native editing another important bit is the smaller margin that makes the fields stand closer to one another Selected Style as i mentioned before since this is a specialization of text field we derive from text field the text field class one thing to notice is that the selected style we need to override the border as well to implement a 4 pixel underline border it’s because we derived from the unselected digit and not from the selected version of text field so we need to redefine how selected digit entry looks however we also override the font size to make it slightly smaller and thus more consistent with the native uber app the error label is just a red on white label it has a bit of a smaller padding so it can use up space it still has zero margin like most components but it has a smaller light font at 2.8 millimeters which is more consistent with the material design aesthetic the recent code style just pads the text so it will align properly with the floating action button it leaves margin as 0 by default but it has smaller text size than a typical label Password Entry the last form in the sms activation flow is the password entry form it’s a trivial form after the others we’ve been through here i’ll gloss over it relatively quickly this is the entire form code literally in one page after the activation form there is literally nothing new or interesting here the only aspect that’s here and wasn’t there is the forget password uiid which we align with the floating action button in this case we have two elements that we enclose in a box layout y in the south most of the work here is in the ui id itself the forget password buttons have a bluish color and are transparent the padding is carefully measured to align properly with the floating action button margin is zero as usual the font is a relatively small 2.5 millimeter size and that concludes the sms activation ui flow mockup

Module 12: Performance and Memory Tuning The simulator gets you far, but not all the way. Some performance problems only become visible on the real device, where GPU behavior, memory pressure, input latency, and platform-specific implementation details finally line up the way your users will experience them. ...