Top 10 Open‑Source Android UI Libraries with Usage Guides

Every few weeks I share a collection of open‑source Android libraries gathered from GitHub, covering cool animations and practical utilities. Below are ten selected libraries (order not significant) with usage instructions and demo screenshots.

No1. LiquidSwipe

LiquidSwipe is a ViewPager library that shows a wave‑like sliding animation when paging, emphasizing touch interaction.

1.1 How to use?

Add the Gradle dependency:

implementation 'com.github.Chrisvin:LiquidSwipe:1.3'

Then use LiquidSwipeLayout as the root layout of the fragment:

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.jem.liquidswipe.LiquidSwipeViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

More details: GitHub

No2. Flourish

Flourish provides a simple way to show or hide a layout with customizable animations using a builder pattern.

2.1 How to use?

Add the dependency:

dependencies {
    implementation "com.github.skydoves:flourish:1.0.0"
}

Build the layout in code:

Flourish flourish = new Flourish.Builder(parentLayout)
    .setFlourishLayout(R.layout.layout_flourish_main)
    .setFlourishAnimation(FlourishAnimation.BOUNCE)
    .setFlourishOrientation(FlourishOrientation.TOP_LEFT)
    .setFlourishListener(flourishListener)
    .setIsShowedOnStart(false)
    .setDuration(800L)
    .build();

Or use the Kotlin DSL:

val myFlourish = createFlourish(parentLayout) {
    setFlourishLayout(R.layout.layout_flourish_main)
    setFlourishAnimation(FlourishAnimation.ACCELERATE)
    setFlourishOrientation(FlourishOrientation.TOP_RIGHT)
    setIsShowedOnStart(true)
    setFlourishListener { }
}

More details: GitHub

No3. AestheticDialogs

AestheticDialogs offers six stylish dialog types (Flash, Connectify, Toaster, Emotion, Drake, Emoji) with optional dark‑mode support.

3.1 How to use?

Add the Gradle dependency:

dependencies {
    implementation 'com.github.gabriel-TheCode:AestheticDialogs:1.1.0'
}

Show a dialog, e.g., Flash:

AestheticDialog.showFlashDialog(this, "Your dialog Title", "Your message", AestheticDialog.SUCCESS);
AestheticDialog.showFlashDialog(this, "Your dialog Title", "Your message", AestheticDialog.ERROR);

Similar calls exist for the other dialog types; dark‑mode variants are suffixed with Dark .

More details: GitHub

No4. EasyReveal

EasyReveal provides reveal animations of various shapes (circular, star, wave, etc.) that can start from any screen position.

4.1 How to use?

Add the dependency:

dependencies {
    implementation 'com.github.Chrisvin:EasyReveal:1.2'
}

Wrap the target view in EasyRevealLinearLayout (or ConstraintLayout/FrameLayout) and configure attributes:

<com.jem.easyreveal.layouts.EasyRevealLinearLayout
    app:clipPathProvider="star"
    app:revealAnimationDuration="2000"
    app:hideAnimationDuration="1500">
</com.jem.easyreveal.layouts.EasyRevealLinearLayout>

Or create and configure programmatically:

val revealLayout = EasyRevealLinearLayout(this)
revealLayout.clipPathProvider = StarClipPathProvider(numberOfPoints = 6)
revealLayout.revealAnimationDuration = 1500
revealLayout.hideAnimationDuration = 2000
revealLayout.onUpdateListener = object : RevealLayout.OnUpdateListener {
    override fun onUpdate(percent: Float) {
        Toast.makeText(this@MainActivity, "Revealed percent: $percent", Toast.LENGTH_SHORT).show()
    }
}
revealLayout.reveal()
revealLayout.hide()

More details: GitHub

No5. Android ColorX

Android ColorX supplies Kotlin extension functions for color conversion (RGB, HSV, CMYK, etc.) and shade generation.

5.1 How to use?

Add the dependency:

dependencies {
    implementation 'me.jorgecastillo:androidcolorx:0.2.0'
}

Example usage:

val color = Color.parseColor("#e91e63")
val rgb = color.asRgb()
val argb = color.asArgb()
val hex = color.asHex()
val hsl = color.asHsl()
val hslColor = HSLColor(hue = 210f, saturation = 0.5f, lightness = 0.5f)
val colorInt = hslColor.asColorInt()

More details: GitHub

No6. AnimatedBottomBar

AnimatedBottomBar is an animated bottom navigation bar with customizable tabs, interceptable selections, and ripple effects.

6.1 How to use?

Add the dependency:

dependencies {
    implementation 'nl.joery.animatedbottombar:library:1.0.8'
}

In XML, add the view and a menu file defining tabs:

