How make a banner or ribbon with textview or any l

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 years ago.

Improve this question

Hey i want to make a banner or ribbon similar to given photo with a textview or any layout in android using xml or java. I cant able to figure it out how to do that.
So please help me out its really needed.

Answer 1

To create a banner like that You need to do these things

1. Create a Shape drawable of an Inverted right angled triangle by tweaking this code
2. Set the background of the textView to this shape
3. Change the textView Gravity to right/end align

Answer 2

Here's a simple imageview with the text banner in the corner which I wrote for my own use. The same structure could be applied to any type of view.

public class BannerImageView extends ImageView {

    private Paint mRibbonPaint;
    private Paint mTextPaint;
    private Paint mBoxPaint;
    private float mScale;
    private String mBannerText;

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

    public BannerImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initPainters(attrs);
    }

    private void initPainters(AttributeSet attrs) {
        TypedArray attributes = getContext().getTheme().obtainStyledAttributes(attrs, R.styleable.BannerImageView, defStyleAttr, 0);
        mBannerText = attributes.getString(R.styleable.BannerImageView_label);
        mBoxPaint = new Paint();
        int white = ContextCompat.getColor(getContext(), R.color.white);
        mBoxPaint.setColor(white);
        mBoxPaint.setAlpha(156);
        mRibbonPaint = new Paint();
        mRibbonPaint.setColor(ContextCompat.getColor(getContext(), R.color.banner_color));
        mRibbonPaint.setAntiAlias(true);
        mRibbonPaint.setStyle(Paint.Style.STROKE);
        mRibbonPaint.setStrokeCap(Paint.Cap.BUTT);
        mScale = getResources().getDisplayMetrics().density;
        mRibbonPaint.setStrokeWidth(dp(16));
        mTextPaint = new Paint();
        mTextPaint.setColor(white);
        mTextPaint.setTextSize( dp(12) );
    }

    /**
     * Converts dp to px
     * @param dp
     * @return
     */
    private float dp(float dp) {
        return dp * mScale + 0.5f;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if ( !TextUtils.isEmpty(mBannerText) ) {
            canvas.drawRect(0, 0, getRight(), getBottom(), mBoxPaint);
            canvas.drawLine(-dp(16), dp(64), dp(64), -dp(16), mRibbonPaint);
            canvas.save();
            canvas.rotate(-45, 0, 0);
            canvas.drawText(mBannerText, -dp(24), dp(38), mTextPaint);
            canvas.restore();
        }
    }

Then declare the extra attributes you want to use in values/attrs.xml

<declare-styleable name="BannerImageView">
    <attr name="label" format="string"/>
</declare-styleable>

Of course you use in your XML layouts as usual but remember the app namespace for the custom attributes

<com.my.package.BannerImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:label="Sold Out" />