ProfileBar
A beautiful animated profile screen implemented as an AppBar with a ViewPager
Note: the animation always starts from the place it has been triggered!
Try it yourself!
Download the apk
More examples
Supported Android versions
- API 22 and higher
Earlier versions are to be added soon
Supported technologies
- Databinding
- Livedata
Features
- Collapsing toolbar
- Zoomable photo image
- Tabs pager
- Option menu
- Landscape and portrait orientations
Setup
Adding a dependency
- In build.gradle(Project) add as follows:
allprojects {
repositories {
...
maven {
url "https://jitpack.io"
}
- In build.gradle(Module) add the following code:
- Without databinding:
implementation "com.github.DichotoMe.ProfileBar:profilebar:1.6.4"
- With databinding:
android {
...
dataBinding {
enabled = true
}
}
...
implementation "com.github.DichotoMe.ProfileBar:profilebar:1.6.4"
implementation "com.github.DichotoMe.ProfileBar:profilebarBinding:1.6.4"
Building a layout
Place a ProfileBar and a TabPager inside a CoordinatorLayout as follows:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.dichotome.profilebar.ui.profileBar.ProfileBar
android:id="@+id/profileBar"
android:layout_width="match_parent"
android:layout_height="@dimen/profilebar_height" />
<com.dichotome.profilebar.ui.tabPager.TabPager
android:id="@+id/profilePager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Note: if you are using databinding, set <layout> as your root tag and specify the data to be bound:
<layout>
<data>
<variable ... />
</data>
...
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator"...>
...
</layout>
Hooking up data
Adding fragments to the pager
TabPager is designed to work with the TabFragment class. Its difference from the simple Fragment is the mutable title field. It stands for the name of the tab, that contains the fragment.
To add fragments to a TabPager, first of all, you need to extend TabFragment and implement a static newInstance() method, similar to this:
class FavouritesTabFragment() : TabFragment() {
companion object {
fun newInstance(tabTitle: String) = FavouritesTabFragment().apply {
title = tabTitle
}
}
}
See an example here
Next, create an arrayList named pagerFragment and add all the fragments to it, in the order you want to see them in the TabLayout
val pagerFragments = arrayListOf(
SubscriptionsTabFragment.newInstance("Subsriptions"),
FavouritesTabFragment.newInstance("Favourites")
)
Note: titles can be changed dynamically via TabPager.adapter using the following interface
Supplying values
- Without databinding:
In code:
profileBar.apply {
photoDrawable = photo
subtitleText = "Joined on 19 April 2017"
titleText = "Pavlo Bondan"
wallpaperDrawable = wallpaper
tabsEnabled = true
}
profilePager.adapter = TabAdapter(*your fragment manager*)
profilePager.fragments = pagerFragments
profileBar.setupWithViewPager(profilePager)
See a full example here
- With databinding:
1. In layout.xml
<data>
<variable name="logic"
... />
</data>
<com.dichotome.profilebar.ui.profileBar.ProfileBar
android:id="@+id/profileBar"
app:photoSource="@{logic.photo}" // Any source: drawable, bitmap, url string etc.
app:wallpaperSource="@{logic.wallpaper}" // Same
app:subtitle="@{logic.subtitle}"
app:title="@{logic.title}"
... />
<com.dichotome.profilebar.ui.tabPager.TabPager
android:id="@+id/profilePager"
... />
See a full example here
2. In code:
profilePager.adapter = TabAdapter(*your fragment manager*)
profilePager.fragments = pagerFragments
profileBar.setupWithViewPager(profilePager)
See a full example here