Android Auto navigation app, show an interactive interface when selecting a location

Question

Context

I am trying to create an Android Auto navigation app using HERE SDK. I want to create an interface that allows the user to interact with it when they select a location, such as a parking lot or destination.

In Google Maps and Waze applications, I noticed that they do the same thing, and here is some images of thier implementations (next images):

Waze interface and Google Maps interface

My question

I am curious about how they achieved this. Moreover, is it feasible for me to replicate the same?

What did I try ?

I searched through the documentation of the Android Car App library and its design guidelines, but I could not find anything similar.

I tested these templates: PlaceListNavigationTemplate, and RoutePreviewNavigationTemplate. But they can't be used to achieve my goal. Maybe there is another template that can be used in this case.

I appreciate your help.

Update

As suggested, I tried MapTemplate with Pane to acheive the goal, but I faced two problems.

First

Rows should not be clickable inside the Pane.

Second

Starting from Car API level 6, we can add Actions to the rows

        @ExperimentalCarApi
        @NonNull
        @RequiresCarApi(6)
        public Builder addAction(@NonNull Action action) {
            List<Action> mActionsCopy = new ArrayList<>(mActions);
            mActionsCopy.add(requireNonNull(action));
            ActionsConstraints.ACTIONS_CONSTRAINTS_ROW.validateOrThrow(mActionsCopy);
            mActions.add(action);
            return this;
        }

I tried to add the actions to my rows

public class LocationPreview extends Screen {

    int id;
    Pane.Builder pane;

    protected LocationPreview(@NonNull CarContext carContext, int id) {

        super(carContext);
        this.id = id;
    }

    @SuppressLint("UnsafeOptInUsageError")
    @NonNull
    @Override
    public Template onGetTemplate() {

        Header header = new Header.Builder()
                .setStartHeaderAction(Action.BACK)
                .setTitle("Header")
                .build();

        pane = new Pane.Builder();

        pane.addRow(
                new Row.Builder()
                        .setTitle("Description")
                        .addText("This is example of MapTemplate")
                        .build()
        );

        pane.addRow(
                new Row.Builder()
                        .setTitle("Contact")
                        .addAction(
                                new Action.Builder()
                                        .setTitle("+66 66 66 66 66")
                                        .setIcon(CarIcon.ALERT)
                                        .setOnClickListener(this::startChatBot)
                                        .build()
                        )
                        .build()
        );


        return new MapTemplate.Builder()
                .setHeader(header)
                .setPane(pane.build())
                .build();
    }
}

But as you can see in the output, we can't see the action button.

Answer 1

What about the MapTemplate (slides 62 & 63 of the design guidelines)?

Answer 2

As of now HERE doesnot provide this functionality , it has to be implemented at application level.Have a look at this - https://developer.here.com/documentation/android-sdk-navigate/4.13.4.0/dev_guide/topics/android-auto.html . For detailed information I guess you can connect with their support team as well.