Intent — Understanding and Using SingleTop and ClearTop

Essential concept for creating multi-paged application

What in the world is SingleTop and ClearTop? If you’ve created a multi-paged application in Sketchware, you’ve probably noticed that we’ve recently added a new block which looks like this:

Today I will be writing a simple guide explaining the appropriate uses of this block.

What you’ll need

1. Sketchware Application from Google Play

What you’ll learn

1. Concept of SingleTop and ClearTop for Intent

Multi-paged Application

Before we added this block, there was a problem when the users were creating a multi-paged application. By saying “multi-paged”, I mean applications that have multiple screens the application can transition to. Look at the example below:

In this example, I duplicate “screen 1” over and over. You can see that the same screen keeps on getting stacked on top of each other, even though they are identical.

Look at this image for a clear explanation:

Here is a question: “should the same view get stacked?”

Sometimes, the answer may be yes, but most of the time, we don’t want the same view to be stacked over and over. Hence, using the setFlag block can solve this problem.

The setFlags block come with two options:

1. Single Top — Organizes the views in a way that if the view you’re about to transition to was already called before, it would bring that view to the top rather than putting another copy on the top.

2. Clear Top — Clears all the previous views.

SingleTop

Here is what happens when I used setFlag SingleTop in the application.

Note that since Screen 1 already exists underneath, it does not duplicate the screen.

Important to Remember

SingleTop flag only checks for the previous screen. For example, if there were two views A and B, it would prevent the stack from looking like:

A
A
A

However, it wouldn’t prevent the stack from looking like:

A
B
A

Even though A already exists in the stack, view A would be stacked again since the previous view was B. This is why we have another option available, CLEAR_TOP.

ClearTop

Let’s say we have two views: A and B. Transitioning between two screens could look messy like the example below:

It keeps overlapping two views over and over, making the stack look like this:

Screen 2
Screen 1
Screen 2
Screen 1
…

SINGLE_TOP flag would not resolve this issue, since it only checks for the previous view. Hence, we need to use CLEAR_TOP flag if we want to prevent these views from stacking on top of each other.

Here is what the result looks like when I used CLEAR_TOP flag for both transitions, Screen 1 → Screen 2 and Screen 2 → Screen 1.

Here is the logic for reference:

Conclusion

Today, we talked about how we can use SingleTop and ClearTop flag to keep our views organized in multi-paged applications. There are few things worthy noting:

1. Views are kept in a stack.
2. Using SINGLE_TOP flag only checks the previous view before making the transition.
3. CLEAR_TOP clears all the view underneath the current view.

That’s it! Happy coding! :-)