GetSocial UI on Android

Prerequisites

  • Finished Getting Started with GetSocial Android SDK guide.
  • Add GetSocial UI to your dependencies:
    • Gradle Plugin: omit useUiLibrary or set it to true.
    • Manually: Add getsocial-sdk-ui to your gradle dependencies.

Show GetSocial UI View

To create GetSocial View you have to build it first of all. All GetSocial ViewBuilders extend from im.getsocial.sdk.ui.ViewBuilder class.

1
2
3
4
5
ViewBuilder viewBuilder = ...;//build view here

boolean wasShown = viewBuilder.show();
//or
//boolean wasShown = GetSocialUi.showView(viewBuilder);

Both of the methods will show GetSocial View on top of the current activity and return true if view was shown, or false otherwise. You can find an error, why GetSocial View wasn’t shown in your LogCat console.

Let’s create Smart Invites View as an example:

1
ViewBuilder viewBuilder = GetSocialUi.createInvitesView();

Custom Titles

All GetSocial Views have default localized titles, but you can easily set a custom one as well. In this case you’ll need to handle localization on your own. Here’s how you can set a title for Smart Invites View:

1
2
3
GetSocialUi.createInvitesView()
    .setWindowTitle("Share with Friends!")
    .show();

And voi la - your window now has a new title. To handle localization, you can use GetSocial.getLanguage() method to get the current language. All supported language codes are placed in im.getsocial.sdk.consts.LanguageCodes. Read more about Localization here.

Control GetSocial View State

GetSocial UI provides you with all the instruments to control state of its views. You’ve already read how to show GetSocial View. Now let’s try closing it. Do this with:

1
2
boolean saveState = false;
GetSocialUi.closeView(saveState);

It will close current visible GetSocial View or do nothing, if there is no GetSocial View.

It you want to close GetSocial View saving its current state and restore it later, pass true as saveState parameter:

1
2
3
4
5
6
//close and save
boolean saveState = true;
GetSocialUi.closeView(saveState);

//and restore
GetSocialUi.restoreView();

Warning

If you want to show new GetSocial view after you closed other with saving state, your saved state will be lost and view will be opened as usual. Calling restoreView after that won’t affect anything.

View State Events

If you want to be notified about onOpen and onClose events of GetSocial View, you can set a ViewStateListener to a view before showing it.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
GetSocialUi.createInvitesView()
    .setViewStateListener(new ViewStateListener() {
        @Override
        public void onOpen() {
            // GetSocial View was opened
        }

        @Override
        public void onClose() {
            // GetSocial View was closed
        }
    }).show();

UI User Actions Handling

GetSocial UI does all the job of communicating with the underlying GetSocial Data API for you. But sometimes, you may want to customize the behaviour of GetSocial UI and have more control over user’s actions. That’s why we introduced UiActionListener interface. When you create GetSocial View, you can set a listener to be notified about user’s events, track them, allow or disallow, etc:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
GetSocialUi.createGlobalActivityFeedView()
        .setUiActionListener(new UiActionListener() {
            @Override
            public void onUiAction(UiAction action, final UiAction.Pending pendingAction) {
                trackEvent(action);
                checkIfAllowed(action, new Runnable() {
                    @Override
                    public void run() {
                        pendingAction.proceed();
                    }
                });
            }
        })
        .show();

All possible events are listed in UiAction enumeration.

Warning

If you didn’t set a UiActionListener, all actions are executed as usual, but if you set it, you have to call pendingAction.proceed() each time when you want to execute an action, otherwise it won’t be performed.

For example, if user is not authorized, you could prompt him to login with Facebook and add an identity in your checkIfAllowed(...) method, and in case of success - proceed with an action. Proceeding can be done asynchronously.

Also, you can track events using your internal analytics.

Note

If you have some problems showing an alert or view while GetSocial UI View is opened, call GetSocialUi.closeView(true). Later, after your view is closed, call GetSocialUi.restoreView() and pendingAction.proceed() if you want to perform an action, or just GetSocialUi.restoreView() to get back to GetSocial UI View.

Handle Back Button

If you want to enable navigation with back button between GetSocial views, you need to override your onBackPressed method in your activity:

1
2
3
4
5
6
@Override
public void onBackPressed() {
    if (!GetSocialUi.onBackPressed()) {
        super.onBackPressed();
    }
}

If GetSocialUi.onBackPressed() returns true, back press was handled by GetSocial UI. If it returns false - handle it on your own.

Load UI Configuration

To customize GetSocial UI you have to provide custom assets (drawables, fonts) and JSON configuration file.

On Android all assets and UI configuration JSON should be located in the assets/ folder.

For instance to make GetSocial UI wider for landscape orientation you have to:

  1. Create a UI configuration file, e.g. assets/getsocial/ui-landscape.json with the following content:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    {
        "base-design": {
            "scale-mode": "scale-with-screen-size",
            "width": 640,
            "height": 320,
            "ppi": 72
        },
        "elements": {
            "window": {
                "width": 500,
                "height": 320
            }
        }
    }
    
  2. Load UI configuration. Add uiConfig property to the GetSocial configuration in the Android application build.gradle:

    1
    2
    3
    4
    getsocial {
        ...
        uiConfig "getsocial/ui-landscape.json"
    }
    

    Not using GetSocial Gradle plugin? Read how to load UI Configuration manually.

    Or you can load it dynamically in the application code:

    1
    2
    boolean wasLoaded = GetSocialUi.loadConfiguration(getContext(), "getsocial/ui-landscape.json");
    Log.i("GetSocial", "UI configuration was loaded successfully: " + wasLoaded);
    

    GetSocialUi.loadConfiguration(…) is Deprecated

    Loading UI Configuration from code has a limitation: you have to load it at each entry point to the app, e.g. when users open the app from a push notification.
    On the contrary, if you provide path to UI Configuration via GetSocial Gradle plugin, we’ll handle UI Configuration loading automatically.

Next Steps

Give us your feedback! Was this article helpful?

😀 🙁