Basic structure

What are we building?

We are deconstructing the default setup screen.

At the end of this group of docs, we should have the following screen built using low level components.

Let's put a basic skeleton and the initial boilerplate code.

Barebone xml needed to redner ui for self name and a button to join the meeting will look as follow:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
  ....
  >

  <com.cloudflare.realtimekit.ui.view.RtkLabel
    android:id="@+id/rtkLabelView"
    android:layout_width="300dp"
    android:layout_height="25dp"
    android:text="Join in as %s"
    android:textColor="#fff"
    android:textSize="16sp"
  />

  <com.cloudflare.realtimekit.ui.view.RtkJoinButton
    android:contentDescription="Button for joining meeting"
    android:id="@+id/rtkjoinbutton_setup_screen"
    android:layout_width="300dp"
    android:layout_height="wrap_content"
  />

</androidx.constraintlayout.widget.ConstraintLayout>

Now inside your setup_fragment.kt file you'll need to bind xml elements with kotlin objects, to do that:

private lateinit var joinButton: RtkJoinButton
private lateinit var selfNameRtkLabel: RtkLabel

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  joinButton.activate(meeting)
  selfNameRtkLabel.text = meeting.localUser.name
}

This should give you output as following