Develop Reference

Convert layer-list to bitmap not working probably

I try to convert layer-list to bitmap, then set this bitmap as a background for an ImageView but it not working
This is a test project. I know I can set drawable directly to ImageView, but I want to know why when I convert LayerDrawable to Bitmap then convert Bitmap to BitmapDrawable then set it as background of ImageView, it will look different
Here is my layer-list (ic_circle.xml)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item>
<shape
android:shape="oval">
<solid android:color="#f00"></solid>
</shape>
</item>
<item
android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp">
<shape
android:shape="oval">
<solid android:color="#ff0"></solid>
</shape>
</item>
<item
android:bottom="6dp" android:left="6dp" android:right="6dp" android:top="6dp">
<shape
android:shape="oval">
<solid android:color="#0ff"></solid>
</shape>
</item>
</layer-list>
Activity code
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ImageView img = (ImageView) findViewById(R.id.img);
Bitmap bm = drawableToBitmap(ContextCompat.getDrawable(this, R.drawable.ic_circle));
img.setBackground(new BitmapDrawable(bm));
}
public Bitmap drawableToBitmap (Drawable drawable) {
int width = drawable.getIntrinsicWidth();
width = width > 0 ? width : 1;
int height = drawable.getIntrinsicHeight();
height = height > 0 ? height : 1;
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
}
Xml code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="#drawable/ic_circle"
/>
<ImageView
android:id="#+id/img"
android:layout_marginTop="40dp"
android:layout_width="80dp"
android:layout_height="80dp"
/>
</LinearLayout>
In the emulator, you will see the second image is different to first image

In your drawable you have you have defined only boundaries of 2 outer small circles (yellow and red), and the blue one should take all the rest space. But since it has no defined size, once you draw it on the canvas, it's size will be 0.
You have to define it's size as well if you want to draw it directly on the bitmap.

Scale drawable circle according to screen size

Its been a while I am stuck with this. I am a newbie android developer.
I have a drawable circle.
circular_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:useLevel="false"
android:shape="ring"
android:thickness="0.8dp">
<solid android:color="#android:color/holo_blue_dark"/>
</shape>
now i want to use this circle in my activity layout in such a way that it covers the whole screen. That is, the width of the screen should be equal to Diameter of the circle.
Note that I have not set the radius of the circle.
example_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/exampleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.anil.raceorganizer.ExampleActivity">
<ImageView
android:id="#+id/race_field"
android:src="#drawable/circular_shape"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:padding="0dp"
android:layout_margin="0dp"
></ImageView>
</FrameLayout>
Note that I have tried to put padding and margin as 0, but it didn't work.
I also tried setting the size of the ImageView through code, but it only changed the size of the ImageView as a whole and not circle alone.
This is what I get with this code.
Any help is greatly appreciated.

You can try this code:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:thickness="0.8dp"
android:useLevel="false"
android:innerRadiusRatio="2.1">
<solid android:color="#android:color/holo_blue_dark" />
</shape>

Using Canvas, we can draw shapes matching the screen width.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_4444);
Canvas c = new Canvas(bmp);
RectF rect = new RectF(0,0,width,width);
drawCircle(rect, c, width, height);
}
private void drawCircle(RectF rect, Canvas c, int width, int height) {
Paint paint = new Paint();
paint.setARGB(255, 255 , 10, 21);
paint.setStrokeWidth(8);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.BUTT);
paint.setStyle(Paint.Style.STROKE);
int radius;
if(width < height)
radius = width/2;
else
radius = height/2;
radius-= 4;
c.drawCircle(width/2, height/2, radius, paint);
}
Not sure if it might help you. If its not , let me know. I will prefer deleting than getting downvotes!

Try this
You can use this tag in drawable
android:innerRadius="150dp"
change the radius accordingly
Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;
use the width from the above
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:useLevel="false"
android:shape="ring"
android:innerRadius="150dp"
android:thickness="0.8dp">
<solid android:color="#android:color/holo_blue_dark"/>
</shape>

Use this kind of approach to get ring like structure.
Use size tag to preserve 1:1 aspect ratio
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<size android:width="50dp"
android:height="50dp"/>
<stroke android:color="#000" android:width="0.1dp"/>
</shape>

Android layout background xml texture

I searched a lot but didn't find anything. I want to make a background for a layout , but instead of filling it with a color or a gradient I want to fill it with a texture and repeat it . I tried this but it didn't work . Can you tell me a solution.
card_texture.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/paper_texture"
android:tileMode="repeat"
/>
card_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color = "#android:color/transparent"/>
<stroke android:width="2dp"
android:color="#color/text_color"/>
<corners
android:radius="20dp"
/>
</shape>
card_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/card_texture" >
<corners
android:radius = "20dp"/>
</item>
<item android:drawable="#drawable/card_shape" />
</layer-list>
and this is how I use it in my Layout android:background="#drawable/card_background"
I get something like this. But I want the corners(marked with red) of the texture to be transparent and to fit in the black border

