DEV Community

Boy Offi9
Boy Offi9

Posted on

I built a real, drop-in "Matrix rain" View for Android (not another Canvas tutorial)

#android #androiddev #opensource #kotlin

I've built plenty of little effects and demos before, but this is the first thing I've shipped that's an actual reusable library — not a gist, not a "here's how you'd do it" tutorial, not a GIF. Something you drop into a project with one line and it just works.

It's called matrix-rain-view — a configurable "digital rain" effect (the falling-glyph look from The Matrix) as a real, custom Android View.

Why not just another tutorial?

Every Matrix-rain tutorial I found was the same: a Canvas, a coroutine loop, some hardcoded green. Fine for a blog post, annoying to actually use — no lifecycle handling, no attribute API, speed tied to frame rate so it looks different on every device.

So I built it properly instead:

  • Real lifecycle — starts on attach, stops on detach. No leaks, no battery drain when it's off-screen.
  • Delta-time animation — motion speed is consistent regardless of device refresh rate, instead of speeding up on 120Hz screens.
  • A real attribute API — configurable via XML or code, not just a set of magic numbers buried in a draw() method.
  • Custom glyph sets — katakana, binary, alnum, or your own custom pool.

Install

Add JitPack to settings.gradle.kts:

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://jitpack.io") }
    }
}
Enter fullscreen mode Exit fullscreen mode

Add the dependency:

dependencies {
    implementation("com.github.boy-offi9-inc:matrix-rain-view:1.0.1")
}
Enter fullscreen mode Exit fullscreen mode

Usage

Full-screen effect:

<com.boyoffi9.matrixrainview.MatrixRainView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rainColor="#00FF41"
    app:rainSpeed="1.2"
    app:rainDensity="1.0"
    app:rainGlow="true" />
Enter fullscreen mode Exit fullscreen mode

Or as a background behind real UI — just make sure it's the bottom child of a FrameLayout (a LinearLayout can't stack children):

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.boyoffi9.matrixrainview.MatrixRainView
        android:id="@+id/matrixRain"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
        <!-- your real UI -->
    </LinearLayout>

</FrameLayout>
Enter fullscreen mode Exit fullscreen mode

Everything's controllable at runtime too:

val rain = findViewById<MatrixRainView>(R.id.matrixRain)
rain.rainColor = Color.parseColor("#00FFAA")
rain.speed = 1.5f
rain.density = 0.8f
rain.charSet = MatrixRainView.CharSet.BINARY
rain.glowEnabled = false

rain.pause()
rain.resume()
Enter fullscreen mode Exit fullscreen mode

See it in action

I put together a small demo app showing it running as a background behind real content, with a live settings panel wired to every property (color, speed, density, fade, glow, charset) — no restart needed, updates the running animation immediately.

👉 matrix-rain-demo — screenshots, a screen recording, and a CI-built debug APK from the Actions tab.

Try it

MIT licensed. If you use it or have thoughts, I'd love a star or an issue — this is my first real reusable Android lib, so feedback's very welcome.

Top comments (0)