Placeholder UI Launch Screen

creating instant application start

Intro

This is a quick article presenting very common neglect in creating application start on Android nowadays, and of course, simple and relevant solution.

Recently Google Design web page shows guidelines about launch screens (click). Personally I hate splash screens and it bugs me when they start to appear in products like Maps, Youtube or others. But this is not the topic I would like to touch here. Second described way of launching an application is Placeholder UI, or Starting Window.

Source: https://www.google.com/design/spec/patterns/launch-screens.html#launch-screens-types-of-launch-screens

Example shows a standard material screen with extended Toolbar, probably containing title, action buttons and few tabs. Unfortunately, there is no information of how to achieve this. But I remember an excellent article written by Cyril Mottier:

Android App Launching Made Gorgeous

Basically creating perfect preview window doesn’t require any addition work from developers if they are using android themes right. It was true for long time. But after more and more application started adopting Material Design, this effect suddenly disappeared.

Launch experience of some popular applications:

Gmail

Hangouts

So, I switched myself into investigation mode and found two potentially guilty guys.

1. Nowadays devs are encouraged to use Toolbar as part of their own layout to increase the flexibility of applying animations, translations and so on. And of course, that’s a good thing, but to make that happen we need to use the NoActionBar theme. That implicates no action bar in starting screen also.
2. There is a problem with AppCompat theme. Even if you are using standard Actionbar as a part of DecorView, your starting window won’t hold it’s preview. Switching from @style/Theme.AppCompat.Light.DarkActionBar to @android:style/Theme.Material.Light.DarkActionBar instantly solves this issue, but probably everyone wants to support pre-Lollipop as well.

Solution

Let's create simple Placeholder UI which mimic example from guidelines. We want something customizable. Extended Toolbar can have different heights.

Don’t forget to calculate final height of extended Toolbar on various screens:

values:

<!-- 56 + 48 -->
<dimen name="toolbar_placeholder_height">104dp</dimen>

values-land:

<!-- 48 + 48 -->
<dimen name="toolbar_placeholder_height">96dp</dimen>

values-sw600dp:

<!-- 64 + 48 -->
<dimen name="toolbar_placeholder_height">112dp</dimen>

values-sw600dp-land:

<!-- 64 + 48 -->
<dimen name="toolbar_placeholder_height">112dp</dimen>

Next we have to enable old-school windowTitle (<item name=”android:windowNoTitle”>false</item>) and customize it.

<style name="ActivityTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->

    <item name="android:windowTitleSize">@dimen/toolbar_placeholder_height</item>
    <item name="android:windowTitleStyle">@style/CustomWindowTitle</item>
    <item name="android:windowTitleBackgroundStyle">@style/CustomWindowTitleBackground</item>
    <item name="android:windowNoTitle">false</item>

    <!--   your app branding color for the app bar -->
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
</style>

window title styles:

<!-- Changes the background color of the title bar -->
<style name="CustomWindowTitleBackground">
    <item name="android:background">@color/primary</item>
</style>

<!-- Set the theme for the window title -->
<style name="CustomWindowTitle">
    <item name="android:singleLine">true</item>
    <item name="android:textAppearance">@style/CustomWindowTitleText</item>
</style>

<style name="CustomWindowTitleText">
    <item name="android:textColor">@android:color/transparent</item>
</style>

This will cause an unwanted side effect. Application will have permanent window title. We have to turn it off before Activity’s setContentView(View). The easiest way to achieve this is to create custom Activity which extends AppCompatActivity and use it as the base class for all of our Activities.

public class PlaceholderUiActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
    }
}

Well, that’s it. Hope to see this, or any similar solution in your application. You can see whole source code on my GitHub.

Read next

If you want to know a little bit more about Material Design tips for developers read my next article.

Case Study. Master/Detail Pattern Revisited

.