New Blog. Who dis?
„Dis“ shows you how to use Kotlin to build a custom Dialog
for On-Boarding and Sales-Pitch user interactions, on Android.
We chose a generic approach covering both, using a DialogFragment containing a ViewPager with some basic UI elements.
Due to the particulars of our requirements, we use fully fledged Fragments inside a FragmentPagerAdapter.
If you are interested in Kotlin in general, find out more here. Full code available in this GitHub repository.
1. Take it away Jacky
Let’s review our requirements. We want to:
- Pass Fragments to a
DialogFragment
dynamically. - Display those Fragments in a
ViewPager
. - Give the user some custom UI elements to control the pager.
- make the
DialogFragment
generic enough to cover both On-Boarding and Sales-Pitch use cases.
2. Breakfast of champions: coffee and XML
Lets start building our Dialog. A ViewPager
named view_pager_container
will hold our fragments. Below, we position our custom control elements:
One Button on the left named intro_btn_skip
, which can be used to skip to the end of an on-boarding sequence. This Button will be hidden when the end of a sequence of fragments is reached.
A centered LinearLayout named indicator_container
, which dynamically grows to reflect the number of elements in a sequence of fragments, and the user’s current position.
An ImageButton on the right named intro_btn_next
, which is visible when not on the last fragment of a sequence, which gives the user an alternative to swiping the ViewPager
A Button in the same position as intro_btn_next
, named intro_btn_finish
allowing the user to continue with whatever use case is implemented.
Prepare to snooze:
quite boring, amiright. But it gets better with some …
3. Sweet, sweet Kotlin
Love your parents, use your superclasses
Time to get cracking.
We start out creating a new Kotlin class OnBoardingDialog
which extends DialogFragment and implements ViewPager.OnPageChangeListener
The superclass DialogFragment takes care of all that android goodness we are used to from Dialog, while the OnPageChangeListener allows us to hook into our ViewPager on page changes.
We start with something like this
Save the cheerleader, save the Fragment
we need some way to tell our OnBoardingDialog
what it is supposed to save and where. A simple mutableList
perfectly models our need for sequential fragments, and expose the collection accessors you need:
Now whoever uses our OnBoardingDialog
has a way to let us know what fragments we need to display.
So we can …
Build it and they will come
Our daddy DialogFragment
extends Fragment
so we can override any ol‘ fragment life cycle method, such as onCreateView
.
In there we inflate the dialog, dynamically add indicators to our indicator_container
, and save the indicators for later use
„Unresolved reference: view_indicator“ you say?
Here you go (also add those drawables to avoid that ugly red color):
You are not prepared! - Well, actually we kinda are.
up to now we have:
- saved our fragments
- added indicators for our fragments
- inflated our layout
Next, we need actually put those fragments into the ViewPager
. We can do this by implementing a FragmentPagerAdapter
…
The time has arrived … let’s populate the heck out of that ViewPager
:
Remember the methods we generated from ViewPager.OnPageChangeListener
(I member). We have to replace those TODOs and add some real code to our page changes (unless you are onPageScrollStateChanged
, in which case: nobody likes you and you get nothing), in order to change the indicator on scroll and manage the visibility of our buttons:
And that’s it. Our basic implementation is done. However, if you don’t want to be basic, continue to…
Eye Candy and Dynamic Stuff
to finish up our OnBoardingFragment, we added a few more features:
- Color transition on swipe
- text in Skip- and Finish-Button can be set dynamically
- callbacks can be set dynamically
- selectPage method to allow calling context to set page programmatically
The finished product can be found here
Now the Dialog is ready to use
4. Just end this already
Dont‘ worry, we are almost done
Walk hand in hand into oblivion
Let’s review the Sales-Pitch dialog from our example:
- Just 1 page (single static fragment)
- Replace „FINISH“ with „BUY NOW“
- on „BUY NOW“ do something
The SalesPitchFragment just contains a bunch of fixed TextViews, so nothing fancy is needed here:
Lets bring it all togother in our MainActivity.kt
And we are done.
Check out our company portfolio for cool projects we have done. If you are broke and/or looking for a job, here are our job postings.