<HorizontalScrollView
    android:id="@+id/buttons"
    android:layout_width="match_parent"
    android:background="@color/design_default_color_background"
    android:layout_alignParentStart="true"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_gravity="center_vertical"
        android:padding="4dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/back"
            style="@style/PopupButton"
            app:icon="@drawable/baseline_arrow_back_48"
            app:iconSize="48dp"
            app:iconGravity="textStart"
            app:iconTint="@color/black"
            android:layout_marginHorizontal="8dp"
            android:padding="0dp"
            app:backgroundTint="@android:color/transparent"
            />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/openFile"
            style="@style/PopupButton"
            app:icon="@drawable/baseline_file_open_24"
            android:text="Open File" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/countIn"
            style="@style/PopupButton"
            android:checkable="true"
            app:icon="@drawable/baseline_hourglass_empty_24"
            android:text="Count-In" />

        <com.google.android.material.button.MaterialButton
            style="@style/PopupButton"
            android:checkable="true"
            android:id="@+id/metronome"
            app:icon="@drawable/baseline_edit_square_24"
            android:text="Metronome"/>

        <com.google.android.material.button.MaterialButton
            style="@style/PopupButton"
            android:checkable="true"
            android:id="@+id/looping"
            app:icon="@drawable/baseline_repeat_24"
            android:text="Looping" />

        <com.google.android.material.button.MaterialButton
            style="@style/PopupButton"
            android:id="@+id/zoom"
            app:icon="@drawable/baseline_zoom_in_24"
            android:text="Zoom" />

        <com.google.android.material.button.MaterialButton
            style="@style/PopupButton"
            android:id="@+id/layout"
            app:icon="@drawable/baseline_view_quilt_24"
            android:text="Layout" />

    </LinearLayout>
</HorizontalScrollView>

<ListView
    android:id="@+id/trackList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/buttons"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="-12dp"
    android:layout_marginTop="-4dp"
    android:layout_marginBottom="3dp"
    android:background="@color/design_default_color_background">

</ListView>

<style name="PopupButton" parent="Widget.Material3.Button">
    <item name="iconPadding">0dp</item>
    <item name="cornerRadius">0dp</item>
    <item name="iconTint">#FF436d9d</item>
    <item name="iconGravity">top</item>
    <item name="iconSize">24dp</item>
    <item name="backgroundTint">#dedede</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">#000</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_gravity">center_vertical</item>
    <item name="android:layout_marginEnd">4dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:paddingHorizontal">8dp</item>
</style>

private lateinit var mAlphaTabView: AlphaTabView
private lateinit var mTrackName: TextView
private lateinit var mSongName: TextView

private lateinit var mViewModel: MainViewModel

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge()
    setContentView(R.layout.activity_main)
    ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
        val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
        insets
    }

    mAlphaTabView = findViewById(R.id.alphatab)
    mTrackName = findViewById(R.id.trackName)
    mSongName = findViewById(R.id.songName)
    findViewById<View>(R.id.info).setOnClickListener {
        val popup = ControlsPopupWindow(
            this, mViewModel,
        ) {
            mOpenFile.launch(arrayOf("*/*"))
        }
        popup.width = ViewGroup.LayoutParams.MATCH_PARENT
        popup.height = ViewGroup.LayoutParams.MATCH_PARENT
        popup.showAtLocation(mAlphaTabView, Gravity.CENTER, 0, 0)
    }

    mViewModel = ViewModelProvider(this)[MainViewModel::class.java]
    mViewModel.settings.observe(this) {
        mAlphaTabView.settings = it
    }
    mViewModel.tracks.observe(this) {
        mAlphaTabView.tracks = it
        val first = it?.firstOrNull()
        if (first != null) {
            mTrackName.text = first.name
            mSongName.text = "${first.score.title} - ${first.score.artist}"
        }
    }
    mViewModel.countIn.observe(this) {
        mAlphaTabView.api.countInVolume = if (it) 1.0 else 0.0
    }
    mViewModel.metronome.observe(this) {
        mAlphaTabView.api.metronomeVolume = if (it) 1.0 else 0.0
    }
    mViewModel.looping.observe(this) {
        mAlphaTabView.api.isLooping = it
    }
    mViewModel.zoomLevel.observe(this) {
        mAlphaTabView.settings.display.scale = it / 100.0
        mAlphaTabView.api.updateSettings()
        mAlphaTabView.renderTracks()
    }
    mViewModel.layout.observe(this) {
        mAlphaTabView.settings.display.layoutMode = it
        mAlphaTabView.api.updateSettings()
        mAlphaTabView.renderTracks()
    }
}

private val mOpenFile = registerForActivityResult(ActivityResultContracts.OpenDocument()) {
    val uri = it ?: return@registerForActivityResult
    val score: Score
    try {
        val fileData = readFileData(uri)
        score = ScoreLoader.loadScoreFromBytes(fileData, mAlphaTabView.settings)
        Log.i("AlphaTab", "File loaded: ${score.title}")
    } catch (e: Exception) {
        Log.e("AlphaTab", "Failed to load file: $e, ${e.stackTraceToString()}")
        Toast.makeText(this, "Failed to load file: ${e.message}", Toast.LENGTH_LONG).show()
        return@registerForActivityResult
    }

    try {
        mViewModel.score.value = score
        mViewModel.tracks.value = arrayListOf(score.tracks[0])
    } catch (e: Exception) {
        Log.e("AlphaTab", "Failed to render file: $e, ${e.stackTraceToString()}")
        Toast.makeText(this, "Failed to render file: ${e.message}", Toast.LENGTH_LONG).show()
    }
}

