Development of Android Seekbar custom style

Android SeekBar custom style

I haven’t written a blog for a long time. Recently, I needed to use a custom sliding progress bar in my project, and then I found that I was not familiar with it. I’ll record it here. OK, let’s get back to the topic. The following renderings: The plus and minus signs on the left and right sides were added by me

. To draw a custom progress bar icon, first add the style seekbar_style.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 背景颜色 -->
    <item android:id="@android:id/background">
        <shape>
            <!-- 圆角程度 和 背景颜色-->
            <corners android:radius="10dp" />
            <solid android:color="@color/gray" />
        </shape>
    </item>
    <!-- 进度颜色 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <!-- 圆角程度 和 进度条颜色 -->
                <corners android:radius="10dp" />
                <solid android:color="@color/theme_color" />
            </shape>
        </clip>
    </item>

</layer-list>

The background color refers to the background color that the progress bar does not slide to. There is no need to explain the progress color. Hahaha, OK. Then my layout is as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".eleven.ElevenActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp">

        <!--        减号图标-->
        <ImageView
            android:id="@+id/iv_decrease"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_centerVertical="true"
            android:src="@mipmap/seekbar_decrease"></ImageView>

        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_toLeftOf="@+id/iv_add"
            android:layout_toRightOf="@+id/iv_decrease"
            android:max="100"
            android:maxHeight="10dp"
            android:minHeight="10dp"
            android:progress="1"
            android:progressDrawable="@drawable/seekbar_style"
            android:splitTrack="false"
            android:thumb="@drawable/bg_shape_cicircle_20dp"></SeekBar>

        <!--        加号图标-->
        <ImageView
            android:id="@+id/iv_add"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@mipmap/seekbar_add"></ImageView>

    </RelativeLayout>

</LinearLayout>

This will explain what's inside:
the two ImageViews are buttons for adding and subtracting progress, no need to explain, and then there are the properties of the SeekBar:
android:max="100" is the maximum value of the progress bar, android:progress="1" is the current The set progress values
​​android:maxHeight="10dp" and android:minHeight="10dp" represent the thickness of the progress bar,
android:progressDrawable="@drawable/seekbar_style" represents the progress bar's own style. Note: does not include sliding The circular block,
android:thumb="@drawable/bg_shape_cicircle_20dp" represents the circular block when sliding the progress bar, and a style is written as follows:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <gradient
        android:endColor="@color/theme_color"
        android:startColor="@color/theme_color"></gradient>

    <size
        android:width="20dp"
        android:height="20dp"></size>
    
</shape>

I almost forgot that there is this attribute:
android:splitTrack="false". You can find it by comparing the following two pictures: if you


look carefully, you will find a white background around the sliding circle. Yes, I was also very distressed at the time and couldn't find the reason. This is the attribute. Just add this attribute and set it to false.

Finally paste the code:

public class ElevenActivity extends AppCompatActivity {
    
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_eleven);

        SeekBar seekBar=findViewById(R.id.seekbar);
        ImageView iv_decrease=findViewById(R.id.iv_decrease);
        ImageView iv_add=findViewById(R.id.iv_add);

//        seekBar.getThumb().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置滑块颜色、样式
//
//        seekBar.getProgressDrawable().setColorFilter(Color.BLUE, PorterDuff.Mode.SRC_ATOP);//设置进度条颜色、样式


        iv_decrease.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                //减少
                seekBar.setProgress(seekBar.getProgress()-10);
            }
        });

        iv_add.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                //增加
                seekBar.setProgress(seekBar.getProgress()+10);

            }
        });

    }

}

ok This is how I write it. You can also search for other methods. I hope it can help you.