Acer Google TV remote

[wwwescape]

I have been trying to replicate my Acer Google TV remote for a while now.

This is my remote:

This is what I have so far:

This is the YAML:

type: custom:android-tv-card
remote_id: remote.living_room_tv
media_player_id: media_player.living_room_tv
rows:
  - - power
    - null
    - volume_mute
  - - account
    - search
    - settings
  - - nav_buttons
  - - back
    - home
    - tv
  - - volume_up
    - null
    - channel_up
  - - volume_down
    - menu
    - channel_down
  - - youtube
    - null
    - netflix
  - - primevideo
    - null
    - apps
custom_actions:
  - type: button
    name: power
    tap_action:
      action: key
      key: POWER
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:power
    styles: |-
      :host {
        --icon-color: rgb(255, 255, 255);
        background: rgb(255, 0, 0);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: volume_mute
    tap_action:
      action: key
      key: VOLUME_MUTE
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:volume-mute
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: account
    icon: mdi:account
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: search
    tap_action:
      action: key
      key: SEARCH
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:microphone
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: home
    tap_action:
      action: key
      key: HOME
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:home
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: tv
    tap_action:
      action: key
      key: TV
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:television-classic
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: apps
    icon: mdi:apps
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: center
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:checkbox-blank-circle
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        --size: 200px;
        background: rgb(255, 255, 255);
        border-radius: 200px;
        margin: -70px;
        padding: 70px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: up
    tap_action:
      action: key
      key: DPAD_UP
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-up
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        top: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: down
    tap_action:
      action: key
      key: DPAD_DOWN
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-down
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        bottom: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: left
    tap_action:
      action: key
      key: DPAD_LEFT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-left
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        left: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: right
    tap_action:
      action: key
      key: DPAD_RIGHT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-right
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        right: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: touchpad
    name: touchpad
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    up:
      type: button
      name: up
      tap_action:
        action: key
        key: DPAD_UP
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-up
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          top: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    left:
      type: button
      name: left
      tap_action:
        action: key
        key: DPAD_LEFT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-left
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          left: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    right:
      type: button
      name: right
      tap_action:
        action: key
        key: DPAD_RIGHT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-right
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          right: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    down:
      type: button
      name: down
      tap_action:
        action: key
        key: DPAD_DOWN
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-down
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          bottom: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: custom_button_6
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    icon: mdi:account
    styles: 'color: red'
styles: |-

  #row-1 {
    justify-content: center;
  }
  #row-2 {
    justify-content: center;
  }
  #row-3 {
    justify-content: center;
  }

account and apps do nothing at the moment and are just dummy icons. I've not added the Source button.

There is a problem with the set of icons above the D-Pad. They don't honour the same widths as the buttons below the D-Pad. Any thoughts on how to fix this?

I've been trying to replicate the single set of volume / channel buttons and bigger app launcher buttons. Is this possible? I don't want to use sliders.

Any suggestion to make this remote even better and closer looking to the real remote?

[Nerwyn]

Based on your config format I see you're using the v4 alpha. While I think I've ironed out most of the bugs (for now) just know that it still may be buggy and it's FAR from complete.

There is a problem with the set of icons above the D-Pad. They don't honour the same widths as the buttons below the D-Pad. Any thoughts on how to fix this?

You're adding justify-content: center to the wrong rows in your overall styles. In v4, you should be able to hover over elements in the remote card preview and see the correct element/row/column/pad selector. I'm guessing it's rows 3, 4, and 5 but you should double check.

I've been trying to replicate the single set of volume / channel buttons and bigger app launcher buttons. Is this possible? I don't want to use sliders.

You could place them in their own column, and then style their column background and border radius using its ID CSS selector, similar to how the dpad rows should be styled as described above.

Any suggestion to make this remote even better and closer looking to the real remote?

V4 adds labels to all elements, and you can use that and CSS to further style the source buttons. By default the label appears below button icons but you should be able to change that by setting flex direction to row.

You could also change the volume and channel icons to plus and minus, and then create fake buttons for the volume and channel labels. And add an Ok label to the dpad center button.

[wwwescape]

Thanks for your reply. Let me check these and let you know.

[wwwescape]

I've managed to fix most of the things based on your reply. Thank you.

I know that since I'm using the alpha version, I shouldn't be asking too many questions yet but If you could point me in the right direction:

1. How do I get the OK label to be centered on the D-Pad?
2. How do I make the MENU labelled button interactable?
3. Is there a way for a button to take up multiple columns so that I can have the app launcher button take up 2 columns like on my remote?

Here's my update YAML:

