Creating an Uber Clone - Part IV - Transcript.pdf

Creating an Uber Clone - Part IV
In this part we’ll refine the login form and go into low level graphics for animations and background.

The Login Form
© Codename One 2017 all rights reserved
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…

final Image shadow = squareShadow(
squareLogo.getPreferredW(),
squareLogo.getPreferredH(),
convertToPixels(14),
0.35f);
Drop Shadow
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 Eﬀects 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.

Container logo = LayeredLayout.encloseIn(
BorderLayout.centerAbsolute(
new Label(shadow, "Container")),
BorderLayout.centerAbsolute(squareLogo)
);
Drop Shadow
So now we have an image of the shadow but the logo image and background are already fixed so we need something new. Instead of using the logo as is we place the
shadow in a layer below using the LayeredLayout and this will produce the desired eﬀect 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.

Label placeholder = new Label();
placeholder,
);
startThread(() -> {
Image shadow = squareShadow(squareLogo.getPreferredW(),
convertToPixels(14), 0.35f);
callSerially(() -> {
logo.replace(placeholder, BorderLayout.centerAbsolute(
new Label(shadow, "Container")), null);
revalidate();
});
}, "Shadow Maker").start();
Drop Shadow
The solution is to move that code oﬄine. 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.

Label placeholder = new Label();
placeholder,
);
startThread(() -> {
Image shadow = squareShadow(squareLogo.getPreferredW(),
convertToPixels(14), 0.35f);
callSerially(() -> {
logo.replace(placeholder, BorderLayout.centerAbsolute(
new Label(shadow, "Container")), null);
revalidate();
});
}, "Shadow Maker").start();
Drop Shadow
When the shadow image is ready we replace it on the EDT with the the new shadow label. The label uses the Container UIID which is always transparent with 0 padding
and 0 margin.

Background
© Codename One 2017 all rights reserved
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 eﬀect 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 eﬀectively a vector API, rotation & 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.

logo.getUnselectedStyle().setBgPainter(
new LoginFormPainter(logo));
class LoginFormPainter implements Painter, Animation {
//....
}
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 Graphics 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 API's. It's harder to optimize low
level graphics code so use it with caution.

private double angle;
private final GeneralPath gp = new GeneralPath();
private final Component parentCmp;
private int counter;
public LoginFormPainter(Component parentCmp) {
this.parentCmp = parentCmp;
int x;
int y;
int w = Display.getInstance().convertToPixels(10);
int h = w;
int x0 = getX() - getWidth();
int xn = getX() + 2 * getWidth();
int y0 = getY() - getHeight();
int yn = getY() + 2 * getHeight();
for (int offset : new int[]{0, w/2}) {
x = x0 +offset;
y = y0 + offset;
while (x < xn) {
while (y < yn) {
drawShape(gp, x, y, w, h);
Background Painter
Now that we got this out of the way lets look at the painter code itself…

This is the rotation angle in degrees. We increment this as part of the animation logic.

private double angle;
private final GeneralPath gp = new GeneralPath();
private final Component parentCmp;
private int counter;
public LoginFormPainter(Component parentCmp) {
this.parentCmp = parentCmp;
int x;
int y;
int h = w;
x = x0 +offset;
y = y0 + offset;
while (x < xn) {
while (y < yn) {
Background Painter
This is the shape object representing the background pattern. We draw it (or stroke it) like a rubber stamp

int h = w;
x = x0 +offset;
y = y0 + offset;
while (x < xn) {
while (y < yn) {
y += h;
}
x += w;
y = y0 + offset;
}
}
registerAnimated(this);
}
Background Painter
The constructor and the drawShape method create the patten shape that we stroke later. This code happens once to generate the "lines" and we then color them later on

int h = w;
x = x0 +offset;
y = y0 + offset;
while (x < xn) {
while (y < yn) {
y += h;
}
x += w;
y = y0 + offset;
}
}
}
Background Painter
The registerAnimated 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

}
private void drawShape(GeneralPath gp, float x, float y, float w, float h) {
float e = w/6;
float ex1 = x + (w-e)/2;
float ex2 = x + (w+e)/2;
float ey1 = y + (h-e)/2;
float ey2 = y + (h+e)/2;
gp.moveTo(ex1, y);
gp.lineTo(ex2, y);
gp.quadTo(x+w, y, x+w, ey1);
gp.lineTo(x+w, ey2);
gp.quadTo(x+w, y+h, ex2, y+h);
gp.lineTo(ex1, y+h);
gp.quadTo(x, y+h, x, ey2);
gp.lineTo(x, ey1);
gp.quadTo(x, y, ex1, y);
}
@Override
public void paint(Graphics g, Rectangle rect) {
g.setAlpha(255);
Background Painter
The drawShape 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. moveTo moves the virtual pen in the air without drawing anything to a starting point. lineTo draws a line from the last position of the pen to the given
position. quadTo draws a quadratic curve (bezier curve) to the given position through the given curve position.

@Override
public void paint(Graphics g, Rectangle rect) {
g.setAlpha(255);
g.setColor(0x128f96);
g.fillRect(rect.getX(), rect.getY(), rect.getWidth(), rect.getHeight());
g.setColor(0xffffff);
g.setAlpha(72);
g.setAntiAliased(true);
g.rotate((float)(Math.PI/4f + Math.toRadians(angle % 360)), getX() +
getWidth()/2, getY() + getHeight()/2);
g.drawShape(gp, new Stroke(1.5f, Stroke.CAP_SQUARE, Stroke.JOIN_BEVEL, 1f));
g.resetAffine();
g.setAlpha(255);
}
@Override
public boolean animate() {
counter++;
if(counter % 2 == 0) {
angle += 0.1;
parentCmp.repaint();
}
Background Painter
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 drawShape and it is drawn with the current alpha and color in place

g.resetAffine();
g.setAlpha(255);
}
@Override
counter++;
angle += 0.1;
}
return false;
}
@Override
public void paint(Graphics g) {
}
}
Background Painter
The low level animation code invokes animate() at fixed intervals based on EDT "heart beats". 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.

g.resetAffine();
g.setAlpha(255);
}
@Override
counter++;
angle += 0.1;
}
return false;
}
@Override
public void paint(Graphics g) {
}
}
Background Painter
This paint method belongs to the Animation interface. We don't need it as we always return false.

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

Creating an Uber Clone - Part IV - Transcript.pdf

More Related Content

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

More from ShaiAlmog1 (20)

Recently uploaded (20)

Creating an Uber Clone - Part IV - Transcript.pdf