I'm willing to declare a xml drawable with semi-circle. So the center of the oval is out of the bound:
I tried doing it with scale tag but i can't get it to work, here is what i have done.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<scale android:scaleGravity="center">
<shape android:shape="ring">
<stroke
android:width="2dp"
android:color="#C8C8D7"/>
<size
android:width="300dp"
android:height="300dp"/>
</shape>
</scale>
</item>
</layer-list>
But it doesn't work.
I didn't manage to generate it inside xml. I ended up using canvas drawing.
public Drawable generateHeaderBackground(int arcColor) {
int w = screenWidth;
x = (int) r.getDimension(R.dimen.header_height);
Bitmap.Config conf = Bitmap.Config.ARGB_8888;
Bitmap bmp = Bitmap.createBitmap(w, x, conf);
Canvas mCanvas = new Canvas(bmp);
Paint p = new Paint();
p.setStyle(Paint.Style.STROKE);
p.setColor(arcColor);
p.setStrokeWidth(3);
p.setAntiAlias(true);
RectF rtt = new RectF(-w / 2, x / 4, w + (w / 2), x * 8);
mCanvas.drawOval(rtt, p);
return new BitmapDrawable(getResources(), bmp);
}
Related
I would like to create rectangle drawable then rotate it so top right side appear slanted, i would eventually overlay over rounded corner image ,in effort to create a copy of the image below , using some drawable
am hoping for using with xml , but it just slanted and edge never touch other side
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<rotate
android:fromDegrees="19.5"
android:toDegrees="-19.5"
android:pivotX="-50%"
android:pivotY="0%"
>
<shape
android:shape="rectangle" >
<solid
android:color="#android:color/black" />
</shape>
</rotate>
</item>
create a custom Drawable that draws the shape: but again i fail , would love any help ? thank you
#Override
public void draw(Canvas canvas) {
int width = this.getBounds().width();
int height = this.getBounds().height();
double angle = 19.5 * (Math.PI / 180.0);
double offsetX = height * Math.tan(angle);
Path path = new Path();
Paint paint = new Paint();
path.moveTo(0, 0);
path.lineTo(width, 0);
path.lineTo(width, height);
path.lineTo((int)offsetX, height);
path.close();
paint.setColor(_color);
paint.setStyle(Paint.Style.FILL);
canvas.drawPath(path, paint);
}
I'm using this code to draw a half in my app:
<?xml version="1.0" encoding="utf-8" ?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:left="35dp"
android:top="40dp"
android:bottom="40dp"
android:right="0dp">
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" android:innerRadius="30dp" android:thickness="0dp">
<solid android:color="#color/transparent"/>
<stroke android:width="3dp" android:color="#color/White"/>
</shape>
</item>
</layer-list>
output :
but i need something like below :
how to draw this ?
I would suggest to draw it through code.
1- Create class MyView and put below code.
public class MyView extends View {
public MyView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
float width = (float) getWidth();
float height = (float) getHeight();
float radius;
if (width > height) {
radius = height / 4;
} else {
radius = width / 4;
}
Path path = new Path();
path.addCircle(width / 2,
height / 2, radius,
Path.Direction.CW);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
float center_x, center_y;
final RectF oval = new RectF();
paint.setStyle(Paint.Style.STROKE);
center_x = width / 2;
center_y = height / 2;
oval.set(center_x - radius,
center_y - radius,
center_x + radius,
center_y + radius);
canvas.drawArc(oval, 90, 180, false, paint);
}
}
2-Initialize this class inside you activity or fragment:-
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
Your can use a rectangle shape .xml file and edit the corners on one side only.
Example:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="30dp"
android:width="30dp"/>
<solid android:color="#color/black"/>
<corners android:topLeftRadius="15dp"
android:bottomLeftRadius="15dp"/>
</shape>
You can use <clip /> drawable in order to cut-off part of your circle.
http://developer.android.com/guide/topics/resources/drawable-resource.html#Clip
this is how i created my semi circle in a drawable xml file.
<size
android:width="180dp"
android:height="90dp"></size>
<corners
android:topLeftRadius="200dp"
android:topRightRadius="200dp"></corners>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="180dp"
android:height="90dp"></size>
<corners
android:topLeftRadius="200dp"
android:topRightRadius="200dp"></corners>
<stroke android:width="5px" android:color="#color/black" />
</shape>
I want to create a background that is an image and also give it rounded corners. I have the following code. the background image shows but there is no rounded corners.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<corners android:radius="20dp" />
</shape>
</item>
<item>
<bitmap
android:src="#drawable/tabs_pattern_diagonal"
android:tileMode="repeat" />
</item>
</layer-list>
I have tried changing the order of the times but it made no difference
edit
I dont have an imageview. this layerlist is being applied as a background to a linearlayout
You can use this library if you don't want to implement rounded corners yourself.
You can try following :
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
Source
You can also refer to article by Romain Guy
try this:
<item>
<shape android:shape="rectangle" android:padding="10dp" >
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
</item>
<item>
<bitmap
android:src="#drawable/tabs_pattern_diagonal"
android:tileMode="repeat" />
</item>
</layer-list>
I am setting a background image to LinearLayout like this:
1.back_xml:
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/back" >
</item>
<item>
<shape>
<solid/>
<stroke android:width="1dip" android:color="#225786" />
<corners android:radius="10dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
</item>
2. tile.xml
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/pie_chart_background"
android:tileMode="repeat">
</bitmap>
now I am setting the back.xml as a background to LinearLayout it works fine.
I need to have a image with rounded corners and also a border to it.But i only have the border with rounded corners and not the image what is the problem in my code am i missing something?
this is how my image looks:
After spending hours of time behind your issue, finally I achieved, hope now it will give you same result as you want, please go through below code and let me know whether its works or not?
Pass appropriate parameter to below function to get rounded corner with your desire color border.
public static Bitmap getRoundedCornerImage(Bitmap bitmap, int cornerDips, int borderDips, Context context) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int borderSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) borderDips,
context.getResources().getDisplayMetrics());
final int cornerSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, (float) cornerDips,
context.getResources().getDisplayMetrics());
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
paint.setAntiAlias(true);
paint.setColor(0xFFFFFFFF);
paint.setStyle(Paint.Style.FILL);
canvas.drawARGB(0, 0, 0, 0);
canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
paint.setColor((Color.RED)); // you can change color of your border here, to other color
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth((float) borderSizePx);
canvas.drawRoundRect(rectF, cornerSizePx, cornerSizePx, paint);
return output;
}
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:gravity="center"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
OnCreate
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView rl=(ImageView)findViewById(R.id.image);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing); // your desire drawable image.
rl.setImageBitmap(getRoundedCornerImage(bitmap, 10, 10, this));
}
Original image
Output
Below links help me to achieve my goal:
Border over a bitmap with rounded corners in Android
Creating ImageView with round corners
How to make an ImageView to have rounded corners
How to set paint.setColor(int color)
try your back.xml some thing like like this instead of giving a rectangle background image.
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#ff00ff >
</item>
<item>
<shape android:shape="rectangle" >
<solid/>
<stroke android:width="1dip" android:color="#225786" />
<corners android:radius="10dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
</item>
Another alternative to what Raj has posted is to use a background image with transparency at the corner.
The BEST solution, as your background is simple, is to use a 9-patch, which is the Android-native solution to the majority of background images: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch, which is similar in style to how some website backgrounds are drawn.
Android also has it's own 9-patch creator bundled with the sdk: http://developer.android.com/tools/help/draw9patch.html, so it's easy enough to edit your own png files, then apply the 9-patch to the layout. The advantage of 9-patches is that they also handle the resizing the UI for you, meaning you won't encounter as many problems when using your app on different screens
Use your shape in combination with an image with rounded corners.
You can use AndroidQuery to load the image with rounded corners.
See http://code.google.com/p/android-query/wiki/ImageLoading#Rounded_Corner
String url ="http://www.vikispot.com/z/images/vikispot/android-w.png";
ImageOptions options = new ImageOptions();
options.round = 15;
aq.id(R.id.image).image(url, options);
I think you should have done it like this.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/back" />
<stroke android:width="1dip" android:color="#225786" />
<corners android:radius="10dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
</item>
If the background is not a color but it is a bitmap, you should follow this beautiful guide
http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/
Solution 1
create a 9-patch image for the border. the middle of the image should be transparent.
use a RelativeLayout as a parent and put your image LinearLayout at the bottom. set the border 9-patch as the background to another linear layout and place it on top of the image LinearLayout. Then it will cover the corners and you will get the expected result.
Solution 2
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}
I have next XML drawable blue_button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item><bitmap android:src="#drawable/button_blue_bg" />
</item>
<item >
<shape>
<corners android:radius="50dip" />
<stroke android:width="1dip" android:color="#ccffffff" />
<solid android:color="#00000000" />
<padding android:bottom="3dip"
android:left="3dip"
android:right="3dip"
android:top="3dip" />
</shape>
</item>
</layer-list>
</item>
</selector>
And i have image button_blue_bg with gradient with 1px width.
When i set button background i get next image
As you can see i have background not clipped with rounded border.
How i need modificate xml for background gradient image be not outside border?
I understand why it happended, because i use layers - so this like sandwich- but i also programming on objective c, and there it's also use layers. But in Apple it's wotks fine.
i use this.... First a Layer for the basic definition, set this layer as backgound of your layout:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="0.2dp" android:color="#color/anycolor" />
<corners android:radius="10dp" > </corners>
</shape>
</item>
<item>
<bitmap android:src="#drawable/imgback" />
</item>
</layer-list>
i use this function for making round corners:
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
bitmap.getHeight(), Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final int color = 0xff424242;
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
final RectF rectF = new RectF(rect);
final float roundPx = 12;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output ;
}
and finaly, the code in the activity:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.menu);
// i use a Relative Layout
RelativeLayout rl = (RelativeLayout) findViewById(R.id.rlmenu);
// Obtain then backgroud of RelativeLayout
LayerDrawable layer = (LayerDrawable) rl.getBackground();
// obtain the image set in the Layer
BitmapDrawable bg = (BitmapDrawable) layer.getDrawable(1);
// create a new BitmapDrawable from the function
Drawable d =new BitmapDrawable(getRoundedCornerBitmap(bg.getBitmap()));
// set the new roundcorner image in the layer
layer.setDrawableByLayerId(1, d);
rl.setBackgroundDrawable(d);
}
A 9-patch would be perfect for your situation