An android ui component that adds gradient backdrop to your collapsing appbar
Sample Apk · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

This project started as the way for me to learn the new AGSL shader for android. You can read more about AGSL shader https://developer.android.com/develop/ui/views/graphics/agsl

Since alsl is support for android 13 and above, this project was rewritten in glsl.

The main idea behind this project was to show a gradient backdrop to collapsing appbar which responds to the scroll change. The backdrop provides add an immersive experience to the app.

(back to top)

Getting Started

Add this to your app/build.gradle file.

  implementation "io.github.snehilrx:shinebar:1.0.0"

Usage

Extend your application base theme with parent as Theme.Material3.DayNight.ShineBar

  <style name="Theme.ShineBar" parent="Theme.Material3.DayNight.ShineBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryDark">@color/purple_700</item>
        <item name="colorAccent">@color/teal_200</item>
        <!-- Customize your theme here. -->
   </style>

To add the shinebar to your layout.xml file

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:fitsSystemWindows="true">

        <io.github.snehilrx.shinebar.Shinebar
            android:id="@+id/shinebar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="false"
            app:layout_behavior="io.github.snehilrx.shinebar.Shinebar$ShinebarBehaviour" />

        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:fitsSystemWindows="true">

            <com.google.android.material.appbar.CollapsingToolbarLayout
                style="?attr/collapsingToolbarLayoutLargeStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:layout_scrollFlags="scroll|enterAlways"
                app:titleCollapseMode="scale"
                app:contentScrim="@android:color/transparent"
                app:statusBarScrim="@android:color/transparent"
                app:toolbarId="@id/toolbar">

                <cio.github.snehilrx.shinebar.ShineToolBar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@android:color/transparent"
                    app:elevation="0dp"
                    app:layout_collapseMode="pin" />


                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/textView"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginStart="16dp"
                        android:layout_marginEnd="16dp"
                        android:includeFontPadding="true"
                        android:fontFamily="@font/inter_bold"
                        android:text="@string/main_quote"
                        app:autoSizeMaxTextSize="19sp"
                        app:autoSizeMinTextSize="12sp"
                        app:autoSizeTextType="uniform"
                        app:layout_constraintBottom_toBottomOf="@+id/cardView"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/cardView"
                        app:layout_constraintTop_toTopOf="@+id/cardView" />

                    <androidx.cardview.widget.CardView
                        android:id="@+id/cardView"
                        android:layout_width="0dp"
                        android:layout_height="270dp"
                        android:layout_gravity="center|start"
                        android:layout_marginStart="16dp"
                        android:layout_marginTop="64dp"
                        android:layout_marginBottom="24dp"
                        app:cardCornerRadius="32dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toStartOf="@+id/guideline3"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent">

                        <VideoView
                            android:id="@+id/videoView"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content" />
                    </androidx.cardview.widget.CardView>

                    <androidx.constraintlayout.widget.Guideline
                        android:id="@+id/guideline3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_constraintGuide_percent="0.42" />
                </androidx.constraintlayout.widget.ConstraintLayout>

            </com.google.android.material.appbar.CollapsingToolbarLayout>
        </com.google.android.material.appbar.AppBarLayout>
  <include
    layout="your content layout"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

To make your app immersive call makeAppbarImmersive

shinebarInstance.makeAppbarImmersive(this, binding.root)

To customize the start color and end color of the gradient backdrop

shinebarInstance.apply {
  setStartColor(it.first)
  setEndColor(it.second)
}

Roadmap

• Publish this library to maven central.

• Publish an agsl verion for android 13 and above.

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

snehil - [email protected]

Project Link: https://github.com/snehilrx/ShineBar

(back to top)