.NET MAUI Android Auto: Async loading of lists

Android Auto has become an integral part of the modern driving experience, allowing users to access important information and features without taking their eyes off the road. In this blog post, we’ll explore how to implement asynchronous loading of lists in Android Auto to ensure a smooth and responsive user experience.

If you are new how to implement Android Auto in your .NET MAUI Application, then scroll to the very end of this post, and you will find a detailed tutorial video by Christian Strydom how to do it.

Implementation

Let’s assume that we have a class with a list of SomeObject named _allItems.
This list contains the data we want to display in an Android Auto list. If you dont have this private field of List<SomeObject> in your Android Auto Screen class, then define it like this: ‘private List<SomeObject> _allItems;’

We’ll use the OnGetTemplate method to check whether _allItems has data. If it doesn’t, we’ll start an asynchronous task to load the data and show a loading indicator. If it does, we’ll build the list with the existing data.

OnGetTemplate modify

In the OnGetTemplate method, we’ll first create a ListTemplateBuilder and check if _allItems has data:

public override ITemplate OnGetTemplate()
{
    var listTemplateBuilder = new ListTemplate.Builder();

    if (_allItems?.Any() != true)
    {
        // Start an async task to load data
        _ = LoadData();

        // Show a loading indicator
        return listTemplateBuilder.SetLoading(true).Build();
    }
    
    // Build the list using the existing data
    var items = BuildListItems(_allItems);
    listTemplateBuilder.AddItems(items);

    return listTemplateBuilder.Build();
}

Implement the Async Task

Now, let’s create an asynchronous task, LoadDataAsyncTask, which will invoke a method asynchronously to fetch and set the value of _allItems. We will use a hypothetical API call as an example:

    private async Task LoadData()
    {
        try
        {
            // Perform an asynchronous operation (e.g., an API call)
            var result = await SomeApiCallAsync(); // Replace with your actual API call

            // Set the value of _allItems with the result
            _allItems = result;
        }
        catch (Exception e)
        {
            // Handle exceptions and show a CarToast
            CarToast.MakeCarToast(CarContext , "An error occurred", CarToast.DurationLong).Show();
        }
        finally
        {
            // Ensure that the UI is invalidated
            // This will trigger the OnGetTemplate again.
            Invalidate();
        }
    }

Implementing asynchronous loading of lists in Android Auto ensures that your app remains responsive and user-friendly. By following this approach, you can fetch and display data efficiently, handle exceptions gracefully, and maintain a smooth user experience while driving. Android Auto provides a powerful platform for developers to create safe and engaging automotive experiences, and proper asynchronous loading is a key part of that experience.