I called this res/drawable/bg_tile.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/tile"
android:tileMode="mirror"
android:dither="true"
android:antialias="true"
/>
I use it like:
android:background="#drawable/bg_tile"
Obiously, I prepared a tile to be mirrored horizontally and vertically (most tiles make a funny effect like that) and called it res/drawable-a-dpi-resolution/tile.png
a-dpi-resolution being ldpi, mdpi, ..., xxxhdpi
If you want to use a composite background (i.e. a gradient and a tiling bitmap over it - but the bitmap has to be somehow transparent, or it will cover the gradient), you can make a LayerList background (so that different "layers" are dran one ontop of another)
To do that, you'll need to add another background file, i.e.: res/drawable/bg_radial.xml:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<gradient
android:startColor="##color/bar_int_md"
android:centerColor="##color/bar_mid_md"
android:endColor="##color/bar_ext_md"
android:gradientRadius="480"
android:type="radial"
/>
</shape>
and finally the LayerList, which sticks them together (res/drawable/bg.xml):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_radial" />
<item android:drawable="#drawable/bg_tile" />
</layer-list>
Note that the first item is drawn first. Next items are drawn ontop of each other, being the last one the "uppermost".
So, finally you would use this like:
android:background="#drawable/bg"
Nice!

to make your image corners rounded use following function:
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
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 = pixels;
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;
}
in onCreate do this:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.menu)
View rl = (View) findViewById(R.id.root);//get the reference of the layout that you set as background
LayerDrawable layer = (LayerDrawable) rl.getBackground();
BitmapDrawable bg = (BitmapDrawable) layer.getDrawable(1);
Drawable d =new BitmapDrawable(getRoundedCornerBitmap(bg.getBitmap(),10));//pass corner radius
layer.setDrawableByLayerId(1, d);
rl.setBackgroundDrawable(d);
}

Bitmap image with rounded corners with stroke

I have a image with sharp edges.
the tile_mode.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat">
</bitmap>
the back.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/tile_mode" />
<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>
layout.xml
<LinearLayout
android:id="#+id/frame1"
android:background="#drawable/back"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</LinearLayout>
I am setting the image as a background to this layout and drawing a border to it but the problem is the image is square with sharp edges and the border which I am drawing in the xml is rounded corners. So how to make the image also with rounded corners?

This is one of solution in which you have to make round to your main layout background and inside keep your imageview with your desire image:
something like below:
back.xml
This will make your image to round corner
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#dd7b7a"/>
<corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<solid android:color="#dd7b7a"/>
</shape>
tile_mode.xml
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background"
android:tileMode="repeat" />
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
>
<LinearLayout
android:padding="4dip"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back"
android:gravity="center_horizontal"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/tile_mode"
/>
</LinearLayout>
</LinearLayout>
Updated
After digging lots, I came across on of solution which already posted on stackoverflow
Changing Image as Rounded Corner
How to make an ImageView to have rounded corners
step1#
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>
Step2#
Make one function which make rounded to your bitmap using canvas.
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
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 = pixels;
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;
}
step3#
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ImageView image=(ImageView)findViewById(R.id.image);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.testing);
image.setImageBitmap(getRoundedCornerBitmap(bitmap, 20));