<nl.joery.animatedbottombar.AnimatedBottomBar
    android:id="@+id/bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:abb_selectedTabType="text"
    app:abb_indicatorAppearance="round"
    app:abb_indicatorMargin="16dp"
    app:abb_indicatorHeight="4dp"
    app:abb_tabs="@menu/tabs"
    app:abb_selectedIndex="1" />

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/tab_home" android:icon="@drawable/home" android:title="@string/home" />
    <item android:id="@+id/tab_alarm" android:icon="@drawable/alarm" android:title="@string/alarm" />
    <item android:id="@+id/tab_bread" android:icon="@drawable/bread" android:title="@string/bread" />
    <item android:id="@+id/tab_cart" android:icon="@drawable/cart" android:title="@string/cart" />
</menu>

Create tabs in code:

val bottomBarTab1 = AnimatedBottomBar.createTab(drawable, "Tab 1")
val bottomBarTab2 = AnimatedBottomBar.createTab(R.drawable.ic_home, R.string.tab_2, R.id.tab_home)

More details: GitHub

No7. RateBottomSheet

RateBottomSheet shows a rating prompt in a BottomSheet, offering a better UX than traditional dialogs.

7.1 How to use?

Add the dependency:

dependencies {
    implementation 'com.mikhaellopez:ratebottomsheet:1.1.0'
}

Customize string resources to change displayed text, then configure and monitor:

RateBottomSheetManager(this)
    .setInstallDays(1)
    .setLaunchTimes(2)
    .setRemindInterval(1)
    .setShowAskBottomSheet(false)
    .setShowLaterButton(false)
    .setShowCloseButtonIcon(false)
    .monitor()
RateBottomSheet.showRateBottomSheetIfMeetsConditions(this)

More details: GitHub

No8. TransformationLayout

TransformationLayout enables Material‑Design motion system transitions between Activities, Fragments, or Views.

8.1 How to use?

Add the dependency:

dependencies {
    implementation "com.github.skydoves:transformationlayout:1.0.4"
}

Wrap the source view in TransformationLayout and specify the target view:

<com.skydoves.transformationlayout.TransformationLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:transformation_targetView="@+id/myCardView"
    app:transformation_duration="450"
    app:transformation_direction="auto"
    app:transformation_fadeMode="in"
    app:transformation_fitMode="auto"
    app:transformation_pathMode="arc">
</com.skydoves.transformationlayout.TransformationLayout>

<com.google.android.material.card.MaterialCardView
    android:id="@+id/myCardView"
    android:layout_width="240dp"
    android:layout_height="312dp"
    app:cardBackgroundColor="@color/colorPrimary" />

Bind programmatically if needed:

transformationLayout.bindTargetView(myCardView)
fab.setOnClickListener { transformationLayout.startTransform() }
myCardView.setOnClickListener { transformationLayout.finishTransform() }

More details: GitHub

No9. Donut

Donut is a circular progress view that can display multiple datasets with fine‑grained control, gaps, and animations.

9.1 How to use?

Add the dependency:

dependencies {
    implementation "app.futured.donut:library:$version"
}

Insert the view in XML and configure datasets in code:

<app.futured.donut.DonutProgressView
    android:id="@+id/donut_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:donut_bgLineColor="@color/cloud"
    app:donut_gapWidth="20"
    app:donut_gapAngle="270"
    app:donut_strokeWidth="16dp" />

val dataset1 = DonutDataset(name = "dataset_1", color = Color.parseColor("#FB1D32"), amount = 1f)
val dataset2 = DonutDataset(name = "dataset_2", color = Color.parseColor("#FFB98E"), amount = 1f)

donut_view.cap = 5f
donut_view.submitData(listOf(dataset1, dataset2))

More details: GitHub

No10. CurveGraphView

CurveGraphView is an animated line‑chart library supporting multiple lines in a single plane, useful for comparing stocks, funds, or crypto prices.

10.1 How to use?

Add the dependency:

dependencies {
    implementation 'com.github.swapnil1104:CurveGraphView:{current_lib_ver}'
}

Place the view in XML:

<com.broooapps.graphview.CurveGraphView
    android:id="@+id/cgv"
    android:layout_width="0dp"
    android:layout_height="250dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

Configure and supply data in code:

curveGraphView.configure(
    CurveGraphConfig.Builder(this)
        .setAxisColor(R.color.Blue)
        .setIntervalDisplayCount(7)
        .setGuidelineCount(2)
        .setGuidelineColor(R.color.GreenYellow)
        .setNoDataMsg(" No Data ")
        .setxAxisScaleTextColor(R.color.Black)
        .setyAxisScaleTextColor(R.color.Black)
        .build()
)

val pointMap = PointMap()
pointMap.addPoint(0, 100)
pointMap.addPoint(1, 500)
pointMap.addPoint(5, 800)
pointMap.addPoint(4, 600)

More details: GitHub

Conclusion

These ten open‑source Android libraries provide a variety of visual effects and utilities; feel free to add them to your favorites, share your own recommendations in the comments, and enjoy coding!