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>
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 have a white image that I'd like to color with a gradient. Instead of generating a bunch of images each colored with a specific gradient, I'd like to do this in code (not xml).
To change an image's color, I use
imageView.setColorFilter(Color.GREEN);
And this works fine. But how can I apply a gradient color instead of a solid color? LinearGradient doesn't help, because setColorFilter can't be applied to Shader objects.
EDIT: This is the image I have:
This is what I want:
And this is what I'm getting:
You have to get Bitmap of your ImageView and redraw same Bitmap with Shader
public void clickButton(View v){
Bitmap myBitmap = ((BitmapDrawable)myImageView.getDrawable()).getBitmap();
Bitmap newBitmap = addGradient(myBitmap);
myImageView.setImageDrawable(new BitmapDrawable(getResources(), newBitmap));
}
public Bitmap addGradient(Bitmap originalBitmap) {
int width = originalBitmap.getWidth();
int height = originalBitmap.getHeight();
Bitmap updatedBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(updatedBitmap);
canvas.drawBitmap(originalBitmap, 0, 0, null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0, 0, 0, height, 0xFFF0D252, 0xFFF07305, Shader.TileMode.CLAMP);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawRect(0, 0, width, height, paint);
return updatedBitmap;
}
UPDATE 3
I changed: colors of gradient, LinearGradient width = 0 and PorterDuffXfermode.
Here a good picture to understand PorterDuffXfermode:
You could use a selector
main_header.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/. android"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:orientation="horizontal"
android:background="#drawable/main_header_selector">
</LinearLayout>
main_header_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/. android">
<item>
<shape>
<gradient
android:angle="90"
android:startColor="#FFFF0000"
android:endColor="#FF00FF00"
android:type="linear" />
</shape>
</item>
</selector>
The same background can be applied to an ImageView.
To define and use selector dynamically, refer to this link :
Dynamically defining and using selectors
Create a XML file , and place it in the drawable folder .
gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#CCb1e7fa"
android:centerColor="#B3ffffff"
android:endColor="#CCb1e7fa"
android:angle="180" />
<corners android:radius="5dp" />
</shape>
Next add this as a background to your image view
<ImageView
android:id="#+id/umageview1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/gradient"
android:layout_centerHorizontal="true"
/>
I know there are many questions but it do not work out for me so i am posting this question:
I a adding a circular Imageview to my application, and i want some elevation/shadow to it so that it worked on all Api not only after 21. so what should i do?
this is my code:
xml :
<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:background="#drawable/mybackground"
/>
</RelativeLayout>
this is mybackground in drawable :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#42000000" />
<corners android:radius="5dp" />
</shape>
this is my code :
public class MainActivity extends AppCompatActivity {
Bitmap bmp;
#TargetApi(Build.VERSION_CODES.JELLY_BEAN)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bmp = BitmapFactory.decodeResource(getResources(), R.drawable.frames);
bmp = getroundedBitmap(bmp);
ImageView iv = (ImageView) findViewById(R.id.imageView);
iv.setImageBitmap(bmp);
//iv.setBackground(new BitmapDrawable(getResources(),bmp));
Outline outline = null;
/* if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
// outline = new Outline();
// outline.setOval(0,0,iv.getWidth(),iv.getHeight());
iv.setElevation(1500);
}*/
}
private Bitmap getroundedBitmap(Bitmap bmp) {
int targetwidth = 250;
int targetheight = 250;
Bitmap targetBitmap = Bitmap.createBitmap(targetwidth,targetheight,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
path.addCircle(((float) targetwidth - 1) / 2, ((float) targetheight - 1) / 2, Math.min(targetwidth, targetheight) / 2, Path.Direction.CCW);
canvas.clipPath(path);
Paint p = new Paint();
p.setColor(Color.WHITE);
canvas.drawBitmap(bmp, new Rect(0, 0, bmp.getWidth(), bmp.getHeight()), new Rect(0, 0, targetwidth, targetheight), null);
return targetBitmap;
}
}
Please help me out. i ma working in android studio
Elevation cannot work before API 21 but you can have a work around by help of shadows. Create a shadow (circular in your case) in your mybackground drawable itself. Use layer-list as the parent element and gradient to create the shadow layer inside it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<gradient android:startColor="#d1c4e9"
android:endColor="#android:color/transparent"
android:angle="270"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="3dp">
<shape android:shape="oval">
<solid android:color="#673ab7"/>
</shape>
</item>
</layer-list>
We can take ImageView Inside CardView,and height and width match with cardView
try once,it will work.
I would like to scale a rectangle drawable downwards, then rotate it so once it is clipped by the view it resembles a trapezoid with the left side slanted:
The rotation is working fine:
<?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="0%"
android:pivotY="0%"
>
<shape
android:shape="rectangle" >
<solid
android:color="#android:color/black" />
</shape>
</rotate>
</item>
</layer-list>
However to prevent a big gap where the rectangle has rotated away from the bottom of the view I want to scale vertically by 200% before the rotation happens. I was hoping that I could do something like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<scale
android:scaleWidth="100%"
android:scaleHeight="200%"
android:scaleGravity="top"
>
<rotate
android:fromDegrees="-19.5"
android:toDegrees="-19.5"
android:pivotX="0%"
android:pivotY="0%"
>
<shape
android:shape="rectangle" >
<solid
android:color="#android:color/black" />
</shape>
</rotate>
</scale>
</item>
</layer-list>
but this just causes the rectangle to disappear. Does anyone know how best to achieve this?
No really a true answer but I solution that I am using now is to create a custom Drawable that draws the shape:
public void setColor(int color) {
_color = color;
}
#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);
}
This does the job for now, although it is frustrating that I cannot find a way to do this in the xml.
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);
}