Как разделить содержимое фрагмента viewpager с помощью TabLayout?

#android-viewpager #androidx #android-tablayout #android-viewpager2

Вопрос:

Кто-нибудь знает, как создать такой макет в Android? Он должен использовать ViewPager2 и TabLayout. Как вы видите на изображении — макет вкладки (с желтыми точками) должен визуально отделять заголовок от части содержимого. Когда вы проводите пальцем влево-вправо или нажимаете на стрелки — это должно изменить содержимое как на странице просмотра, так и в верхнем заголовке, и положение точки также должно быть изменено.

введите описание изображения здесь

В настоящее время я создал еще один «классический» вариант, где макет вкладок занимает первое место среди всего контента. Но дизайнеру нужен первый вариант.

введите описание изображения здесь

Кто-нибудь может помочь, пожалуйста?