Android TV | How to Center ListRow Items within a parent view (HorizontalGridView)

Question

I'm trying to create a row of action items that sits centered just above the player controls bar in a video player using Leanback.

The action items are a ListRow of image views that are actionable (to represent emoticon reactions).

My problem: I can't get them to position in the center, just like the primary and secondary controls bar are centered on the player. The current list row appears like this:

Here's the XML layout that defines an individual action:

<?xml version="1.0" encoding="utf-8"?>
<com.makeramen.roundedimageview.RoundedImageView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rounded_image_view"
        android:src="@drawable/ic_action_insert_emoticon"
        android:scaleType="fitStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:riv_corner_radius="30dip"
        app:riv_border_width="2dip"
        app:riv_border_color="#333333"
        app:riv_tile_mode="repeat"
        app:riv_oval="true">
</com.makeramen.roundedimageview.RoundedImageView>

And the presenter that instantiates each row item:

public class RoundedViewPresenter extends Presenter {
    private static final String TAG = RoundedViewPresenter.class.getSimpleName();

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View rootView = inflater.inflate(R.layout.rounded_image_view, parent, false);
        RoundedImageView roundedImageView = (RoundedImageView) rootView.findViewById(R.id.rounded_image_view);

        //roundedImageView.mutateBackground(true);
        //roundedImageView.setBackground(backgroundDrawable);
        roundedImageView.setFocusable(true);
        roundedImageView.setFocusableInTouchMode(true);
        ((HorizontalGridView)parent).setGravity(Gravity.CENTER);
        return new ViewHolder(roundedImageView);
    } ...

And then add the rows in the player's fragment like this:

// add emoji rows
...
ArrayObjectAdapter emojiRowAdapter = new ArrayObjectAdapter(new RoundedViewPresenter());
emojiRowAdapter.add(mObjectModel0);
emojiRowAdapter.add(mObjectModel1);
emojiRowAdapter.add(mObjectModel2);
emojiRowAdapter.add(mObjectModel3);
ListRow emojiRow = new ListRow(emojiRowAdapter);
mRowsAdapter.add(emojiRow);
...

I have tried both the android:layout_gravity="center" and programmatic HorizontalGridView.setGravity() approaches without success.

Any idea why, and/or alternative methods to center the row?

Answer 1

You can add a second row of actions under the main controls using setSecondaryActionsAdapter call in PlaybackControlsRow.

Look at: https://android.googlesource.com/platform/development/+/29dadb6d144817840372af52629b4b34c074b78d/samples/SupportLeanbackDemos/src/com/example/android/leanback/PlaybackOverlayFragment.java for an example on how to do it.

Answer 2

Turns out it's oddly difficult to center any HorizontalGridView-based row, which seems to be pretty much every row created with ListRowPresenter. All seem to be left-justified. None of the suggestions offered here seemed to work, so instead I decided to replace the default video title/description dock with my own custom view. Details in this other closely-related question:

https://stackoverflow.com/a/37736890/1145905

Answer 3

Try this property android:layout_gravity="center_horizontal|center_vertical".

Like below xml code.

<?xml version="1.0" encoding="utf-8"?>
<com.makeramen.roundedimageview.RoundedImageView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rounded_image_view"
        android:src="@drawable/ic_action_insert_emoticon"
        android:scaleType="fitStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        app:riv_corner_radius="30dip"
        app:riv_border_width="2dip"
        app:riv_border_color="#333333"
        app:riv_tile_mode="repeat"
        app:riv_oval="true">
</com.makeramen.roundedimageview.RoundedImageView>

It will exact center as you want in your output.

Answer 4

I believe the alignment is an inherent property of the HorizontalGridView. I believe the problem is that the grid view, which means the entirety of the view, takes up the width of the screen.

In order to reduce the view's size, you'll have to either programatically or through the XML change the layout params to be WRAP_CONTENT which means the smallest width that makes sense or supply a set width.

For either of these, the grid will be smaller and thus your centering attribute will have a noticeable effect.