Android Contest 2021, Round 2: Animations

The task in this round of the contest is to implement animations in Telegram for Android based on the mockups provided, optimize them to run on older devices, and create an editor that allows tweaking their parameters.

Deadline: 23:59 Dubai Time on the 4th of April.
Prize fund for this round: $50,000.
Who can participate: Everyone, including those who didn't take part in Round 1.

Download demo materials

The Task

You should use the Telegram for Android code available on GitHub.

  1. Modify Telegram for Android to display the animations provided in the demo videos when messages are sent.
  2. Ensure that the animations are optimized to run as smoothly as possible on all devices.
  3. Include an editor that allows tweaking each of the components.
  4. Support exporting and importing animation parameters.

Your code must be written in Java. Do not use third-party UI frameworks (e.g. Flutter or React Native).

Required Animations

Make sure that your animations are as true as possible to the mockups provided in the demo videos.

Message Bubble Animations

Your app should display message sending effects from Animations.mp4 for messages of the following types:

  • Small message that fits in the input field
  • Large message that is too large to fit in the input field
  • Message containing a link preview
  • Message with a single emoji that turns into an animated emoji
  • Photo sent from the attachment menu
  • Sticker selected from the sticker panel
  • Voice message
  • Video message
  • Multiple messages sent one after another

All message sending effects should be optimized for both standalone messages and messages sent as a reply.

Background Animations

Your app should display the background shown in Animations.mp4 and animate it when each of the following actions are performed:

  • Tilting the phone
  • Opening a chat
  • Jumping to various messages in a chat (when skipping between replies, pinned messages, go to any message via link, tapping the “Down” button)
  • Sending any message

Editor

Animation Editor

Tapping the header in any chat (top bar with the chat name) should open Animation Settings (Settings_Example1.png, Settings_example2.png, SettingsExample_Duraion).

Settings for animations of different types can be accessed using tabs at the top of the screen. The default tab should be Background (SettingsExample_BG_1.png).

Background Editor

The Open full screen button on the Background tab shows the interface from SettingsExample_BG_Preview.png.

Tapping the Animate button plays the background animation, see BackgroundPreview.mp4

Background_Animation.mp4 provides a visual explanation of how the animation was put together. You will need to come up with your own model to achieve the same or similar result.

Export Settings

Tapping the (⋮) button in the Editor, should open a menu allowing to export/import settings or reset all animations to default (SettingsExample_More.png).

Evaluation

During evaluation we will focus on the following aspects:

  • How close your animations are to the mockups provided
  • How smoothly they play on modern devices
  • How smoothly they play on older devices (including Samsung Galaxy J7 Prime and Xiaomi Redmi Note 4)

Authors of the best submissions in this round of the contest will be able to participate in Round 3.

Submitting Your Work

You will be able to submit your application to @ContestBot closer to the end of the contest. Watch out for announcements in @contest.