1

I would like to scale a rectangle drawable downwards, then rotate it so once it is clipped by the view it resembles a trapezoid with the left side slanted: enter image description here

The rotation is working fine:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
    <rotate
        android:fromDegrees="-19.5"
        android:toDegrees="-19.5"
        android:pivotX="0%"
        android:pivotY="0%"
         >
        <shape
            android:shape="rectangle" >                
            <solid
                android:color="@android:color/black" />
        </shape>
    </rotate>
</item>
</layer-list>

However to prevent a big gap where the rectangle has rotated away from the bottom of the view I want to scale vertically by 200% before the rotation happens. I was hoping that I could do something like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
    <scale 
        android:scaleWidth="100%"
        android:scaleHeight="200%"
        android:scaleGravity="top"
        >
        <rotate
            android:fromDegrees="-19.5"
            android:toDegrees="-19.5"
            android:pivotX="0%"
            android:pivotY="0%"
             >
            <shape
                android:shape="rectangle" >                
                <solid
                    android:color="@android:color/black" />
            </shape>
        </rotate>
    </scale>
</item>
</layer-list>

but this just causes the rectangle to disappear. Does anyone know how best to achieve this?

user3265561
  • 812
  • 7
  • 22
  • Element "scale" requires attribute "drawable" which is to be scaled. (That is why nothing is shown.) See: http://idunnolol.com/android/drawables.html#scale – Jack Miller Dec 12 '14 at 08:28
  • did you solve?I have same issue http://stackoverflow.com/questions/29094070/how-to-create-parallogram-background –  Mar 17 '15 at 11:09
  • I did not solve using only XML, I used the solution in the answer below and created a custom drawable. – user3265561 Mar 18 '15 at 10:07

1 Answers1

0

No really a true answer but I solution that I am using now is to create a custom Drawable that draws the shape:

public void setColor(int color) {
    _color = color;
}

@Override
public void draw(Canvas canvas) {
    int width = this.getBounds().width();
    int height = this.getBounds().height();
    double angle = 19.5 * (Math.PI / 180.0);
    double offsetX = height * Math.tan(angle);

    Path path = new Path();
    Paint paint = new Paint();
    path.moveTo(0, 0);
    path.lineTo(width, 0);
    path.lineTo(width, height);
    path.lineTo((int)offsetX, height);
    path.close();

    paint.setColor(_color);
    paint.setStyle(Paint.Style.FILL);
    canvas.drawPath(path, paint);
}

This does the job for now, although it is frustrating that I cannot find a way to do this in the xml.

user3265561
  • 812
  • 7
  • 22