A beautiful animated profile screen implemented as an AppBar with a ViewPager
- API 22 and higher
Earlier versions are to be added soon
- Databinding
- Livedata
- Collapsing toolbar
- Zoomable photo image
- Tabs pager
- Option menu
- Landscape and portrait orientations
- 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"
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>
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
- 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