SeekBar for Android starts with customization

SeekBar for Android starts with customization

• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

A list,

SeekBar, which means drag bar, is a subclass of ProgressBar.

In our Android development is also very widely used. Such as music playback, volume bar, play progress bar, and so on. Android only provides horizontal, default styles, but you can customize them to your own needs.

Common attributes and methods

SeekBar descends from ProgressBar, and the XML attributes and methods supported by ProgressBar apply to seekBar, Here are the most common properties and methods for using progressBars:

getMax() GetProgress (): returns progress
getsecondaryProgress() // Return to level 2
incrementProgressBy(int diff) // Specify the progress to be added
isIndeterminate() // Indicates whether the progress bar is in indeterminate mode
setIndeterminate(boolean indeterminate) // Set indeterminate mode

Copy the code

Three, simple use

Implement a simple Seekbar listening event to change the transparency of the picture

1. Writing layout code

Since the transparency of the image is divided into 256 degrees (0-255), we set the Max attribute to 255 and the initial progress attribute to 255 to make the photo opaque and visible.

      
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=Drag bar
        android:layout_gravity="center"
        android:layout_marginTop="50dp"/>

    <ImageView
        android:id="@+id/iv_zhuyin"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/zhuyin"/>
        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:splitTrack="false"
            android:max="255"
            android:progress="255"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:thumb="@drawable/seekbar01"/>

        <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:text="Current transparency: 255/255"/>


</LinearLayout>
Copy the code

2. Write Java code in MainActivity

OnSeekBarChangeListener() can add a listener event for the drag bar, which overwrites three methods.

public class MainActivity extends AppCompatActivity {

    private SeekBar mSeekBar;
    private TextView mTextView;
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mSeekBar=findViewById(R.id.seek_bar);
        mTextView=findViewById(R.id.tv_progress);
        mImageView=findViewById(R.id.iv_zhuyin);

        mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override  // When the slider progress changes, the code under this method is executed
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                mImageView.setAlpha(i);// Set the current transparency
                mTextView.setText("Current transparency:" +i+"/ 255");
            }

            @Override  // When the slider starts to slide, the code under this method is executed
            public void onStartTrackingTouch(SeekBar seekBar) {

                Toast.makeText(MainActivity.this."My seekbar started to slide.",Toast.LENGTH_SHORT).show();
            }

            @Override   // When the slider ends, the code under this method is executed
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this."I'm done seekbar swiping.",Toast.LENGTH_SHORT).show(); }}); }}Copy the code

The final effect:

Customize SeekBar

Sometimes the style of the system is not good enough to meet the development of aesthetic requirements, in this case, you need to customize the style, using XML resource files for style editing. Finally, the progressDrawable property is referenced in the layout file. If you want to implement very complex styles, you need to use the View’s customization, you can learn to learn, custom View can implement almost any style you want to.

I’m going to put a couple here that I think are pretty good.The XML in the figure above is:

      
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="60dp" />

            <gradient
                android:angle="0"
                android:centerColor="#F39801"
                android:centerY="0.20"
                android:endColor="#F39801"
                android:startColor="#F39801" />
        </shape>
    </item>
</layer-list>
Copy the code

The XML in the figure above is:

      
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#22DDDD" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#3CC4C4" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#70CC33" />
            </shape>
        </clip>
    </item>
</layer-list>
Copy the code

The XML in the figure above is:

      
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="5dp"/>
        </shape>
        <! -- Background color -->
        <color android:color="#CCCCCC"/>
    </item>

    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <shape>
                <corners android:radius="5dp"/>
                <! -- Start color, middle color, end color -->
                <gradient
                    android:startColor="#00FF00"
                    android:centerColor="#FFFF00"
                    android:endColor="#FF0000"/>
            </shape>
        </clip>
    </item>
</layer-list>
Copy the code

throughthumbYou can customize your favorite ICONS by referencing pictures.

Here’s a good example of a vector icon site. Iconfont – Alibaba vector icon

That’s all for today’s sharing. Come on. Spongebob!