Creating an Uber Clone - Part III - Transcript.pdf

Creating an Uber Clone - Part III
In this part we’ll create a mockup for some of the forms starting with the login process

Country Button
© Codename One 2017 all rights reserved
We’ll start with the login form… Since the uber app is portrait locked it should be pretty easy to reproduce this UI.

However, we’ll start first with one element and that’s the country button.

Country Button
The reason it’s logistically separate is that it has some non-trivial logic and resides in 2 separate forms. So it makes sense to define it in a single generic class

public class CountryCodePicker extends Button {
private Resources flagResource;
public CountryCodePicker() {
setUIID("CountryCodePicker");
addActionListener(e -> showPickerForm());
String code = L10NManager.getInstance().getLocale();
if(code != null) {
String[] countryCodes;
if(code.length() == 2) {
countryCodes = COUNTRY_ISO2;
} else {
} else {
return;
}
}
code = code.toUpperCase();
try {
flagResource = Resources.open("/flags.res");
} catch(IOException err) {
CountryCodePicker
The country code picker is a button subclass but it doesn’t really look like it

if(code != null) {
} else {
} else {
return;
}
}
try {
CountryCodePicker
Because we set the UIID to the CountryCodePicker UIID

if(code != null) {
} else {
} else {
return;
}
}
try {
CountryCodePicker
In this block of code we try to "guess" the current country based on the localization settings

if(code != null) {
} else {
} else {
return;
}
}
try {
CountryCodePicker
The flags.res file is included in the SMSActivation cn1lib. 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.

try {
Log.e(err);
}
Image blankIcon = Image.createImage(100, 70, 0);
for(int iter = 0 ; iter < countryCodes.length ; iter++) {
if(code.equals(countryCodes[iter])) {
setText("+" + COUNTRY_CODES[iter]);
setIcon(flagResource.getImage(COUNTRY_FLAGS[iter]));
if(getIcon() == null) {
setIcon(blankIcon);
}
return;
}
}
}
}
protected void showPickerForm() {
final Form f = getCurrentForm();
final Transition t = f.getTransitionOutAnimator();
CountryCodePicker
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

setIcon(blankIcon);
}
return;
}
}
}
}
final Form f = getCurrentForm();
final Transition t = f.getTransitionOutAnimator();
f.setTransitionOutAnimator(CommonTransitions.createEmpty());
Form tf = new CountryPickerForm(this, flagResource);
tf.addShowListener(new ActionListener() {
@Override
public void actionPerformed(ActionEvent evt) {
f.setTransitionOutAnimator(t);
f.removeShowListener(this);
}
});
tf.show();
}
CountryCodePicker
showPickerForm 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..

CountryCodePicker
The styling for country code picker are pretty simple. It’s black on transparent background.

CountryCodePicker
The padding is Big on the left but small on the right so the text element stays near the button

CountryCodePicker
Margin again is 0

CountryCodePicker
And the font is a pretty standard light 3 millimeter font

public class LoginForm extends Form {
public LoginForm() {
super(new BorderLayout());
Label squareLogo = new Label("",
Resources.getGlobalResources().getImage("uber-logo.png"),
"SquareLogo") {
@Override
protected Dimension calcPreferredSize() {
Dimension size = super.calcPreferredSize();
size.setHeight(size.getWidth());
return size;
}
};
Container logo = BorderLayout.centerAbsolute(squareLogo);
logo.setUIID("LogoBackground");
add(CENTER, logo);
Label getMovingWithUber = new Label("Get moving with Uber", "GetMovingWithUber");
CountryCodePicker countryCodeButton = new CountryCodePicker() {
@Override
LoginForm
So without further ado, lets go to the login form code. This is the code of the first form you see when the Uber app launches. It’s a relatively simple class without too
many frills. Lets 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

"SquareLogo") {
@Override
return size;
}
};
add(CENTER, logo);
@Override
LoginForm
I want the logo to be square so height and width would be identical

"SquareLogo") {
@Override
return size;
}
};
add(CENTER, logo);
@Override
LoginForm
We place the entire tiled 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

