Создание похожей навигационной цепочки индикатора прогресса ⇐ Android

[Anonymous]

Я пытаюсь создать составной объект, имитирующий хлебные крошки. Что-то вроде этого. Текущий шаг будет отмечен двойным кругом розового цвета, посещенный шаг будет отмечен обычной розовой точкой, а не посещенный — серой точкой. Логика линии соответствует изображению.

Я экспериментировал с Canvas, но никогда не получался правильно. А еще я не могу отцентрировать "Компанию"...





Это мой код. Я думаю, что переусердствовал, поэтому посоветуйте, как провести рефакторинг с помощью Canvas. Я уверен, что это можно сделать и меньшим количеством строк.
@Композитный веселая платформаBreadCrumb( модификатор: Модификатор = Модификатор, текущийШаг: Int, ) { Столбец( модификатор = модификатор .fillMaxWidth(), ) { Ряд( модификатор = модификатор .fillMaxWidth(), HorizontalArrangement = Arrangement.SpaceBetween ) { ПрогрессШаг( текст = "О тебе", isSelected = текущийШаг == 1 ) ПрогрессШаг( текст = "Компания", isSelected = текущийШаг == 2 ) ПрогрессШаг( текст = "Активность", isSelected = текущийШаг == 3 ) } Spacer(модификатор = Modifier.height(4.dp)) Коробка( модификатор = Модификатор .fillMaxWidth(), contentAlignment = Alignment.CenterStart ) { Ряд( модификатор = модификатор .fillMaxWidth(), HorizontalArrangement = Arrangement.SpaceBetween, вертикальноеВыравнивание = Выравнивание.ЦентрВертикально ) { повтор(3) { индекс -> если (индекс