type: custom:android-tv-card
remote_id: remote.living_room_tv
media_player_id: media_player.living_room_tv
rows:
  - - power
    - null
    - volume_mute
  - - account
    - search
    - settings
  - - nav_buttons
  - - back
    - home
    - tv
  - - volume_up
    - source
    - channel_up
  - - vol
    - null
    - ch
  - - volume_down
    - menu
    - channel_down
  - - youtube
    - null
    - netflix
  - - primevideo
    - null
    - apps
custom_actions:
  - type: button
    name: power
    tap_action:
      action: key
      key: POWER
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:power
    styles: |-
      :host {
        --icon-color: rgb(255, 255, 255);
        background: rgb(255, 0, 0);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: volume_mute
    tap_action:
      action: key
      key: VOLUME_MUTE
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:volume-mute
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: account
    icon: mdi:account
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: search
    tap_action:
      action: key
      key: SEARCH
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:microphone
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: center
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:checkbox-blank-circle
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        --size: 200px;
        background: rgb(255, 255, 255);
        border-radius: 200px;
        margin: -70px;
        padding: 70px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: up
    tap_action:
      action: key
      key: DPAD_UP
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-up
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        top: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: down
    tap_action:
      action: key
      key: DPAD_DOWN
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-down
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        bottom: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: left
    tap_action:
      action: key
      key: DPAD_LEFT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-left
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        left: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: right
    tap_action:
      action: key
      key: DPAD_RIGHT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-right
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        right: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: touchpad
    name: touchpad
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    up:
      type: button
      name: up
      tap_action:
        action: key
        key: DPAD_UP
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-up
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          top: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    left:
      type: button
      name: left
      tap_action:
        action: key
        key: DPAD_LEFT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-left
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          left: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    right:
      type: button
      name: right
      tap_action:
        action: key
        key: DPAD_RIGHT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-right
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          right: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    down:
      type: button
      name: down
      tap_action:
        action: key
        key: DPAD_DOWN
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-down
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          bottom: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: home
    tap_action:
      action: key
      key: HOME
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:home
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: tv
    tap_action:
      action: key
      key: TV
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:television-classic
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: volume_up
    tap_action:
      action: key
      key: VOLUME_UP
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:plus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: source
    icon: ''
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
    label: SOURCE
  - type: button
    name: channel_up
    tap_action:
      action: key
      key: CHANNEL_UP
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:plus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: vol
    icon: ''
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
    label: VOL
  - type: button
    name: ch
    icon: ''
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
    label: CH
  - type: button
    name: volume_down
    tap_action:
      action: key
      key: VOLUME_DOWN
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:minus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: menu
    tap_action:
      action: key
      key: MENU
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: ''
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
    label: MENU
  - type: button
    name: channel_down
    tap_action:
      action: key
      key: CHANNEL_DOWN
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:minus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: apps
    icon: mdi:apps
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
styles: |-
  #row-3 {
    justify-content: center;
  }
  #row-4 {
    justify-content: center;
  }
  #row-5 {
    justify-content: center;
  }

[Nerwyn]

How do I get the OK label to be centered on the D-Pad?

In v4 you have complete control of the CSS of all sub-elements within the card. You can add position: absolute to labels to make it overlay with the icon. Button size is tied to it's icon unless the user explicitly adds height and width using CSS, but it's easier to just make the icon invisible using color: rgb(0, 0, 0, 0) or color: transparent.

How do I make the MENU labelled button interactable?

It's interactable by default and it looks like the action is defined in your config, but the ripple effects are tied to the icon. The easiest way to add those back is to add an icon and make it transparent as described above.

Is there a way for a button to take up multiple columns so that I can have the app launcher button take up 2 columns like on my remote?

Add width: 120px or something similar to the styles of the source buttons. You may also want to change justify-content for the bottom rows to change how spaced apart the icons are.

Here's your config with most of the above updates minus the last one. I also moved the volume, channel, and menu/source buttons into columns and added a background to the volume and channel button groups.

type: custom:android-tv-card
remote_id: remote.living_room_tv
media_player_id: media_player.living_room_tv
rows:
  - - power
    - null
    - volume_mute
  - - account
    - search
    - settings
  - - nav_buttons
  - - back
    - home
    - tv
  - - - volume_up
      - vol
      - volume_down
    - - source
      - menu
    - - channel_up
      - ch
      - channel_down
  - - youtube
    - null
    - netflix
  - - primevideo
    - null
    - apps