@Override
new EnterMobileNumberForm().show();
}
};
SpanButton phoneNumber = new SpanButton("Enter your mobile number",
"PhoneNumberHint");
phoneNumber.getTextComponent().setColumns(80);
phoneNumber.getTextComponent().setRows(2);
phoneNumber.getTextComponent().setGrowByContent(false);
phoneNumber.setUIID("Container");
phoneNumber.addActionListener(e -> new EnterMobileNumberForm().show());
Container phonePicking = BorderLayout.centerCenterEastWest(
phoneNumber,
null, countryCodeButton);
phonePicking.setUIID("Separator");
Button social = new Button("Or connect with social", "ConnectWithSocialButton");
social.addActionListener(e -> new FacebookOrGoogleLoginForm().show());
LoginForm
I override the behavior of the country picker button for consistency with the native Uber app

@Override
new EnterMobileNumberForm().show();
}
};
SpanButton phoneNumber = new SpanButton("Enter your mobile number",
"PhoneNumberHint");
phoneNumber.getTextComponent().setColumns(80);
phoneNumber.getTextComponent().setRows(2);
phoneNumber.getTextComponent().setGrowByContent(false);
phoneNumber.setUIID("Container");
phoneNumber,
LoginForm
This looks like a text field but acts like a button in the naive app so I implemented it as such. Constraining the rows and size is important for proper layout

phoneNumber,
add(SOUTH, BoxLayout.encloseY(getMovingWithUber, phonePicking, social));
}
@Override
protected boolean shouldPaintStatusBar() {
return false;
}
@Override
protected void initGlobalToolbar() {
}
}
LoginForm
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 portrait locked this shouldn't be a problem

Tile & Logo
We need these two images to complete the form UI, the tile.png and uber-logo.png

Square Logo
There are a few styles we need to define in order to finish this form. The square logo UIID is used for the logo. I still have the foreground defined as this used to be text
and not an image. The main things here are the white opaque background

Square Logo
We use some white padding on the logo

Square Logo
But we don’t need margin

LogoBackground
The logo background style represents the patterned 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
axis

LogoBackground
We set the transparency to 255 as the image is opaque and we want to make sure this is totally opauqe

LogoBackground
We define the margin to 0 as usual. Notice we ignore padding as it just doesn’t matter for this component

GetMovingWithUber
The GetMovingWithUber UIID just sets the padding to a right size so it’s spaced enough from the sides but close enough to the element below

GetMovingWithUber
We don’t need margin, color or anything else because we derive from Label

GetMovingWithUber
The main reason for this UIID is the large dominating 4.8 millimeter font size

PhoneNumberHint
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

PhoneNumberHint
It has 0 padding on the left to keep it close to the country picker button

PhoneNumberHint
The font is 3.7 millimeters which looked right after some trial and error

Separator
The separator UIID is a container which has an underline below it. As a container we define it as completely transparent

Separator
It has a 2 pixel bottom padding to leave space for the underline

Separator
The margin is 0 as usual

Separator
The border is an underline 2 pixel border in a gray color

ConnectWithSocialButton
The ConnectWithSocialButton 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 builtin types isn’t always 100% reliable. I could have worked around it by
defining a MyLabel UIID and deriving from that.

I still chose to derive from Label which mostly works

But I defined the font just to be on the safe side…

The Login Form
This is the UI we’ve made next to the native Uber UI. You will notice some minor diﬀerences 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

Creating an Uber Clone - Part III - Transcript.pdf

Recommended

Recommended

More Related Content

Similar to Creating an Uber Clone - Part III - Transcript.pdf

Similar to Creating an Uber Clone - Part III - Transcript.pdf (20)

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Creating an Uber Clone - Part III - Transcript.pdf