Nutrient

Home

SDK

Software Development Kits

Low-Code

IT Document Solutions

Workflow

Workflow Automation Platform

DWS API

Document Web Services

T
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Company

About

Team

Careers

Contact

Security

Partners

Legal

Resources

Blog

Events

Try for free

Contact Sales
Contact sales
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

products

Web

Web

Document Authoring

AI Assistant

Salesforce

Mobile

iOS

Android

visionOS

Flutter

React Native

MAUI

Server

Document Engine

Document Converter Services

.NET

Java

Node.js

AIDocument Processing

All products

solutions

USECASES

Viewing

Editing

OCR and Data Extraction

Signing

Forms

Scanning & Barcodes

Markup

Generation

Document Conversion

Redaction

Intelligent Doc. Processing

Collaboration

Authoring

Security

INdustries

Aviation

Construction

Education

Financial Services

Government

Healthcare

Legal

Life Sciences

All Solutions

Docs

Guides overview

Web

AIAssistant

Document Engine

iOS

Android

visionOS

Java

Node.js

.NET

Document Converter Services

Downloads

Demo

Support

Log in

Resources

Blog

Events

Pricing

Try for free

Free Trial

Company

About

Security

Partners

Legal

Contact Sales
Contact Sales
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

products

Products overview

Document Converter

Document Editor

Document Searchability

Document Automation Server

Integrations

SharePoint

Power Automate

Nintex

OneDrive

Teams

Window Servers

solutions

USECASES

Conversion

Editing

OCR Data Extraction

Tagging

Security Compliance

Workflow Automation

Solutions For

Overview

Legal

Public Sector

Finance

All Solutions

resources

Help center

Document Converter

Document Editor

Document Searchability

Document Automation Server

learn

Blog

Customer stories

Events

Support

Log in

Pricing

Try for free

Company

About

Security

Partners

Legal

Contact Sales
Contact Sales
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Product

Product overview

Process Builder

Form Designer

Document Viewer

Office Templating

Customization

Reporting

solutions

Industries

Healthcare

Financial

Manufacturing

Pharma

Education

Construction

Nonprofit

Local Government

Food and Beverage

Departments

ITServices

Finance

Compliance

Human Resources

Sales

Marketing

Services

Overview

Capex-accelerator

Process Consulting

Workflow Prototype

All Solutions

resources

Help center

guides

Admin guides

End user guides

Workflow templates

Form templates

Training

learn

Blog

Customer stories

Events

Support

Pricing

Support

Company

About

Security

Partners

Legal

Try for Free
Contact Sales
Try for Free
Contact Sales
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Services

Generation

Editing

Conversion

Watermarking

OCR

Table Extraction

Pricing

Docs

Log in

Try for Free
Try for Free

Free trial

Blog post

Master Android theme transitions with circular reveal

Simone Arpe Simone Arpe

Table of contents

  • The Telegram Animation
  • The Concepts
  • Implementing the Feature in PDF Viewer
  • Circular Reveal Animation
  • Conclusion
Illustration: Change Android themes with circular animations

In its most recent update, the Telegram app for Android introduced an eye-catching animation that happens when users change the theme. Luckily for us, the source code is available on GitHub, so we can take a closer look at how the effect is achieved.

In this article, I’ll delve into the process of achieving this fancy transition, beginning with the concepts and ending with the actual implementation. Then I’ll try to apply it to PDF Viewer for Android.

The Telegram Animation

The introduction of this animation was warmly welcomed by the Android community. In fact, there are many subreddits on the topic asking for information about the technique used. The reason for all this interest is due to the complexity of the Android theme system.

The Concepts

The entire algorithm can be easily unraveled with the use of two key steps: taking a screenshot of the window, and using ViewAnimationUtils#createCircularReveal().

Once the transition starts, here is the logic:

  1. Take a screenshot of the window.

  2. Set the screenshot as an image bitmap in an ImageView that covers the entire window.

  3. Make the ImageView visible.

  4. Apply the circular reveal effect to the drawer layout container.

  5. Change the theme.

  6. Make the ImageView invisible, setting its state as GONE.

ℹ️ Note: The moment when the theme changes (step number 4), the layout will have the ImageView on top, covering the new theme; the only change that can be visually perceived in this step will be that of the navigation bar, because it is positioned outside of the area covered by the ImageView.

Once you understand the key concepts, the code is rather simple.

Implementing the Feature in PDF Viewer

