Creating an Uber Clone - Part V - Transcript.pdf

Creating an Uber Clone - Part V
In this part we’ll finally leave the confines of the login form and move to the simpler forms of social login and the country picker UI. I’ll start with the social login mockup
since it’s so small and simple

Social Login
© Codename One 2017 all rights reserved
This is the form you see when you choose the social login option, I cropped the bottom as it’s just white. This is a pretty trivial UI…

public class FacebookOrGoogleLoginForm extends Form {
public FacebookOrGoogleLoginForm() {
super(BoxLayout.y());
Form previous = getCurrentForm();
getToolbar().setBackCommand("",
Toolbar.BackCommandPolicy.AS_ARROW,
e -> previous.showBack());
add(new Label("Choose an account", "FlagButton"));
Button facebook = new Button("Facebook",
Resources.getGlobalResources().getImage("facebook.png"),
"FlagButton");
Button google = new Button("Google",
Resources.getGlobalResources().getImage("google.png"),
“FlagButton");
add(facebook).add(google);
}
}
FacebookOrGoogleLoginForm
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 FlagButton through as it’s a UIID that I reuse in several forms. It got the name from the countries picker form which we’ll go into next.

FlagButton
The flag button is just a label in terms of padding etc.

FlagButton
It has a subtly larger font at 3.2 millimeters not much larger

Country Picker
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 eﬀect. Speaking of the title area it’s while 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.

public class CountryPickerForm extends Form {
public CountryPickerForm(Button sourceButton, Resources flags) {
CommonCode.initBlackTitleForm(this, "Select a Country", val -> search(val));
Image blankIcon = Image.createImage(100, 70, 0);
char lastChar = (char)-1;
for(int iter = 0 ; iter < ActivationForm.COUNTRY_CODES.length ; iter++) {
Button b = new Button(ActivationForm.COUNTRY_NAMES[iter], "FlagButton");
char current = b.getText().charAt(0);
if(current != lastChar) {
lastChar = current;
Label l = new Label("" + lastChar, "FlagsLetter");
add(l);
}
b.setIcon(flags.getImage(ActivationForm.COUNTRY_FLAGS[iter]));
if(b.getIcon() == null) {
b.setIcon(blankIcon);
}
String currentCountryCode = ActivationForm.COUNTRY_CODES[iter];
b.addActionListener(ee -> {
sourceButton.setIcon(b.getIcon());
sourceButton.setText("+" + currentCountryCode);
CountryPickerForm
Let’s jump right into the code.

Predictably the form is a BoxLayout container on the Y axis. The initBlackTitleForm method is a static method in a common utility class. We'll cover it soon

lastChar = current;
add(l);
}
}
CountryPickerForm
We don't have flags for all the countries so we need a blank space icon so the elements align

lastChar = current;
add(l);
}
}
CountryPickerForm
Here we loop over all the country codes and create a button with the FlagsLetter UIID 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

lastChar = current;
add(l);
}
}
CountryPickerForm
When an entry is selected we update the text and icon of the CountryCodePicker Button that launched this form

}
});
add(b);
}
}
@Override
protected void initGlobalToolbar() {
super.initGlobalToolbar();
getToolbar().setUIID("BlackToolbar");
}
void search(String s) {
}
}
CountryPickerForm
We need to override the toolbar initialization so we can set the proper BlackToolbar UIID

BlackToolbar
Speaking of the black toolbar it is predictably styled as black and opaque

BlackToolbar
We have a 1 millimeter padding which doesn’t exist in the default toolbar. It’s helpful for the collapse animation eﬀect so padding still remains

BlackToolbar
The margin is 0 as usual

FlagsLetter
Flags letter is the letter that appears on top of every letter change between country names. The colors and the opacity are things I just picked from the screenshot image

FlagsLetter
The other aspects of this UI are derived from Label

public static void initBlackTitleForm(Form f, String title,
SuccessCallback<String> searchResults) {
Form backTo = getCurrentForm();
f.getContentPane().setScrollVisible(false);
Button back = new Button("", "TitleCommand");
back.addActionListener(e -> backTo.showBack());
back.getAllStyles().setFgColor(0xffffff);
FontImage.setMaterialIcon(back, FontImage.MATERIAL_ARROW_BACK);
Container searchBack = null;
if(searchResults != null) {
Button search = new Button("", "TitleCommand");
search.getAllStyles().setFgColor(0xffffff);
FontImage.setMaterialIcon(search, FontImage.MATERIAL_SEARCH);
search.addActionListener(e -> {
// TODO
});
searchBack = BorderLayout.north(
BorderLayout.centerEastWest(null, search, back));
} else {
BorderLayout.centerEastWest(null, null, back));
initBlackTitleForm
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 CommonCode class which stores common static code in the application. This is a non-trivial task as the logic needs to support the
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.

// TODO
});
} else {
initBlackTitleForm
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 TitleCommand UIID "as is" since it uses a black on white scheme in other forms. I could have used a diﬀerent UIID here.

// TODO
});
} else {
initBlackTitleForm
If we have a search callback I build the layout that includes the search button otherwise I create a layout without it

} else {
}
Label titleLabel = new Label(title, "WhiteOnBlackTitle");
titleLabel.getAllStyles().setMarginTop(back.getPreferredH());
titleLabel.getAllStyles().setMarginUnit(Style.UNIT_TYPE_PIXELS,
Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS, Style.UNIT_TYPE_DIPS);
f.getToolbar().setTitleComponent(
LayeredLayout.encloseIn(searchBack, titleLabel));
f.getAnimationManager().onTitleScrollAnimation(
titleLabel.createStyleAnimation("WhiteOnBlackTitleLeftMargin", 200));
f.setTransitionInAnimator(CommonTransitions.
createCover(CommonTransitions.SLIDE_VERTICAL, false, 300));
f.setTransitionOutAnimator(CommonTransitions.
createCover(CommonTransitions.SLIDE_VERTICAL, true, 300));
}
initBlackTitleForm
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 back
arrow icon. I did this so I can animate the position of the label fluidly by changing the margin value

} else {
}
}
initBlackTitleForm
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

} else {
}
}
initBlackTitleForm
Cover transition is used in the back title forms on iOS, notice that cover transitions expect in and out values for cover and uncover

WhiteOnBlackTitle
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 UIID

WhiteOnBlackTitle
The padding is pretty standard, these numbers were picked to align properly with the commands both in expanded and collapsed states

WhiteOnBlackTitle
Margin is actually 0 as we change this manually in code, it might make sense to do the margin here for some cases.

WhiteOnBlackTitle
The font is standard light font but 4 millimeters in size which should appear bigger but not huge. Subtle.

WhiteOnBlackTitleLeftMargin
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 UIID which has no
top margin so it will eﬀectively align with the back arrow. However, the left margin will keep it from going on top of the arrow.

It also evens out the padding so things look more aligned now that they are on the same row

We derive the WhiteOnBlackTitle UIID so the settings we don’t override are identical

The font is the same but a smaller 3 millimeter size, this will also animate as the title slides into place. It’s subtle but noticeable.

Creating an Uber Clone - Part V - Transcript.pdf

Recommended

Recommended

More Related Content

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

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

More from ShaiAlmog1

More from ShaiAlmog1 (20)

Recently uploaded

Recently uploaded (20)

Creating an Uber Clone - Part V - Transcript.pdf