Slices UI template in android

Piyush Pandey

10 September 2019

Slice is the UI component that can display the contents from your application form within the Google Search app and later in other places like the Google Assistant or Google Assistant devices.

Rich and flexible layouts

Using templets. you can customize your Slices with color, text, imagery, video, and more to match your app’s design.

Slices Architecture

<!– To provide slices you must define a slice provider –>

<provider
    android:name=".MySliceProvider"
    android:authorities="com.saurabh.androidslices"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.app.slice.category.SLICE"/>
        
    </intent-filter>
</provider>

<provider

android:name=".MySliceProvider"

android:authorities="com.saurabh.androidslices"

android:exported="true">

<intent-filter>

</intent-filter>

</provider>

dependencies {
// ...
    implementation "androidx.slice:slice-builders:(latest version)"
// ...
}

dependencies {

// ...

implementation "androidx.slice:slice-builders:(latest version)"

// ...

}

Each Slice has an associated URI. When a surface wants to display a Slice, it sends a binding request to your app with this URI. Your app then handles
this request and dynamically builds the Slice via the onBindSlice method. The surface can then display the Slice when appropriate.

override fun onBindSlice(sliceUri: Uri): Slice? {
    val activityAction = createActivityAction()
    return if (sliceUri.path == "/hello") {
        list(context, sliceUri, ListBuilder.INFINITY) {
            row {
                primaryAction = activityAction
                title = "Hello World."
            }
        }
    } else {
        list(context, sliceUri, ListBuilder.INFINITY) {
            row {
                primaryAction = activityAction
                title = "URI not recognized."
            }
        }
    }
}

override fun onBindSlice(sliceUri: Uri): Slice? {

val activityAction = createActivityAction()

return if (sliceUri.path == "/hello") {

list(context, sliceUri, ListBuilder.INFINITY) {

row {

primaryAction = activityAction

title = "Hello World."

}

} else {

list(context, sliceUri, ListBuilder.INFINITY) {

row {

primaryAction = activityAction

title = "URI not recognized."

}

Interactive Slices

Similar to notifications, you can handle clicks within your Slice by attaching PendingIntent objects that are
triggered on user interaction. The example below starts an Activity that can receive and handle those intents:

public Slice createSlice(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    SliceAction activityAction = createActivityAction();
    return new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .addRow(new ListBuilder.RowBuilder()
                    .setTitle("Perform action in app.")
                    .setPrimaryAction(activityAction)
            ).build();
}

public SliceAction createActivityAction() {
    if (getContext() == null) {
        return null;
    }
    return SliceAction.create(
            PendingIntent.getActivity(
                    getContext(),
                    0,
                    new Intent(getContext(), MainActivity.class),
                    0
            ),
            IconCompat.createWithResource(getContext(), R.drawable.ic_home),
            ListBuilder.ICON_IMAGE,
            "Enter app"
    );
}

public Slice createSlice(Uri sliceUri) {

if (getContext() == null) {

return null;

}

SliceAction activityAction = createActivityAction();

return new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)

.addRow(new ListBuilder.RowBuilder()

.setTitle("Perform action in app.")

.setPrimaryAction(activityAction)

).build();

}

public SliceAction createActivityAction() {

if (getContext() == null) {

return null;

}

return SliceAction.create(

PendingIntent.getActivity(

getContext(),

new Intent(getContext(), MainActivity.class),

IconCompat.createWithResource(getContext(), R.drawable.ic_home),

ListBuilder.ICON_IMAGE,

"Enter app"

);

}

Slices also support other input types, such as toggles, that include the state in the intent that is sent to the app.

The receiver can then check the state that it receives:

public class MyBroadcastReceiver extends BroadcastReceiver {

    public static String EXTRA_MESSAGE = "message";

    @Override
    public void onReceive(Context context, Intent intent) {
        if (intent.hasExtra(EXTRA_TOGGLE_STATE)) {
            Toast.makeText(context, "Toggled:  " + intent.getBooleanExtra(
                    EXTRA_TOGGLE_STATE, false),
                    Toast.LENGTH_LONG).show();
        }
    }
}

public class MyBroadcastReceiver extends BroadcastReceiver {

public static String EXTRA_MESSAGE = "message";

@Override

public void onReceive(Context context, Intent intent) {

if (intent.hasExtra(EXTRA_TOGGLE_STATE)) {

Toast.makeText(context, "Toggled: " + intent.getBooleanExtra(

EXTRA_TOGGLE_STATE, false),

Toast.LENGTH_LONG).show();

}

Templates:-
Slices support a variety of templates.
https://developer.android.com/guide/slices/templates