How to rotate android switch widget by 90°

Question

I'm trying to rotate the backported switch by BoD ( https://github.com/BoD/android-switch-backport ) by 90°. I played with the class Switch, and I finally managed to make it look OK ( http://img706.imageshack.us/img706/8662/oslz.jpg ). However, it doesn't work properly. If i try to toggle the button, it gets painted somewhere below the view, so I see just a part of it.

I edited methods onMeasure() and onDraw() in the original Switch by BoD:

public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);


    if (mOnLayout == null) {
        mOnLayout = makeLayout(mTextOn);
    }
    if (mOffLayout == null) {
        mOffLayout = makeLayout(mTextOff);
    }

    mTrackDrawable.getPadding(mTempRect);
    final int maxTextWidth = Math.max(mOnLayout.getWidth(), mOffLayout.getWidth());
    final int switchWidth = Math.max(mSwitchMinWidth, maxTextWidth * 2 + mThumbTextPadding * 4 +  
    mTempRect.left+ mTempRect.right);              
    final int switchHeight = mTrackDrawable.getIntrinsicHeight();

    mThumbWidth = maxTextWidth + mThumbTextPadding * 2;

    switch (widthMode) {
        case MeasureSpec.AT_MOST:
            widthSize = Math.min(widthSize, switchWidth);
            break;

        case MeasureSpec.UNSPECIFIED:
            widthSize = switchWidth;
            break;

        case MeasureSpec.EXACTLY:
            // Just use what we were given
            break;
    }

    switch (heightMode) {
        case MeasureSpec.AT_MOST:
            heightSize = Math.min(heightSize, switchHeight);
            break;

        case MeasureSpec.UNSPECIFIED:
            heightSize = switchHeight;
            break;

        case MeasureSpec.EXACTLY:
            // Just use what we were given
            break;
    }

Here comes the edited code - I replaced this block:

    mSwitchWidth = switchWidth;
    mSwitchHeight = switchHeight

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    final int measuredHeight = getMeasuredHeight();
    if (measuredHeight < switchHeight) {
    setMeasuredDimension(getMeasuredWidth(), switchHeight);
    }
    }

with this:

    mSwitchWidth = switchHeight;
    mSwitchHeight = switchWidth;

    super.onMeasure(heightMeasureSpec, widthMeasureSpec);
    final int measuredWidth = getMeasuredWidth();
    if (measuredWidth < switchWidth) {
        //setMeasuredDimension(getMeasuredWidthAndState(), switchHeight);
        setMeasuredDimension(switchHeight, switchWidth);
    }    
    }   

And I added these 2 lines to the onDraw() method:

    canvas.translate(getWidth(), 0);
    canvas.rotate(90);

I uploaded the original code of Switch by BoD here: http:// pastebin.com/8CU9ybET I'm also wondering, the mSwitchWidth and mSwitchHeight are used in onLayout() method, so maybe I should tweak it somehow too... Thank you for any ideas ppl ;)

Answer 1

I had a similar issue. I resolved it as follows;

First, place a file in /res/anim/ called rotation.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate
 xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="0" android:fillAfter="true">
</rotate>

Then, in your Activity's onCreate, do

    @Override
      public void onCreate(Bundle icicle) {
      super.onCreate(icicle);

     setContentView(R.layout.myscreen);

     Animation rotateAnim = AnimationUtils.loadAnimation(this, R.anim.rotation);
     LayoutAnimationController animController = new LayoutAnimationController(rotateAnim, 0);
     FrameLayout layout = (FrameLayout)findViewById(R.id.MyScreen_ContentLayout);
     layout.setLayoutAnimation(animController);
 }

Hope that helps.

Answer 2

After 4 years someone might find this answer useful. the whole heck of rotation of a View can be handled by adding a just a single line to xml file of that view like:

<View
    android:rotation="90"
    ... />