4

I'm quite new to Android and i'm trying to draw on a custom view (with canvas). I've got some lines & rects there. The point is, that i now want to give the whole view rounded corners, but that doesn't work well, as i'm drawing on the view and my drawings are above the rounded corners, which were added through the ressources. Is there a possibility to add rounded corners, that cover the whole view?

Best regards and thank's for any help!

Lukas
  • 1,346
  • 7
  • 24
  • 49
  • is you custom layout is layout file?? Containing any Container suppose linear layout or else – UnderGround May 28 '13 at 12:07
  • My custom view extends from view and is simply a view where i draw stuff on it. My approach is to give it rounded corners. – Lukas May 28 '13 at 12:09
  • But that view is inflating any layout file or not , because i am not familiar with view that why asking or can we set the background to that view ??? – UnderGround May 28 '13 at 12:13
  • check the link http://stackoverflow.com/questions/16785081/round-border-linerlayout/16785160#16785160. Suppose RelativeLayout rl= (RelativeLayout) findViewById(R.id.relativelayout). CustomView cv = new CustomView(); rl.addView(cv). set background drawable to relative layout as shown in the link – Raghunandan May 28 '13 at 12:16
  • I just tried the what i suggested in the comment. seems it won't work. – Raghunandan May 28 '13 at 12:48

2 Answers2

5

I am not sure of your requirements. But you can use the below and modify the same

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/rl"
android:background="@drawable/bkg" //set background
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
</RelativeLayout>

bkg.xml

 <?xml version="1.0" encoding="UTF-8"?> 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle"> 
 <solid android:color="#10EB0A"/>    //set color
 <stroke android:width="3dp"         // set border  
 android:color="#0FECFF" />          //set border color 
 <padding android:left="5dp"         //set padding
 android:top="5dp" 
 android:right="5dp"
 android:bottom="5dp"/> 
 <corners android:bottomRightRadius="20dp" //set radius
 android:bottomLeftRadius="20dp" 
 android:topLeftRadius="20dp"
 android:topRightRadius="20dp"/> 
 </shape> 

MainActivity.java

    public class MainActivity extends Activity {

RelativeLayout rl;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    rl = (RelativeLayout) findViewById(R.id.rl);
    CustomView cv = new CustomView(this);
    rl.addView(cv);  //add custom view to the relative layout
} 

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}
class CustomView extends View
{
    Bitmap bmp;
    PaintDrawable mDrawable;

    public CustomView(Context context) {
        super(context); 
        bmp = BitmapFactory.decodeResource(context.getResources(),R.drawable.ic_launcher);
    }

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

        canvas.drawBitmap(bmp, 200, 200, null);
    }   
       }
  }

Snap shot

enter image description here

Raghunandan
  • 132,755
  • 26
  • 225
  • 256
  • Hi, that doesn't work properly as this doesn't work in combination with the drawing. But thank's for your answer anyway! – Lukas May 30 '13 at 12:51
  • @LucèBrùlè it works with the drawing. i have drawn a bitmap image on the canvas. can you see the ic_launcher.png on the screen. canvas.drawBitmap(bmp, 200, 200, null); you can draw lines or paths – Raghunandan May 30 '13 at 16:21
  • i've drawn many lines and recs, that fill the whole view, and then it doesn't work, as my drawing is above the rounded corners :( – Lukas May 30 '13 at 16:29
  • well i just tried. The custom view is rounded. I can draw lines. I will post a snap shot. You might be doing it wrong. – Raghunandan May 30 '13 at 16:30
  • @LucèBrùlè check the snap shot above. custom view is rounded and i have drawn using free hand. Does that help you? – Raghunandan May 30 '13 at 16:32
  • Mhm.. Oh, i found out the difference now. YOu are applying the background to a layout. I applied it to the custom view. By the way.. Nice painting :D – Lukas May 30 '13 at 16:34
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/30925/discussion-between-raghunandan-and-luce-brule) – Raghunandan May 30 '13 at 16:35
  • Pls try to draw in the corners,where the view is rounded. That drawing is over the background.. – Lukas May 30 '13 at 16:38
  • How could this be the correct answer? the view will either not be able to draw on its entire rounded bounds, or it will be able to draw even outside of it (all depending on the padding values). Is there any other solution? maybe extending the view and making it draw only into rounded boundaries? – android developer Nov 27 '13 at 12:54
  • @androiddeveloper did you try and what's wrong with it? the draw is within the border. may you want to check this http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/ – Raghunandan Nov 27 '13 at 13:51
  • @Raghunandan i've already explained what's wrong with it. when you use it, you actually set padding so that the content will be within it. the bad thing is that you can't draw outside of those paddings so you are limited to rectangular boundaries, instead of rounded ones. if you disable the paddings, you will draw on top of the rounded corners. about the link, this is for ImageView, and it also has bugs. if you want to use a good library for this, I suggest this one: https://github.com/vinc3m1/RoundedImageView/ – android developer Nov 27 '13 at 14:25
  • @androiddeveloper the one provided in the link is from Romain Guy and i don't think it has bugs and for the answer yes it draws within the padding. – Raghunandan Nov 27 '13 at 14:29
  • @Raghunandan it has bugs. i've already tested it, and posted about it here: http://stackoverflow.com/questions/14109187/using-a-rounded-corners-drawable . about the padding, this is a huge disadvantage since other solutions (like the one of the imageView) actually put the content to the correct boundaries instead of staying in a rectangular shape. – android developer Nov 27 '13 at 14:33
  • @androiddeveloper nice will take a look at it – Raghunandan Nov 27 '13 at 16:15
4
    public class RoundCornerView extends View{
    public RoundCornerView(Context context) {
        super(context);
    }

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

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

    protected void onDraw(android.graphics.Canvas canvas)
    {
        Paint paint = new Paint();

        paint.setAlpha(255);
        canvas.translate(0, 30);
        paint.setColor(Color.BLUE);
        Path mPath = new Path();
        mPath.addRoundRect(new RectF(0, 0, 100,100),20,20, Path.Direction.CCW);
        canvas.clipPath(mPath, Region.Op.INTERSECT);
        paint.setColor(Color.GREEN);
        paint.setAntiAlias(true);
        canvas.drawRect(0, 0, 120,120,paint);

    }
}

Try to use clippath, but just as a side note after 3.0 you need to turn off hardwareAccelerated in you're manifest

android:hardwareAccelerated="false"

There are solutions for that, when founded will post it here as an addition

QVDev
  • 1,093
  • 10
  • 17
  • that's for image with rounded corners. OP is asking for customview with rounded corners – Raghunandan May 28 '13 at 12:26
  • Indeed my bad, also in the comments of the article there is some discussion about rounded corners in layout. And Imageview is a subclass of an View – QVDev May 28 '13 at 12:30
  • what i suggested was you can define your linear layout or relative in xml file.set the background using shape(rounded corners). set the content to the activity. initialize the view. create custom view. add the custom view to the layout. in the comment relative layout – Raghunandan May 28 '13 at 12:33
  • I just tried the what i suggested in the comment. seems it won't work. – Raghunandan May 28 '13 at 12:48
  • Read wrong the initial idea, I edited the solution you can give it a try. – QVDev May 28 '13 at 14:18
  • it doesn work with the "android:hardwareAccelerated="false"", but that slow's down my animation i think? mhm.. is there another way? – Lukas May 30 '13 at 13:13
  • Did it not work at all? have a look here about for more information about hardware accelerated http://developer.android.com/guide/topics/graphics/hardware-accel.html – QVDev May 31 '13 at 10:49