I began experimenting with implementing the feature in PDF Viewer for Android, and it became immediately clear that obtaining a screenshot by using a draw call on a canvas (i.e. drawerLayoutContainer.draw(canvas)) was not a viable option with our codebase. Given that our theme chooser UI was a DialogFragment, the outcome would have been a bitmap with a transparent background instead of a full screenshot of the window.

Theme chooser UI of PDF Viewer

One approach for solving this problem was to take a screenshot of the entire activity. There are many libraries on GitHub that can do this, but I’d recommend taking a look at Falcon.

Using Falcon to take a screenshot requires only one line of code: val bitmap = Falcon.takeScreenshotBitmap(activity).

To show the screenshot on top of the other views, there are two options:

  1. Add a new ImageView to the current layout that takes all the space matching its parent width and height.

  2. Start a new activity with a minimal layout composed of a single ImageView.

Before going further, we should stop for a moment here and consider a few things. Starting a new activity just for showing an animation may sound like overkill for this particular case, however, adding an image view to the current layout might not produce the expected result.

In the specific case of PDF Viewer where there is a DialogFragment containing the theme chooser UI, the first option will not draw the screenshot bitmap on top of the dialog, but rather behind it. A workaround might be closing the dialog immediately after the theme has been selected and then drawing the image view immediately before starting the circular reveal transition.

Because this solution entails a radical modification of the current behavior of the app, I decided to discard it. I won’t go into more detail about the challenges I encountered while trying this, but below you can see an example of the outcome. Notice how clear the flickering is and how the content of the image view is slightly misaligned.

Due to the above, I decided to explore the second solution.

The next step is related to the configuration used in PDF Viewer for the system UI visibility, so there’s not a unique approach that fits every configuration.

In our settings activity, we are using the default SYSTEM_UI_FLAG_VISIBLE, which implies having a solid status bar.

Because of the SYSTEM_UI_FLAG_VISIBLE flag, the screenshot needs to be taken without including the status bar. Falcon takes the screenshot of the whole window, status bar included. We can still rely on the Falcon implementation, but the portion including the status bar needs to be cut out from the bitmap.

A simple solution can be achieved in this way:

private fun getStatusBarHeight(): Int {
    var result = 0
    val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
    if (resourceId > 0) {
        result = resources.getDimensionPixelSize(resourceId)
    }
    return result
}

fun newThemeSelected() {
    ...
    val windowBitmap = Falcon.takeScreenshotBitmap(activity)
    val statusBarHeight = getStatusBarHeight()
    val bitmap = Bitmap.createBitmap(windowBitmap, 0, statusBarHeight, partialBitmap.getWidth(), partialBitmap.getHeight() - statusBarHeight, null, true)
    ...
}

The screenshot activity needs a transparent theme to allow the settings activity underneath it to be seen. In the AndroidManifest.xml file, set android:theme="@style/AppTheme.Transparent" for the screenshot activity and use the following theme:

<style name="AppTheme.Transparent">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:backgroundDimEnabled">false</item>
</style>

To make the transition from one activity to another quicker, it’s better to set the FLAG_ACTIVITY_NO_ANIMATION flag and override any pending transaction:

// From the calling activity.
val intent = Intent(this, Screenshot::class.java).apply {
    ...
    addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION)
}
startActivity(intent)
// 0 param means no animation.
overridePendingTransition(0, 0)
...

The ScreenshotActivity requires three parameters: the bitmap, and the x and y coordinates. Passing the coordinates can be easily achieved using the Intent:

val intent = Intent(this, ScreenshotActivity::class.java).apply {
    putExtra(SCREENSHOT_X, posX)
    putExtra(SCREENSHOT_Y, posY)
    addFlags(Intent.FLAG_ACTIVITY_NO_ANIMATION)
}
startActivity(intent)
overridePendingTransition(0, 0)
// We recreate the activity with the new theme selected.
recreate()

The bitmap cannot be passed using the Intent, as it can easily go over the byte limit imposed for the Parcelable objects and may produce the following Java binder error:

JavaBinder﹕ !!! FAILED BINDER TRANSACTION !!!

It’s a well-known problem, and there are several solutions to overcome it. For the sake of brevity in this blog post, I’ve used a static field to hold the reference of the bitmap, even though it’s not advisable.

