CODEWITHSUNDEEP
androidandroid-jetpack-composewear-os
Neglected Sanity
Neglected Sanity

Reputation: 1934

Column layout in an Tile in Android Watch

I finally got my tile working for my Android Watch project, but I can't get the layout to work properly. I am trying to have text (dynamically will change based on state and a freshness timer) and a button. I would've thought this would be a very easy thing to do, but for some reason any time I put content inside of a Column or anything else, nothing shows up in the preview. I don't understand what is going wrong...

class TimerTileRenderer(context: Context): SingleTileLayoutRenderer<TimerTileState, Boolean>(context) {

  //... code for produce resources for images and stuff omitted.

  override fun renderTile(
    state: TimerTileState,
    deviceParameters: DeviceParametersBuilders.DeviceParameters
  ): LayoutElementBuilders.LayoutElement {
    return timerTileLayout(
      context,
      deviceParameters,
      state,
      emptyClick
    )
  }
}

private fun timerTileLayout(
  context: Context,
  deviceParameters: DeviceParametersBuilders.DeviceParameters,
  state: TimerTileState,
  buttonClickable: ModifiersBuilders.Clickable
) = PrimaryLayout.Builder(deviceParameters)
  .setContent(
    Column.Builder()
      .setHeight(expand())
      .setWidth(expand())
      .addContent(
        Text.Builder().setText("Just a TEST").build()
      )
      .build()
  )
  .build()

Using the code above I only see a black screen. I've added a .setPrimaryChipContent call after the setContent call just to make sure it's working and I do see the chip at the bottom of the screen, but no text. I've even tried manually setting the fontStyle of the text to white and still no text.

However, if I remove the Column and just use Text in there, I see the text...

private fun timerTileLayout(
  context: Context,
  deviceParameters: DeviceParameters,
  state: TimerTileState,
  buttonClickable: ModifiersBuilders.Clickable
) = PrimaryLayout.Builder(deviceParameters)
  .setContent(
    Text.Builder().setText("Just a TEST").build()
  )
  .setPrimaryChipContent(...)
  .build()

Using that code my text shows up. My end goal is to have text, then a button below it, but every time I try to use a Column nothing shows up on the screen, just a black screen. Is there some special way to use Column, or Box, or something to get more than one element on the screen?

I know there are things like MultiButtonLayout, but I don't want that style, just some text and a button. What can I try next?

Upvotes: 2

Views: 254

Answers (1)

Neglected Sanity
Neglected Sanity

Reputation: 1934

OK, so I figured it out, it has something to do with setting the width and height to expand. For whatever reason after I removed those 2 things everything worked perfectly. So, just in case someone else runs into this, here's the solution...

private fun timerTileLayout(
  context: Context,
  deviceParameters: DeviceParametersBuilders.DeviceParameters,
  state: TimerTileState,
  buttonClickable: ModifiersBuilders.Clickable
) = PrimaryLayout.Builder(deviceParameters)
  .setContent(
    Column.Builder()
      .addContent(
        Text.Builder().setText("Just a TEST").build()
      )
      .build()
  )
  .build()

Upvotes: 3

Related Questions