CODEWITHSUNDEEP
androidandroid-layoutios7android-shape
Ashish Tiwari
Ashish Tiwari

Reputation: 2246

How to create a custome shape in which image could be displayed?

In a project I have to show profile image and other images in a different shape. I don't know how to create a shape like it, and how to show an image in it. I have to put this type of shape in list view also. Please suggest me.

Thanks in advance.

Upvotes: 2

Views: 582

Answers (3)

Ashish Tiwari
Ashish Tiwari

Reputation: 2246

I tried and got the solution for Android. I am sharing whatever I did.

  • I just created a class CustomShape that extended View class.
  • Override the onDraw() method.
  • Created a Paint and Path object.
  • Drew lines to coordinates.
  • Created a Bitmap from resource to show an image inside shape.
  • Created a BitmapShader object and set it to Paint.
  • Drew canvas with Path and Paint object.
  • Created a layout in XML and added CustomeShape.
  • Created and instantiated CustomShape object.

Here is the code of CustomShape Class:

public class CustomShape extends View {
Bitmap bitmap;
BitmapShader bitmapShader;

public CustomShape(Context context) {
    super(context);
    // TODO Auto-generated constructor stub

}

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

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


@Override
protected void onDraw(Canvas canvas) {
    // TODO Auto-generated method stub
    super.onDraw(canvas);

    Paint p = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    Path pth = new Path();
    pth.moveTo(0, 0);

    pth.lineTo(100, 0);
    pth.lineTo(70, 100);
    pth.lineTo(0, 100);

    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.ppp);
    bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP,
            Shader.TileMode.REPEAT);
    p.setShader(bitmapShader);
    canvas.drawPath(pth, p);
}

Here is the code of MainActivity.java

public class MainActivity extends Activity {

CustomShape customShape;

@Override
protected void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
    setContentView(R.layout.layout_main);

    customShape = (CustomShape) findViewById(R.id.customeShape);

    }

}

Here is the layout

 <com.example.btndemo.CustomShape
      android:id="@+id/customeShape"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

Upvotes: 1

Minni Tomar Antil
Minni Tomar Antil

Reputation: 50

Try something like that:

profileImageview=[[UIImageView alloc]initWithFrame:CGRectMake(2,10,100,80)];
    UIBezierPath *path = [UIBezierPath new];
    [path moveToPoint:(CGPoint){0, 0}];
    [path addLineToPoint:(CGPoint){100, 0}];
    [path addLineToPoint:(CGPoint){70, 80}];
    [path addLineToPoint:(CGPoint){0, 80}];
    [path addLineToPoint:(CGPoint){0, 0}];

     CAShapeLayer *mask = [CAShapeLayer new];
    mask.frame = profileImageview.bounds;
    mask.path = path.CGPath;

    // Mask the imageView's layer with this shape
    profileImageview.layer.mask = mask;

Upvotes: 1

chaithraVeeresh
chaithraVeeresh

Reputation: 258

use bezier paths as you required using bazie rpaths and create layer of shape you need and add as sublayer to your image view.

for example circular imageView code is below:

     UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2) radius:MIN(self.width, self.height)/2 startAngle:0.0f endAngle:2 * M_PI clockwise:YES]; 
     CAShapeLayer *maskCircularShapeLayer = [CAShapeLayer layer]; maskCircularShapeLayer.path = path.CGPath;
     [self.layer addSublayer:maskCircularShapeLayer];

Upvotes: 0

Related Questions