When the screenshot activity starts, the bitmap must be shown immediately:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_screenshot)
    bitmap = Global.screenshot
    posX = intent.getIntExtra(SCREENSHOT_X, -1)
    posY = intent.getIntExtra(SCREENSHOT_Y, -1)

    screenshot = findViewById(R.id.sub_settings_screenshot)
    screenshot.setImageBitmap(bitmap)
    screenshot.scaleType = ImageView.ScaleType.MATRIX
    screenshot.visibility = VISIBLE

    // Start circular animation.
    ...

Circular Reveal Animation

The reveal animation is the final thing that needs to be applied to complete the theme switching. The image view containing the screenshot is visible at this point. We don’t have control over the content behind it, so to keep this experiment simple (and short), I’m going to apply createCircularReveal to the image view itself. I’ll keep the tweaking out of scope, but to better give the gist, we are going to call the startCircularAnimation method in onCreate:

private fun startCircularAnimation(bitmap: Bitmap, posX: Int, posY: Int) {
    val screenshot = findViewById<ImageView>(R.id.sub_settings_screenshot)
    screenshot.setImageBitmap(bitmap)
    screenshot.scaleType = ImageView.ScaleType.MATRIX
    screenshot.visibility = VISIBLE

    // Final radius is approximated here.
    val finalRadius = 1500f
    val anim = ViewAnimationUtils.createCircularReveal(screenshot, posX, posY, 0f, finalRadius)
    anim.duration = 400
    anim.interpolator = CubicBezierInterpolator.EASE_IN_OUT_QUAD
    val animationListener = object: Animator.AnimatorListener {
        override fun onAnimationEnd(animation: Animator?) {
            screenshot.setImageDrawable(null)
            screenshot.visibility = View.GONE
            finish()
        }

        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
        override fun onAnimationStart(animation: Animator?) {}
    }
    anim.addListener(animationListener)
    anim.start()
}

ℹ️ Note: CubicBezierInterpolator can be retrieved from the Telegram source code on GitHub.

If we had just started the circular reveal animation in onCreate, we would be greeted with an IllegalStateException with the message Cannot start this animator on a detached view!. We need to use an OnAttachStateChangeListener to make sure we are starting the animation on the attached view:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_screenshot)
    bitmap = Global.screenshot
    posX = intent.getIntExtra(SCREENSHOT_X, -1)
    posY = intent.getIntExtra(SCREENSHOT_Y, -1)

    screenshot = findViewById(R.id.sub_settings_screenshot)
    screenshot.setImageBitmap(bitmap)
    screenshot.scaleType = ImageView.ScaleType.MATRIX
    screenshot.visibility = VISIBLE

    val listener = object: View.OnAttachStateChangeListener {
        override fun onViewAttachedToWindow(v: View?) {
            startCircularAnimation(bitmap, posX, posY)
        }
        override fun onViewDetachedFromWindow(v: View?) {}
    }
    screenshot.addOnAttachStateChangeListener(listener)
}
...

And finally, the entire animation is complete!

The transition from one activity to another can still be seen, even with the FLAG_ACTIVITY_NO_ANIMATION flag. This is probably due to some timing issue and would require more experimentation to tweak the delay on the activity start and recreation.

Conclusion

Studying the circular reveal animation and how the developers at Telegram implemented it was an exciting journey. Applying it to your codebase the exact same way they did may not always be possible, but it was interesting experimenting with some alternative approaches and checking the final result.

Depending on your app’s architecture, it may not always be possible to achieve complicated animations. For our specific case, dealing with Dialogs and DialogFragments exponentially increased the complexity of the experiment. Most of the time, the strategy adopted by wise developers is to pinpoint a compromise between the time you have at your disposal and the complexity of the feature you want to achieve.

The folks working at Telegram have done a splendid job putting together a transition ahead of its time — one that brings something new to the tricky topic of switching themes. Telegram remains one of my favorite messaging apps for Android, and its UX is top-notch.

Explore related topics

Android Kotlin Tips UI/UX Development
Free trial Ready to get started?
Free trial

Related articles

Explore more
SDKDEVELOPMENTTUTORIALSiOSAndroidWebHow ToPDF

Understanding fonts in PDFs: A comprehensive guide

SDKRELEASESNutrient AI AssistantNutrient iOS SDKNutrient Android SDKiOSAndroid

AI Assistant for iOS and Android: Intelligent document interaction, now in your users’ pockets

SDKDEVELOPMENTAndroidJetpack ComposeDevelopment

Drag-to-reorder with Jetpack Compose

