CODEWITHSUNDEEP
androidandroid-layoutandroid-viewandroid-shape
Abdulla Shoshaa
Abdulla Shoshaa

Reputation: 101

drawing sloped rectangle upper edge shape as in yahoo digest news app using xml android

am trying to draw sloped rectangle upper edge shape and use it as linear layout background as in the picture:

here is the link to the design am trying to achieve: http://postimg.org/image/krjwfcisz/

I tried to draw a rectangular and rotate it but it didn't work fine.

so how to create that shape.

sorry about grammar mistakes, am not fluent :P.

Upvotes: 0

Views: 217

Answers (1)

Abdulla Shoshaa
Abdulla Shoshaa

Reputation: 101

well I think it's a silly thing to answer to my question but am doing so because it may help other people.

I couldn't manage to create what I need using XML.

so here is how to create a sloped rectangular using onDraw method.

First you need to create a class that extends View class then

public class SharpRectView extends View {
public SharpRectView(Context context) {
    super(context);
}

public SharpRectView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public SharpRectView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}


@Override
protected void onDraw(Canvas canvas) {
    float width = getWidth();
    float height = getHeight();
    Path path = new Path();
    Paint paint = new Paint();
    paint.setColor(getResources().getColor(R.color.text_white));
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    path.moveTo(0,0);
    path.lineTo(width, 0.26f * width);
    path.lineTo(width, height);
    path.lineTo(0, height);
    path.lineTo(0, 0);
    path.close();
    canvas.drawPath(path,paint);
}
}

then you can use this view class in your layout as a customized view as follows:

<com.example.SharpRectView
            android:id="@+id/sharp_rect"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_marginTop="-120dp"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            />

and to give credits to the guy that I used his project to find the solution please visit: https://github.com/qianlvable/ParallaxEffectDemo his username is: qianlv

Upvotes: 3

Related Questions