Introduction to Slices

Overview

What happens when your work is completed in one click instead of two or more?. The work will be done so easily. Isn’t it quite impressive?

This feature can be achieved through Slices.

Slices are the new concept from which you can embed your application content in other surface like Google Search app. Slices are part of Android P which is a great approach to its user interface. Slices can help user to complete work faster by providing app content to outside surface.

Slices are backward compatible that means it is compatible with Android Kit-Kat and further android version. So it concludes that slices are available for 95% of android devices. Isn’t it a great news?

What actually Slices are?

Slices demonstrate a piece of your app content. Slices are

1. Templeted
   This means that slices provide rich layout and content system to express your app content in many ways.
   Using templates, you can add image, text, video to slice and make it more visible to user.
2. Interactive
   Slices does not contain only static data. It contains bundle of variety of components.
   It provides real-time data, deep-links, inline actions, toggle button, sliders and scrolling content.
3. Updatable
   We can iterate slices frequently by adding more presentable surfaces to expand your app reach.
   You can also add more templates and controls to make slices more engaging and more powerful for users.

Architecture Overview

Slice Provider extend a Content Provider. Slices are based on top of Content URI’s, which means you have wide variety of Slices hosted from your app.

When app wants to show your slice, your app gets a callback to onBindSlice() and you’ll get URI and you’ll get to decide what content you want to connect to that URI and return in that slice.

But, in interactive slice you have to update data in slice and these can be done through notifyChange() method. You send a standard content provider to notify change on your slice URI and whoever who present your slice will get to know that it’s time to update and they’ll give you callback and you can return updated data in response.

Where Slice is going to launch?

Slices are going to launch in search this year, where we are going to use slices for enhance app predictions as the user is searching.

There are two main use cases in terms of how slices will appear

1. Application Name
2. General tems

As the user searches with your application name, he will be able to view your application slice to jump over your application.

The other one is general searches like app deep-link or specific features.

Let’s make our first Slice

Before starting to work on slice you have to add necessary slice library. You’ll need to add slice-core and slice-builders to your app’s gradle file.

dependencies {  
    implementation 'androidx.slice:slice-core:1.0.0-alpha1'
    implementation 'androidx.slice:slice-builders:1.0.0-alpha1'
}

To create a slice, you have to make a one class which extend SliceProvider. Each slice contain uri and provider which bind slice with uri.

Slice Provider should be defined in your app manifest file which is responsible to find your slice by other surfaces.

This will handle all required permission internally so that you don’t have to define any permission separately.

<application
        ...

        <!-- To provide slices you must define a slice provider -->
        <provider
            android:authorities="com.android.example.slicecodelab"
            android:name=".MySliceProvider"
            android:exported="true">
        </provider>

        ...
    </application>

Let’s implement class which extends SliceProvider

public class MySliceProvider extends SliceProvider {
    @Override
    public boolean onCreateSliceProvider() {
        return true;
    }

    public Slice onBindSlice(Uri sliceUri) {
        switch(sliceUri.getPath()) {
            case "/temperature":
                return createTemperatureSlice(sliceUri);
        }
        return null;
    }

 }

Now it’s time to build our first Slice
Slice is created with the help of ListBuilder class. You just have to create row which is displayed in slice.You can set title to the slice.

private Slice createTemperatureSlice(Uri sliceUri) {
        // Construct our parent builder
        ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY);

        // Construct the builder for the row
        ListBuilder.RowBuilder temperatureRow = new  ListBuilder.RowBuilder(listBuilder);                        

        // Set title
        temperatureRow.setTitle(“Temperature”);

        // Add the row to the parent builder
        listBuilder.addRow(temperatureRow);

        // Build the slice
        return listBuilder.build();
    }

To run the application which includes slice, you have to install Slice Viewer. To make slice interactive you have to set action to it so that user can navigate to particular section of your application.

To run application you have to edit some configuration, to do so you have follow following steps.

1. In your project, select Run > Edit Configurations
2. In top-left corner, click + button and select Android App
3. Enter slice in the name field
4. Select your app module in the Module dropdown
5. Under Launch Options, select URL from the Launch dropdown
6. Enter slice- in the URL field
7. Example: slice-content://com.example.your.sliceuri/path
8. Click OK.

You can also refer these steps from here.

This is how you can create and run slice application in easy few steps. You can also add various component to your slice to represent it more attractive.

For example you can add temperature increase and decrease icon to your slice like this.

private Slice createTemperatureSlice(Uri sliceUri) {

// Construct our parent builder
        ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY);

        // Construct the builder for the row
        ListBuilder.RowBuilder temperatureRow = new ListBuilder.RowBuilder(listBuilder);
        // Set title
        temperatureRow.setTitle(“Temperature”);

SliceAction tempUp = new SliceAction(tempIntent,
                IconCompat.createWithResource(getContext(), R.drawable.ic_temp_up),
                "Increase temperature");
        SliceAction tempDown = new SliceAction(tempIntent,
                IconCompat.createWithResource(getContext(), R.drawable.ic_temp_down),
                "Decrease temperature");

        // Add the actions to appear at the end of the row
        temperatureRow.addEndItem(tempDown);
        temperatureRow.addEndItem(tempUp);
        // Set primary action for the row
        temperatureRow.setPrimaryAction(openTempActivity);

        // Add the row to the parent builder
        listBuilder.addRow(temperatureRow);

        // Build the slice
        return listBuilder.build();
}