GuidedStepFragment
– Android TV app hands on tutorial 10

FirstStepFragment

GuidedStepFragment to show Settings display

Leanback support library offers a Fragment. Especially, it is useful to use in settings display. Official doc says,

A GuidedStepFragment is used to guide the user through a decision or series of decisions. 

I also recommend you to read these references for this topic.

Create GuidedStepActivity & Implement onItemClicked in MainFragment

At first, create GuidedStepActivity by right click your package name New → Java Class → type “GuidedStepActivity” in class name. Note that this GuidedStepActivity doesn’t require res/layout xml file, so it is ok to only create Java class. Make this class subclass of Activity (write ” extends Activity” in class declaration).

Then, let’s make a button to launch this GuidedStepActivity.

Add declaration of this Activity to AndroidManifest.

 

So we can start implementing GuidedStepFragment from here. Before real implementation, I will explain a basic structure of this GuidedStepFragment.

GuidedStepFragment – Structure

As mentioned in official doc, It is composed of a guidance view on the left and a view on the right containing a list of possible actions.

GuidedStepFragment

GuidedStepFragment is composed of Guidance View on the left and Actions view on the right.

 

Overriding Method

To use GuidedStepFragment, we need to override at least these 3 methods.

  • onCreateGuidance(Bundle)
    – To create guidance view (left side). 
    – Attributes of guidance (title, description etc) are specified here. 
  • onCreateActions(List, Bundle)
    – To define list of possible actions (right side).
    – Attributes of action are specified here.
  • onGuidedActionClicked(GuidedAction)
    – This is onClick listener.
    – Behaviors after clicking action buttons can be specified here.

At least if you know this, you can use GuidedStepFragment. But you may want to modify the design layout of this Guidance. You can use “Theme” & “Stylist” to customize visual styling

Theme

GuidedStepFragment must receive Theme_Leanback_GuidedStep. We can set themes in one of three ways,

1. Set the theme for the host Activity to the GuidedStep theme.

2. The existing Activity theme can have an entry added for the attribute LeanbackGuidedStepTheme_guidedStepTheme.

3. Custom subclasses of GuidedStepFragment may provide a theme through the onProvideTheme() method.

Stylists

You can also use “Stylists” (instead of Presenter which we are using so far to customize visual styling. There are 2 Stylist class.

  • GuidanceStylist          : left guidance view
    – onCreateGuidanceStylist()
  • GuidedActionsStylist : right actions view
    – onCreateActionsStylist()

GuidedStepFragment – Minimum Implementation (Overriding method)

To attach instance of GuidedStepFragment, we can use GuidedStepFragment.add function. Here instance of FirstStepFragment class, which is a subclass of GuidedStepFragment, is added at onCreate of GuidedStepActivity.

Please also check the sample implementation of 3 overriding methods such as, onCreateGuidance, onCreateActions and onGuidedActionClicked.

Build and run 1

Guidance should be looks like this.

FirstStepFragment

 

Source code is on github.

GuidedStepFragment – Theme

I copied res/values/themes.xml from Google sample source code. Then, you can onProvideTheme method to specify customized Theme.

In the AndroidManifest file, specify theme.

Which is defined in themes.xml file.

According to official doc

GuidedStepFragments must have access to an appropriate theme in order for the stylists to function properly. Specifically, the fragment must receive Theme_Leanback_GuidedStep, or a theme whose parent is set to that theme.

Another way to specify theme is to override GuidedStepFragment.onProvideTheme method.

That’s all for implementation of FirstStepFragment, let’s proceed to implment SecondStepFragment. 

SecondStepFragment

At first let’s implement 3 override methods, onCreateGuidance, onCreateActions and onGuidedActionClicked.

 

Radio-button type Action

addCheckedAction method in onCreateActions will make radio button type action list.

checkSetId method is the key to achieve this. When you specify actions with same setId, you can select only one of this action.

GuidedStepFragment – Stylist

Finally, customize stylist. To customize left side guidance view, call onCreateGuidanceStylist.

Sample layout file looks like this, so you can specify layout of the guidance view inside this layout file.

Build and run 2

Now customized layout guidance view with radio button type actions are implemented.

SecondStepFragment

Source code is on github.

Sponsored Links

2 responses

  1. Hello,

    Thank you so much for your tutorial. I am trying to implement the GuidedStepFragment. I just created a skeleton TV app with Android Studio. However, my “style” is different than yours. In my Guidance View (left side), my icon is to the left of the Breadcrump, Title, and Description. Yours is to the right of these items. Also in my Action View (right side), my action items are in button format whereas yours is more in a list view format (when in focus, your’s highlight the action item the whole width of the Action View). I like to get the style you’d shown in your tutorial. How can I achieve that? I looked through your code in GuidedStepActivity.java closely and compared that with mine. They look pretty identical yet mine came out different! What am I missing? Appreciate your help.

    Thank you in advance.
    ~mw

Leave a Reply

Your email address will not be published.