Have different background colors before and after the thumb drawable

[manuelmh]

Hi,

Thanks a lot for sharing the library, it is working great.

What I would like to do is to have two different background colors, one for the part of the switch button before the thumb drawable and one for the part after the thumb drawable.

So far, I just managed to change the background color of the whole button depending on wether it is selected or not. But what I want is, for instance, if the thumb drawable is at the middle of the button, the left side of it to be red and the right side to be blue.

Thanks in advance.

[kyleduo]

I understand your demand but it is a pity that SwitchButton do not support this effect by now.
Since this effect is just a little different from the current one, you can achieve that by changing some code in onDraw() method to change the drawing position and size of background.
I’m glad to add this feature but I need to consider side effects before I start.
I’ll keep this issue and comment the progress here.

[manuelmh]

Ok, thanks a lot for your fast response. I will take a look at onDraw() method.

Cheers.

[kyleduo]

I've tested your feature by changing this part in onDraw

public void onDraw(Canvas canvas) {
  // ...
  if (mIsBackUseDrawable) {
    // ...
  } else {
    // left part
    mTempBackPath.reset();
    mTempBackPath.moveTo(mBackRectF.left + mBackRadius, mBackRectF.top);
    mTempBackRect.set(mBackRectF.left, mBackRectF.top, mBackRectF.left + mBackRadius * 2, mBackRectF.top + mBackRadius * 2);
    mTempBackPath.arcTo(mTempBackRect, -90, -90);
    mTempBackPath.lineTo(mBackRectF.left, Math.max(0, mBackRectF.bottom - mBackRadius));
    mTempBackRect.set(mBackRectF.left, mBackRectF.bottom - mBackRadius * 2, mBackRectF.left + mBackRadius * 2, mBackRectF.bottom);
    mTempBackPath.arcTo(mTempBackRect, -180, -90);
    mTempBackPath.lineTo(mSafeRectF.left + mProgress * mSafeRectF.width() + mThumbRectF.width() / 2, mBackRectF.bottom);
    mTempBackPath.rLineTo(0, -mBackRectF.height());
    mTempBackPath.close();

    mPaint.setColor(belowColor);
    canvas.drawPath(mTempBackPath, mPaint);

    // right part
    mTempBackPath.reset();
    mTempBackPath.moveTo(mBackRectF.right - mBackRadius, mBackRectF.top);
    mTempBackRect.set(mBackRectF.right - mBackRadius * 2, mBackRectF.top, mBackRectF.right, mBackRectF.top + mBackRadius * 2);
    mTempBackPath.arcTo(mTempBackRect, -90, 90);
    mTempBackPath.lineTo(mBackRectF.right, Math.max(0, mBackRectF.bottom - mBackRadius));
    mTempBackRect.set(mBackRectF.right - mBackRadius * 2, mBackRectF.bottom - mBackRadius * 2, mBackRectF.right, mBackRectF.bottom);
    mTempBackPath.arcTo(mTempBackRect, 0, 90);
    mTempBackPath.lineTo(mSafeRectF.left + mProgress * mSafeRectF.width() + mThumbRectF.width() / 2, mBackRectF.bottom);
    mTempBackPath.rLineTo(0, -mBackRectF.height());
    mTempBackPath.close();

    mPaint.setColor(aboveColor);
    canvas.drawPath(mTempBackPath, mPaint);
  }
  // ...
}

This effect is ok but it seems has a lot of precondition, like zero thumbMargin and a larger thumbRangeRatio. I've not figured out a proper way to support this feature by now, so you can just change the code and use it.

[manuelmh]

Thanks a lot for the effort, I will give it a try.

Cheers