Android Contest 2023 (Call UI)
The Task is to implement a redesigned flow for audio and video calls in Telegram for Android based on the provided mockups. The submission must precisely reproduce the provided design – this includes all elements, their colors, proportions and positioning on the screen, as well as all animations and transitions:
- The general interface logic and design are presented in
'Call Out.mp4'and'Call In.mp4' - Call Background
- Gradient Colors
- Profile Picture Waves
- Background Shading
- Emoji Key
- Rate Call Screen
Resources
- The archive containing all the mockups and visualizations is available here.
- The source code of Telegram for Android is available on GitHub.
Contest Requirements
- No third-party UI frameworks are allowed.
- Your implementation must not affect app performance (for more details, see the Optimizations section).
- Your changes should not interfere with the basic functionality currently implemented in calls or with the stability of calls. This means your changes must not introduce any crashes or audio/video issues (such as display problems with video output, etc.).
- The contest features and interfaces must be built from scratch. Using any third-party implementations to add the contest animations or transitions is not allowed. Entries violating this requirement will be disqualified.
1. Call Background
1.1 General Info
The Call Background is a gradient based on 4 anchor points. You may reuse this component from Telegram for Android – when sending messages, the app applies chat background transitions by crossfading static images.
1.2 State Color Logic
- Initiating Call. When a call is being initiated, the app should always alternate between “Blue-Violet” and “Blue-Green” backgrounds in the animation cycle.
Outgoing Call
- Call Established. Once a call is connected, the background should switch to “Green”. From this point on, the animation cycle includes all three main backgrounds: “Green”, “Blue-Violet” and “Blue-Green”. For the transitioning order, refer to
'Background Transition.mp4'.
Established Call
Light and Dark. In addition to the general call background, there are two variations – “Light” and “Dark”. Interface elements such as buttons can be used as masks for these background layers. “Light” is used for round button backgrounds except for the “End Call” button. “Dark” is used for icons in active buttons. “Dark” with an alpha parameter of 180 is used as a background for toast messages and tooltips.
Weak Signal. If the ongoing voice call is affected by weak network conditions, the app should switch the background to “Orange-Red”. This background is never used in the general transition queue and is reserved for weak signal conditions.
Weak Network Signal
2. Gradient Colors
| Blue-Violet | Main | Light | Dark |
|---|---|---|---|
| Top left corner | 20A4D7 |
2DC0F9 |
0F95C9 |
| Top right corner | 3F8BEA |
57A1FF |
287AE1 |
| Bottom left corner | 8148EC |
9258FD |
6A2BDD |
| Bottom right corner | B456D8 |
D664FF |
A736D0 |
| Blue-Green | Main | Light | Dark |
|---|---|---|---|
| Top left corner | 08B0A3 |
04DCCC |
009595 |
| Top right corner | 17AAE4 |
28C2FF |
0291C9 |
| Bottom left corner | 3B7AF1 |
5FABFF |
2C6ADF |
| Bottom right corner | 4576E9 |
558BFF |
2D60D6 |
| Green | Main | Light | Dark |
|---|---|---|---|
| Top left corner | A9CC66 |
C7EF60 |
8FBD37 |
| Top right corner | 5AB147 |
6DD957 |
319D27 |
| Bottom left corner | 07BA63 |
09E279 |
01934C |
| Bottom right corner | 07A9AC |
00D2D5 |
008B8E |
| Orange-Red | Main | Light | Dark |
|---|---|---|---|
| Top left corner | DB904C |
FEB055 |
C77616 |
| Top right corner | DE7238 |
FF8E51 |
D75A16 |
| Bottom left corner | E7618F |
FF82A5 |
E6306F |
| Bottom right corner | E86958 |
FF7866 |
E23F29 |
3. Profile Picture Waves
You may reuse this component from Telegram for Android – spheres with dynamic shapes are used when recording voice messages and when participating in video chats. In the redesigned call interface, they should represent the volume of the call partner's voice.
| Color | Alpha Parameter 0-255 | |
|---|---|---|
| Internal Wave | FFFFFF |
36 |
| External Wave | FFFFFF |
20 |
4. Background Shading
When a video call is in progress, the app should partially darken the background in the top and bottom parts of the screen and behind the call partner's name. Once a video call is established, the shaded background and all other elements should be hidden if the user doesn't interact with the screen for 3 seconds. For shadows in the Emoji Key area and tooltips, the app should use black with an alpha parameter of 100/255.
Shaded Background
Note: The background should not be darkened when color gradients are displayed.
5. Emoji Key
The app must display the tooltip below the emoji key combination in all calls until the user taps it at least once. After that, showing the tooltip is no longer required. The tooltip background uses the “Dark” gradient with an alpha parameter of 180/255.
Emoji Key
6. Rate Call Screen
The app should present a Rate Call screen if prompted by the server. Pressing any value should produce an animated effect inside the star box. The app should additionally play a fullscreen effect, when a call is rated with 4 or 5 stars.
Rate Call Screen
Optimizations
To preserve battery life, once a call is established, whenever the interface is idle for 10 seconds:
- Background transitions should be paused. To prevent the interface from freezing between color states, the app should switch the background color to one of the main color states.
- Profile Picture Waves should gradually stop as shown in
'Waves and Animation Stop.mp4'. If the proximity sensor indicates that the user is holding their device near their ear, the waves should be paused immediately, even if fewer than 10 seconds have elapsed.
Both background transitions and profile picture waves should resume if the user starts interacting with the interface again.
Animation Sources
If you are familiar with Adobe After Effects, you can inspect the animations here (After Effects 22 is required). To view a curve: Open Composition > Select Layer > Access Layer Properties > Navigate to Specific Frame. Note that the After Effects file is provided for information purposes only and should not be relied on for your implementation of the animations.
Questions, concerns and more
For further clarifications and requests regarding the contest task, refer to the official Telegram Contests group. Kindly include #android_calls with any questions.