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.