private fun readFileData(uri: Uri): Uint8Array {
    val inputStream = contentResolver.openInputStream(uri)
    inputStream.use {
        ByteArrayOutputStream().use {
            inputStream!!.copyTo(it)
            return Uint8Array(it.toByteArray().asUByteArray())
        }
    }
}

</TabItem>
<TabItem value="MainViewModel">
```kotlin
package net.alphatab.tutorial.android

import alphaTab.LayoutMode
import alphaTab.Settings
import alphaTab.model.Score
import alphaTab.model.Track
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import kotlin.contracts.ExperimentalContracts

@ExperimentalUnsignedTypes
@ExperimentalContracts
class MainViewModel  : ViewModel() {
    val score = MutableLiveData<Score?>()
    val tracks = MutableLiveData<List<Track>?>()
    val countIn = MutableLiveData(false)
    val metronome = MutableLiveData(false)
    val looping = MutableLiveData(false)
    val zoomLevel = MutableLiveData(100)
    val layout = MutableLiveData(LayoutMode.Page)
    val settings = MutableLiveData<Settings>().apply {
        value = Settings().apply {
            this.player.enableCursor = true
            this.player.enablePlayer = true
            this.player.enableUserInteraction = true
            this.display.barCountPerPartial = 4.0
            this.display.resources.barNumberFont
        }
    }
}

init {
    val view = LayoutInflater.from(context).inflate(R.layout.popup_controls, null)

    mOpenButton = view.findViewById(R.id.openFile)
    mOpenButton.setOnClickListener {
        onOpenFile()
        dismiss()
    }

    mTrackList = view.findViewById(R.id.trackList)
    mTrackList.adapter =
        TrackListAdapter(context, mainViewModel.score.value?.tracks?.toList() ?: emptyList())
    mTrackList.setOnItemClickListener { _, _, position, _ ->
        mainViewModel.tracks.value =
            mutableListOf((mTrackList.adapter as TrackListAdapter).getItem(position)!!)
        dismiss()
    }

    view.findViewById<MaterialButton>(R.id.back).setOnClickListener {
        dismiss()
    }

    initToggle(view.findViewById(R.id.countIn), mainViewModel.countIn.value ?: false) {
        mainViewModel.countIn.value = it
    }

    initToggle(view.findViewById(R.id.metronome), mainViewModel.metronome.value ?: false) {
        mainViewModel.metronome.value = it
    }

    initToggle(view.findViewById(R.id.looping), mainViewModel.looping.value ?: false) {
        mainViewModel.looping.value = it
    }

    val zoom = view.findViewById<MaterialButton>(R.id.zoom)
    @SuppressLint("SetTextI18n")
    zoom.text = "${mainViewModel.zoomLevel.value}%"
    zoom.setOnClickListener {
        PopupMenu(context, zoom).apply {
            setOnMenuItemClickListener {
                val zoomLevel = it.title!!.trim('%').toString().toInt()
                mainViewModel.zoomLevel.value = zoomLevel
                this@ControlsPopupWindow.dismiss()
                true
            }
            inflate(R.menu.zoom)
            show()

        }
    }

    val layout = view.findViewById<MaterialButton>(R.id.layout)
    @SuppressLint("SetTextI18n")
    layout.text = "${mainViewModel.layout.value!!.name}"
    layout.setOnClickListener {
        PopupMenu(context, layout).apply {
            setOnMenuItemClickListener {
                mainViewModel.layout.value = when(it.title) {
                    "Page" -> LayoutMode.Page
                    "Horizontal" -> LayoutMode.Horizontal
                    else -> throw IllegalStateException("Unknown Layout")
                }
                this@ControlsPopupWindow.dismiss()
                true
            }
            inflate(R.menu.layout)
            show()
        }
    }

    contentView = view
}

private fun initToggle(
    button: MaterialButton,
    initialState: Boolean,
    onChange: (newValue: Boolean) -> Unit
) {
    updateToggleColors(button, initialState)
    button.addOnCheckedChangeListener { _, isChecked ->
        updateToggleColors(button, isChecked)
        onChange(isChecked)
    }
}

private fun updateToggleColors(buttonView: MaterialButton, isChecked: Boolean) {
    val textColor = if (isChecked) R.color.checkedTextColor else R.color.uncheckedTextColor
    val iconColor = if (isChecked) R.color.checkedIconColor else R.color.uncheckedIconColor

    val textColorList = ColorStateList.valueOf(ContextCompat.getColor(context, textColor))
    val iconColorList = ColorStateList.valueOf(ContextCompat.getColor(context, iconColor))

    buttonView.iconTint = iconColorList
    buttonView.setTextColor(textColorList)
}


class TrackListAdapter(context: Context, tracks: List<Track>) :
    ArrayAdapter<Track>(context, android.R.layout.simple_list_item_1, tracks) {

    private val mInflater: LayoutInflater = LayoutInflater.from(context)

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        val view =
            convertView ?: mInflater.inflate(android.R.layout.simple_list_item_1, parent, false)

        if (view !is TextView) {
            throw IllegalStateException("Expected simple_list_item_1 to be a TextView")
        }

        val item = getItem(position)
        view.text = item!!.name
        return view
    }
}

</TabItem>
</Tabs>