Company
About
Security
Team
Careers
We're hiring
Partners
Legal
Products
SDK
Low-Code
Workflow
DWS API
resources
Blog
Events
Customer Stories
Tutorials
News
connect
Contact
LinkedIn
YouTube
Discord
X
Facebook
Popular
Java PDF Library
Tag Text
PDF SDK Viewer
Tag Text
React Native PDF SDK
Tag Text
PDF SDK
Tag Text
iOS PDF Viewer
Tag Text
PDF Viewer SDK/Library
Tag Text
PDF Generation
Tag Text
SDK
Web
Tag Text
Mobile/VR
Tag Text
Server
Tag Text
Use Cases
Tag Text
Industries
Tag Text
Resources
Blog
Tag Text
Events
Customer Stories
Tag Text
Tutorials
Tag Text
Features List
Tag Text
Compare
Tag Text
community
Free Trial
Tag Text
Documentation
Tag Text
Nutrient Portal
Tag Text
Contact Support
Tag Text
Company
About
Tag Text
Security
Tag Text
Careers
Tag Text
Legal
Tag Text
Pricing
Tag Text
Partners
Tag Text
connect
Contact
Tag Text
LinkedIn
Tag Text
YouTube
Tag Text
Discord
Tag Text
X
Tag Text
Facebook
Tag Text
low-code
Document Converter
Tag Text
Document Editor
Tag Text
Document Automation Server
Tag Text
Document Searchability
Tag Text
Use Cases
Tag Text
Industries
Tag Text
Resources
Blog
Tag Text
Events
Customer Stories
Tag Text
Support
Help Center
Tag Text
Contact Support
Tag Text
Log In
Tag Text
Company
About
Tag Text
Careers
Tag Text
Security
Tag Text
Legal
Tag Text
Pricing
Tag Text
Partners
Tag Text
connect
Contact
Tag Text
LinkedIn
Tag Text
YouTube
Tag Text
Discord
Tag Text
X
Tag Text
Facebook
Tag Text
Popular
Approvals matrix
Tag Text
BPMS
Tag Text
Budgeting process
Tag Text
CapEx approval
Tag Text
CapEx automation
Tag Text
Document approval
Tag Text
Task automation
Tag Text
workflow
Overview
Tag Text
Services
Tag Text
Industries
Tag Text
Departments
Tag Text
Resources
Blog
Tag Text
Events
Customer Stories
Tag Text
Support
Help Center
Tag Text
FAQ
Tag Text
Troubleshooting
Tag Text
Contact Support
Tag Text
Company
About
Tag Text
Careers
Tag Text
Security
Tag Text
Legal
Tag Text
Pricing
Tag Text
Partners
Tag Text
connect
Contact
Tag Text
LinkedIn
Tag Text
YouTube
Tag Text
Discord
Tag Text
X
Tag Text
Facebook
Tag Text
DWS api
PDF Generator
Tag Text
Editor
Tag Text
Converter API
Tag Text
Watermark
Tag Text
OCR
Tag Text
Table Extraction
Tag Text
Resources
Log in
Tag Text
Help Center
Tag Text
Support
Tag Text
Blog
Tag Text
Company
About
Tag Text
Careers
Tag Text
Security
Tag Text
Pricing
Tag Text
Legal
Privacy
Tag Text
Terms
Tag Text
connect
Contact
Tag Text
X
Tag Text
YouTube
Tag Text
Discord
Tag Text
LinkedIn
Tag Text
Facebook
Tag Text

Copyright 2025 Nutrient. All rights reserved.

Thank you for subscribing to our newsletter!

We’re thrilled to have you join our community. You’re now one step closer to receiving the latest updates, exclusive content, and special offers directly in your inbox.

This builtin is not currently supported: DOM

PSPDFKit is now Nutrient. We've consolidated our group of trusted companies into one unified brand: Nutrient. Learn more

This builtin is not currently supported: DOM

PSPDFKit is now Nutrient. We've consolidated our group of trusted companies into one unified brand: Nutrient. Learn more

This builtin is not currently supported: DOM

New Feature Release. Tap into revolutionary AI technology to instantly complete tasks, analyze text, and redact key information across your documents. Learn More or View Showcase

This builtin is not currently supported: DOM

Aquaforest and Muhimbi are now Nutrient. We've consolidated our group of trusted companies into one unified brand: Nutrient. Learn more

This builtin is not currently supported: DOM

Integrify is now Nutrient. We've consolidated our group of trusted companies into one unified brand: Nutrient. Learn more

This builtin is not currently supported: DOM

Join us on April 15th. Join industry leaders, product experts, and fellow professionals at our exclusive user conference. Register for conference