How can I create a filter bar like on YouTube?

user_15351040 0
Viewed 51

enter image description here

I would like to know how I can create a bar like the one in the image. I guess it's with a horizontal scrollview, but I don't know what elements are the "buttons", also I tried with any buttons, but when pressing them the scrollview doesn't move towards them.

android-actionbar youtube android
1 Answers

It is a normal button and chip.

https://material.io/components/chips/android

This is a simple example

 <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            app:title="Example App"/>

        <HorizontalScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:orientation="horizontal" >


                <com.google.android.material.button.MaterialButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Explore"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="All"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip6"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Mixes"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip8"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Computer"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip4"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Todos"/>

                <com.google.android.material.chip.Chip
                    android:id="@+id/chip7"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:text="Other"/>
            </LinearLayout>
        </HorizontalScrollView>


    </com.google.android.material.appbar.AppBarLayout>
user_179355430
Related