custom_actions:
  - type: button
    name: power
    tap_action:
      action: key
      key: POWER
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:power
    styles: |-
      :host {
        --icon-color: rgb(255, 255, 255);
        background: rgb(255, 0, 0);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: volume_mute
    tap_action:
      action: key
      key: VOLUME_MUTE
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:volume-mute
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: account
    icon: mdi:account
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: search
    tap_action:
      action: key
      key: SEARCH
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:microphone
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: center
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:checkbox-blank-circle
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        --size: 200px;
        background: rgb(255, 255, 255);
        border-radius: 200px;
        margin: -70px;
        padding: 70px;
      }
      .label {
        position: absolute;
        font-size: 32px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    label: OK
  - type: button
    name: up
    tap_action:
      action: key
      key: DPAD_UP
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-up
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        top: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: down
    tap_action:
      action: key
      key: DPAD_DOWN
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-down
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        bottom: 25px;
        height: 90px;
        width: 300px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: left
    tap_action:
      action: key
      key: DPAD_LEFT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-left
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        left: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: right
    tap_action:
      action: key
      key: DPAD_RIGHT
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    icon: mdi:menu-right
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        z-index: 2;
        right: 30px;
        height: 170px;
        width: 90px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: touchpad
    name: touchpad
    tap_action:
      action: key
      key: DPAD_CENTER
      platform: ANDROID TV
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
      media_player_id: media_player.living_room_tv
    up:
      type: button
      name: up
      tap_action:
        action: key
        key: DPAD_UP
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-up
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          top: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    left:
      type: button
      name: left
      tap_action:
        action: key
        key: DPAD_LEFT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-left
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          left: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    right:
      type: button
      name: right
      tap_action:
        action: key
        key: DPAD_RIGHT
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-right
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          right: 30px;
          height: 170px;
          width: 90px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    down:
      type: button
      name: down
      tap_action:
        action: key
        key: DPAD_DOWN
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      hold_action:
        action: repeat
        platform: ANDROID TV
        remote_id: remote.living_room_tv
        target:
          entity_id: remote.living_room_tv
        media_player_id: media_player.living_room_tv
      icon: mdi:chevron-down
      styles: |-
        :host {
          --icon-color: rgb(197, 199, 197);
          z-index: 2;
          bottom: 25px;
          height: 90px;
          width: 300px;
        }
      autofill_entity_id: true
      value_attribute: state
      haptics: true
      entity_id: remote.living_room_tv
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: home
    tap_action:
      action: key
      key: HOME
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:home
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: tv
    tap_action:
      action: key
      key: TV
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:television-classic
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
  - type: button
    name: volume_up
    tap_action:
      action: key
      key: VOLUME_UP
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:plus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: source
    icon: mdi:checkbox-blank-circle-outline
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: |
      .icon {
        color: rgb(0, 0, 0, 0);
        color: transparent;
      }
      .label {
        position: absolute;
      }
    label: SOURCE
  - type: button
    name: channel_up
    tap_action:
      action: key
      key: CHANNEL_UP
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:plus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: vol
    icon: mdi:checkbox-blank-circle-outline
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: |
      .icon {
        color: rgb(0, 0, 0, 0);
        color: transparent;
      }
      .label {
        position: absolute;
      }
    label: VOL
  - type: button
    name: ch
    icon: mdi:checkbox-blank-circle-outline
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: |
      .icon {
        color: rgb(0, 0, 0, 0);
        color: transparent;
      }
      .label {
        position: absolute;
      }
    label: CH
  - type: button
    name: volume_down
    tap_action:
      action: key
      key: VOLUME_DOWN
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    hold_action:
      action: repeat
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:minus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: menu
    tap_action:
      action: key
      key: MENU
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:checkbox-blank-circle-outline
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: |
      .icon {
        color: rgb(0, 0, 0, 0);
        color: transparent;
      }
      .label {
        position: absolute;
      }
    label: MENU
  - type: button
    name: channel_down
    tap_action:
      action: key
      key: CHANNEL_DOWN
      platform: ANDROID TV
      media_player_id: media_player.living_room_tv
      remote_id: remote.living_room_tv
      target:
        entity_id: remote.living_room_tv
    icon: mdi:minus
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
    styles: ''
  - type: button
    name: apps
    icon: mdi:apps
    styles: |-
      :host {
        --icon-color: rgb(0, 0, 0);
        background: rgb(255, 255, 255);
        border-radius: 50px;
      }
    autofill_entity_id: true
    value_attribute: state
    haptics: true
    entity_id: remote.living_room_tv
styles: |-
  #row-3 {
    justify-content: center;
  }
  #row-4 {
    justify-content: center;
  }
  #row-5 {
    justify-content: center;
  }
  #column-2, #column-4 {
    background-color: var(--lovelace-background);
    border-radius: 100px;
    margin: 10%;
  }
layout_options:
  grid_columns: 4
  grid_rows: auto

[wwwescape]

Awesome! This works great. Thank you!