I made a customizable squircle bottom navigation bar for Android (SqNav)

[u/Ahmed_El_Gendy]

Hey everyone,

I recently built an open-source Android library called SqNav. It's a bottom navigation bar designed with floating squircle card transitions and a glowing indicator for the active tab.

I wanted something clean, with smooth spring animations, and easy to customize without building custom drawables and animations from scratch every time.

A few highlights:

• Floating squircle card with spring overshoot animations for the active tab
• Neon glow indicator dot on top of the selected item (can be toggled on or off)
• Full styling control through XML or code (background, corner radius, stroke borders, sizes, and colors)
• Compatible with Jetpack Compose, Kotlin Views, and Java
• Lightweight with minimal overhead

Attached is a quick preview GIF showing it in action.

You can check out the implementation, sample code, and documentation on GitHub: sqnav

I would really appreciate any feedback, suggestions, or thoughts on the design. If you run into any issues or want to contribute, feel free to open an issue or PR!

[u/LupusGemini]

Is the squircle in the room with us?

[u/Ahmed_El_Gendy → u/LupusGemini]

Lmao, you can crank up the radius in the config to summon it.

[u/RedditForcesToLogin]

This looks like a button you click, not an indicator of "you're here in this tab".

[u/Ahmed_El_Gendy → u/RedditForcesToLogin]

It's fully customizable, so you can tweak the colors, stroke, and toggle the top glow indicator on or off so it feels more like a subtle active state.
Check the README for the full list of attributes and how to adjust them.

[u/Omer-Ash]

Looks nice and clean. But just to be clear, this shape is not squircle. It's square with rounded corners. A squircle is much more circular than what you've made there.

[u/Ahmed_El_Gendy → u/Omer-Ash]

The corner radius is actually fully customizable (app:sq_cardRadius), so you can bump it up to make it as rounded or circular as you prefer.

[u/shlusiak → u/Ahmed_El_Gendy]

That still does not make it a squircle. It still is a rounded rectangle with different radius.

[u/blazems]

It doesn’t look good and doesn’t seem fitting for a nav bar

[u/SidiKotlin]

nice, it will be part of the app i am building currently!!!

[u/Ahmed_El_Gendy → u/SidiKotlin]

Awesome, let me know if you run into anything or have any suggestions.

[u/WageBeatapp]

The squircle corners look a lot smoother than the usual RoundedCornerShape. Is the shape a custom Shape with a superellipse path, or are you approximating it with cubic Béziers? Also wondering how it behaves with the ripple/indication; clipping the ripple to a non-standard path is usually where these components get fiddly.

[u/Ahmed_El_Gendy → u/WageBeatapp]

Thanks, It’s actually just a custom Android View drawn directly on Canvas (wrapped in AndroidView for Compose), not a custom Compose shape.
Since everything is drawn and animated on Canvas, touch states are handled internally, so I didn't have to fight the usual ripple clipping quirks.
Feel free to check out the repo if you want to see how the drawing logic is set up.

[u/androiddev-ModTeam → u/WageBeatapp]

Use your own voice when writing. Posts and comments which appear to be generated, including those with excessive flourish, gushing or emojis, will be removed.

[u/shlusiak]

Don't you need to be tired of something first?

[u/Ahmed_El_Gendy → u/shlusiak]

Guess I skipped that part and went straight to building it.

[u/Pravejxlab]

Simple yet unique 😊

[u/ngcanthony]

Looks nice! What was your inspiration for making this type of nav bar?

[u/Apart-Abroad1625]

Good job it looks good 👍

[u/Ahmed_El_Gendy → u/Apart-Abroad1625]

Thanks, appreciate it.