Skip to content Skip to sidebar Skip to footer

Circle Shape For Viewpager

Hi i have a relative layout with a viewpager.

Solution 1:

use below class as parent in xml,

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.FrameLayout;

publicclassRoundedCornerLayoutextendsFrameLayout
{
    privatefinalstaticfloatCORNER_RADIUS=100.0f;

    private Bitmap maskBitmap;
    private Paint paint, maskPaint;
    privatefloat cornerRadius;

    publicRoundedCornerLayout(Context context)
    {
        super(context);
        init(context, null, 0);
    }

    publicRoundedCornerLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init(context, attrs, 0);
    }

    publicRoundedCornerLayout(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    privatevoidinit(Context context, AttributeSet attrs, int defStyle)
    {
        pain_border = newPaint();
        pain_border.setFlags(Paint.ANTI_ALIAS_FLAG);
        pain_border.setColor(Color.WHITE);
        pain_border.setStyle(android.graphics.Paint.Style.STROKE);
        pain_border.setStrokeWidth(6);

        paint_inside_background = newPaint();
        paint_inside_background.setColor(Color.parseColor("#686868"));

        DisplayMetricsmetrics= context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

        paint = newPaint(Paint.ANTI_ALIAS_FLAG);

        maskPaint = newPaint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        maskPaint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.CLEAR));

        setWillNotDraw(false);
    }

    Paint pain_border;
    Paint paint_inside_background;

    @Overridepublicvoiddraw(Canvas canvas)
    {

        BitmapoffscreenBitmap= Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
        CanvasoffscreenCanvas=newCanvas(offscreenBitmap);

        super.draw(offscreenCanvas);

        if (maskBitmap == null)
        {
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }
        canvas.drawCircle(maskBitmap.getWidth() / 2, maskBitmap.getHeight() / 2, maskBitmap.getWidth() / 2, paint_inside_background);

        offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
        canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);


        canvas.drawCircle((maskBitmap.getWidth() / 2), (maskBitmap.getHeight() / 2), (maskBitmap.getWidth() - 6) / 2, pain_border);
    }

    private Bitmap createMask(int width, int height)
    {
        Bitmapmask= Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
        Canvascanvas=newCanvas(mask);

        Paintpaint=newPaint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(newPorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(newRectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

make sure you have to use dp instead of px to better performance.

Solution 2:

try this:

create a file oval.xml in the drawable folder.

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solidandroid:color="@color/transparent" /></shape>

use this drawable as background for your view:

<android.support.v4.view.ViewPager
android:id="@+id/pager"android:overScrollMode="never"android:layout_width="fill_parent"android:layout_height="fill_parent"android:background="@android:drawable/oval"/>

Post a Comment for "Circle Shape For Viewpager"