Pass original bitmap to the following function and you will get a rounded bitmap as result :) . Hope this helps someone.
public Bitmap getRoundedBitmap(Bitmap bitmap) {
Bitmap resultBitmap;
int originalWidth = bitmap.getWidth();
int originalHeight = bitmap.getHeight();
float r;
if (originalWidth > originalHeight) {
resultBitmap = Bitmap.createBitmap(originalHeight, originalHeight,
Bitmap.Config.ARGB_8888);
r = originalHeight / 2;
} else {
resultBitmap = Bitmap.createBitmap(originalWidth, originalWidth,
Bitmap.Config.ARGB_8888);
r = originalWidth / 2;
}
Canvas canvas = new Canvas(resultBitmap);
final Paint paint = new Paint();
final Rect rect = new Rect(ConstsCore.ZERO_INT_VALUE,
ConstsCore.ZERO_INT_VALUE, originalWidth, originalHeight);
paint.setAntiAlias(true);
canvas.drawARGB(ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE,
ConstsCore.ZERO_INT_VALUE, ConstsCore.ZERO_INT_VALUE);
canvas.drawCircle(r, r, r, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return resultBitmap;
}

ok let's try in below way
<?xml version="1.0" encoding="utf-8"?>
<shape
android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="30dp"/>
<stroke android:width="2dp" android:color="#000000"/>
</shape>
<LinearLayout
android:id="#+id/frame1"
android:background="#drawable/corner_background"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background"
/>
</LinearLayout>

RobinHood's answer worked for me with one change due to an error I was receiving about variable assignment.
I had to change the line:
paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
To this line:
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
Making my complete code this:
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
TextView textViewTitle = (TextView) findViewById(R.id.MYTEXTIDHERE);
textViewTitle.setText("Some Text");
ImageButton imageButtonSetter = (ImageButton) findViewById(R.id.MYIMAGEIDHERE);
Bitmap myBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.MYIMAGENAMEHERE);
imageButtonSetter.setImageBitmap(getRoundedCornerBitmap(myBitmap, 40));
}
public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {
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 = pixels;
paint.setAntiAlias(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(color);
canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
return output;
}

Actually, there is a library that I made which meet your needs exactly, and you don't have to bother with those xml files.
https://github.com/pungrue26/SelectableRoundedImageView
With this open-source project, You can set different radii on each corners, and set borders(width and colors), and etc. like below. I hope it may help you.

try your back.xml something like this.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
</shape>

I had a similar problem today only my image was a Google map. you actually have to hide the corners and the way to do that is to create a 9Patch as the following one:
and apply it as a background over all your layout or another layout covering your layout.
Take a look at the following link for more information:
Is there a way to implement rounded corners to a Mapfragment?
I have actully went to this site: http://www.sumopaint.com/app/
and painted it all by hand you can take my example and change the colors to your liking.
you would probably need the next one:
you can get more information on how to create 9Patchs in the following links:
http://radleymarx.com/blog/simple-guide-to-9-patch/
http://android9patch.blogspot.co.il/

<?xml version="1.0" encoding="utf-8"?>
<item>
<bitmap
android:src="#drawable/bg_striped_img"
android:tileMode="repeat" />
</item>
<item android:left="-20dp" android:top="-20dp" android:right="-20dp" android:bottom="-20dp">
<shape android:shape="oval" >
<stroke
android:width="20dp"
android:color="#ffffffff" />
<solid android:color="#00000000" />
<size
android:height="120dp"
android:width="120dp" />
</shape>
</item>
<item >
<shape android:shape="oval" >
<stroke
android:width="1dp"
android:color="#ff999999" />
<solid android:color="#00000000" />
<size
android:height="120dp"
android:width="120dp" />
</shape>
</item>

Android ImageView with Rounded Corners not working [duplicate]

This question already has answers here:
How to make an ImageView with rounded corners?
(58 answers)
Closed 9 years ago.
I have definied the file thumb_rounded.xml and placed it inside the res/drawable folder in my android application. With this file i want to get rounded corners in my ImageViewthat contains the news thumb,
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="13.0dip" />
</shape>
and i am setting this as background of my ImageView, however, i dont get the rounded corners, the image remains a rectangle. Does anyone have any idea on how to get that? I want to achieve the same effect as this screen:
Many thanks
T

use it,
#Override
public void onCreate(Bundle mBundle) {
super.onCreate(mBundle);
setContentView(R.layout.main);
ImageView image = (ImageView) findViewById(R.id.img);
Bitmap bitImg = BitmapFactory.decodeResource(getResources(),
R.drawable.default_profile_image);
image.setImageBitmap(getRoundedCornerImage(bitImg));
}
public static Bitmap getRoundedCornerImage(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 = 100;
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;
}
Here , round corder is depend on roundPx.

If you place a view on top of the ImageView that functions as a mask, you can achieve exactly that rounded image effect.
take a look at this example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#ffff"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image1"
android:layout_width="200dp"
android:layout_height="200dp"
android:padding="10dp"
android:src="#android:color/holo_red_dark"
/>
<View
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignLeft="#+id/image1"
android:layout_alignTop="#+id/image1"
android:layout_margin="00dp"
android:background="#drawable/mask" />
</RelativeLayout>
and a mask.xml drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="50dp" />
<solid android:color="#0000"/>
<stroke android:color="#ffff" android:width="10dp"/>
</shape>
Two important things:
the stroke width of the mask drawable should match the padding of the ImageView
the stroke color of the mask drawable should match the background color.
the radius of the mask corners must be adjusted to correspond with the stroke width (so you don't see the image behind the mask).
The sample produces the following image:
HTH

You're lacking a couple of tags. Here's a new sample:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#ffffff"/>
<stroke android:width="3dp"
android:color="#ff000000"/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"/>
<corners android:radius="30px"/>
</shape>
Seen here
Also, are you aware of RoundRectShape?