Android：如何在移动seekbar时更改seekbar拇指的尺寸

Question

Seekbar thumb has to have two circles . Outer circle's dimension has to be fixed while inner circle dimension will grow as thumb is moved along the seek bar.

Position 1:

Position 2 :

I have created a drawable to be used as thumb :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/gather_seek_bar_thumb_outer_ring"
        android:height="30dp"
          android:width="30dp"
          android:gravity="center">
        <shape
            android:shape="oval">
            <stroke
                android:width="1dp"/>
        </shape>
    </item>

    <item android:id="@+id/gather_seek_bar_thumb_inner_ring"
          android:width="10dp"
          android:height="10dp"
          android:gravity="center">
        <shape android:shape="oval">
            <solid
                android:color="#48b3ff"/>
        </shape>
    </item>
</layer-list>

Then on seekbar i am doing this

mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
            LayerDrawable drawable = (LayerDrawable) mSeekBar.getThumb();
            Drawable innerDrawable = drawable.findDrawableByLayerId(R.id.gather_seek_bar_thumb_inner_ring);
            Rect innerRect = innerDrawable.getBounds();
            Drawable outerDrawable = drawable.findDrawableByLayerId(R.id.gather_seek_bar_thumb_outer_ring);
            Rect outerRect = outerDrawable.getBounds();
            int left = innerRect.left > outerRect.left ? innerRect.left - 4 : outerRect.left;
            int right = innerRect.right < outerRect.right ? innerRect.right + 4 : outerRect.right;
            int top = innerRect.top > outerRect.top ? innerRect.top - 4 : outerRect.top;
            int bottom = innerRect.bottom < outerRect.bottom ? innerRect.bottom + 4 : outerRect.bottom;
            innerDrawable.setBounds(left, top, right, bottom);
        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    });

But it doesn't change the size of inner circle. Probably because inner-circle is already drawn . Can someone suggest any solution ?

Answer 1

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/seek_bar_thumb_outer_ring"
        android:gravity="center">
        <shape
            android:shape="oval">
            <stroke
                android:width="1dp"/>
            <size android:height="30dp"
                  android:width="30dp"/>
        </shape>

    </item>
    <item android:id="@+id/seek_bar_thumb_inner_ring">
        <scale android:drawable="@drawable/seekbarinnercircle"
               android:scaleHeight="100%"
               android:scaleWidth="100%"
               android:scaleGravity="center_vertical|center_horizontal">
        </scale>
    </item>
</layer-list>

Solution to this problem is to use scale Drawable .

 LayerDrawable drawable = (LayerDrawable) mSeekBar.getThumb();
    ScaleDrawable innerDrawable = (ScaleDrawable) drawable.findDrawableByLayerId(R.id.seek_bar_thumb_inner_ring);
    innerDrawable.setLevel(5000);

On progress listener ,

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            LayerDrawable drawable = (LayerDrawable) mSeekBar.getThumb();
            ScaleDrawable innerDrawable = (ScaleDrawable)drawable.findDrawableByLayerId(R.id.seek_bar_thumb_inner_ring);
            innerDrawable.setLevel(progress * 100);

        }