Telegram Nodes · Android components

Built on Telegram Android’s own tokens (open-source client, see TG-TOKENS.md): white 56 dp app bar, accent #229AF0, rows 70 / avatar 52 — in Material 3 structure: tonal surfaces, navigation bar 80 (Chats · Contacts · Settings · Profile), FAB 56. No iOS glass. Roboto, system Back.

Top app bar · identity

ChatsAll chats · as Alex
AllNodes 3PersonalUnread
Chatsas 👾 Dalle
AllNodes 2PersonalUnread

Identity · press → slide → release

Rest
Pressed · state layer
Slides out of the button
AK👾🚀
Slide along → Dalle · surface level 2
AK👾🚀
Released → slides back

Same gesture as iOS in Material 3: press the alias button → a level-2 surface of the button’s height slides out of it to the left, faces only, the current alias next to the button and «New alias» furthest. Slide the finger along it: the face under the finger gets the ring and state layer, its name previews under «Chats»; release commits and the surface slides back. A plain tap changes nothing.

Join as · radio list

Buttons

Filled
Disabled
Text · dialogNext
Row action
FAB 56

Navigation bar · Material 3

80 dp on surface container #F1F1F3, indicator pill 64×32 · selected #1A91E6 / label #0D7FCF · labels 12 medium. Tabs = Telegram Android defaults: Chats · Contacts · Settings · Profile.

Navigation rail

Rail
Pill indicator on the active branch, unread badge #229AF0, live dot for rooms. Same groups as iOS.

Template cards · text fields

💼WorkSelected
🎮GamingDefault
Design Team
Description (optional)

Telegram Android tokens

#FFFFFFapp bar
#1A1D21title · names
#229AF0accent · counter · FAB
#298ACFaccent text · tab line
#8E9091message preview
#848688date
#D9D9D9divider
#BEC3C7muted counter
#46AA36sent ✓
#F1F1F3gray background
#EFFFDEoutgoing bubble
#1A91E6selected main tab