I am trying to have user's profile picture in one of my FABs. I tried a cheeky way by giving the fab a negative padding but it doesn't work. There is still padding. How do i remove that padding and have a filled FAB?
this is my fab :
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:src="#drawable/testpropic"
android:padding="-50dp"
android:elevation="0dp"
android:id="#+id/profileFAB"
android:stateListAnimator="#null"
app:pressedTranslationZ="12dp"
android:visibility="gone"
/>
This is what I am getting :
There are two ways to achieve your desired effect:
Simply just override the original dimensions of the Android support
library by adding:
<dimen name="design_fab_image_size" tools:override="true">48dp</dimen>
to your dimens.xml, this will automatically override the design_fab_image_size
set by the library (may not work with third party libraries) as noted in How to remove auto padding of FAB button in android?
Note: 48dp in this case is the width of the floating action button.
Use an ImageView with a Circle Transformation using the Picasso Library instead of a FloatingActionButton. You'll lose the simple Fab functionality and animations but you'll have more flexibility with setting the image correctly. As you're animating the FAB on button press (i.e. displaying all four floating action buttons, replacing it with an ImageView of the same dimensions and attributes, would be easy to change to in your XML)
An example of the class would be:
public class CircleTransform implements Transformation {
#Override
public Bitmap transform(Bitmap source) {
int size = Math.min(source.getWidth(), source.getHeight());
int x = (source.getWidth() - size) / 2;
int y = (source.getHeight() - size) / 2;
Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
if (squaredBitmap != source) {
source.recycle();
}
Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
BitmapShader shader = new BitmapShader(squaredBitmap,
BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
paint.setShader(shader);
paint.setAntiAlias(true);
float r = size / 2f;
canvas.drawCircle(r, r, r, paint);
squaredBitmap.recycle();
return bitmap;
}
#Override
public String key() {
return "Circle";
}
}
and an example of using such technique with Picasso would be:
Picasso.with(context).load(imageUri).transform(new CircleTransform()).into(imageView);
Note: .load() can take a String URL or Resource ID
Update:
If you want a circle image inside a circle FloatingActionButton, use both techniques but use your FloatingActionButton instead. Transform the image and then set it to your FloatingActionButton using Picasso.
Related
background
I have a small circular contact photo view that I need to show the user.
If the photo is available, I should show it, while the image gets rounded to a circle, and has an elevation.
If the photo isn't available, I show an icon inside with a background, while still it's rounded and has elevation.
The problem
I've managed to make the photo showing work only on Android 5 and above:
But, it has a bad color around the edges as it tries to show the background of the FAB, and on Android 4.x and below it it showing as a simple rectangular content, with nothing that's related to FAB, probably because padding is what's protecting it for the shadow to be shown.
I also need to be able to add a stroke (a thin line of specific color around the rounded image), but I'm not sure how to add it.
What I've tried
This is in the layout file:
<android.support.design.widget.FloatingActionButton
android:id="#+id/image"
android:layout_width="#dimen/test"
android:layout_height="#dimen/test"/>
"test" is 80dp.
And this is in the code:
FloatingActionButton floatingActionButton = (FloatingActionButton) view.findViewById(R.id.image);
floatingActionButton.setPadding(0, 0, 0, 0);
final Bitmap bitmap = ...
RoundedCornersDrawable roundedCornersDrawable = new RoundedCornersDrawable(getResources(), bitmap, bitmap.getWidth() / 2);
floatingActionButton.setImageDrawable(roundedCornersDrawable);
code of RoundedCornersDrawable:
public class RoundedCornersDrawable extends BitmapDrawable {
private final BitmapShader bitmapShader;
private final Paint p;
private final RectF rect;
private final float borderRadius;
public RoundedCornersDrawable(final Resources resources, final Bitmap bitmap, final float borderRadius) {
super(resources, bitmap);
bitmapShader = new BitmapShader(getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
final Bitmap b = getBitmap();
p = getPaint();
p.setAntiAlias(true);
p.setShader(bitmapShader);
final int w = b.getWidth(), h = b.getHeight();
rect = new RectF(0, 0, w, h);
this.borderRadius = borderRadius < 0 ? 0.15f * Math.min(w, h) : borderRadius;
}
#Override
public void draw(final Canvas canvas) {
canvas.drawRoundRect(rect, borderRadius, borderRadius, p);
}
}
The question
How do I get the FAB to work this way? How can I disable the padding at will, for all Android versions, and yet still have a rounded image with shadow ?
How do I also add a stroke to the rounded FAB ?
I think I was too fast in writing this post, while it seems there is already one about it here:
How to add a shadow and a border on circular imageView android?
I will have a look at it and see if it matches the requirements of what I need.
EDIT: it doesn't look as well as FAB (especially the shadow), plus I don't see the ability to put the small content in the center, like in FAB. It always puts the content in center-crop way.
Of course, I could just put a smaller sized image in it....
EDIT: I think I've found the right library this time:
https://github.com/lopspower/CircularImageView
It allows a shadow, customize the shadow size and color, and also a border, and also how to scale the image.
It's not quite a FAB, and it doesn't have the ability to put the image at the center without cropping, but it's enough for me.
I have an image like this->
And I want to show like this->
Then I can choose how much I can see(0~1,0=can not see,1=Whole picture,0.5=half picture,....etc,read from user input)
How to do that?
I tried to use android:scaleType but it is not working.
My best suggestion is to wrap your BitmapDrawable with a ClipDrawable.
ClipDrawable lets you define clipping for any other drawable, so instead of drawing the entire drawable, only a part of it will be drawn.
How would that work? Your ImageView can display a drawable - assignable through setImageDrawable(). Naturally, you would place a BitmapDrawable of your image bitmap there. If you wrap your BitmapDrawable first with ClipDrawable, and only then assign to the ImageView, you should be fine.
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/clip_source" />
and this is clip_source drawable:
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="vertical"
android:drawable="#drawable/your_own_drawable"
android:gravity="top" />
You can define the amount of clipping by calling the function setLevel() on your ClipDrawable (clip_source). A level of 0 means the image is completely hidden and a level of 10000 means the image is completely revealed. You can use any int value in the middle.
You'll have to set the level in code, so your code should first get a reference to the ClipDrawable. You can do this by running getDrawable() on your ImageView instance. When you have a reference to your ClipDrawable, simply run setLevel(5000) on it (or any other number 0-10000).
ImageView img = (ImageView) findViewById(R.id.imageView1);
mImageDrawable = (ClipDrawable) img.getDrawable();
mImageDrawable.setLevel(5000);
here is another way to achieve this
public static Bitmap getScaleBitmap(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()/2);
final RectF rectF = new RectF(rect);
final float roundPx = 0;
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 in below line
final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()/2);
set hight as you require..
Enjoy :)
I've achieved this by setting the scrollY on my ImageView in the markup. From android's documentation, clearly this is not an option if you're dealing with devices running less than API 14. Also, in my case, I'm using fixed size images that I'm loading based on application state, so they're always the same size. As such, I'm able to just implement it in markup. I realize this approach won't work for everyone.
I wrap the image in a layout that's half as tall as the icon and intentionally have the icon's size at it's actual size. Without the scrollY set, it displays only the top half of the image. Setting the scrollY moves it to where I want it - displaying only the lower half of the image.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center_horizontal">
<ImageView
android:id="#+id/icon"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/default_icon"
android:scrollY="50dp" />
</LinearLayout>
So, from my example, it's only displaying the bottom half of the icon.
Here's an easy way.. Create a separate layout in your main layout just for your images. Make sure it is realitive. Now put your image view for your pictures in side the layout and make it fill parent. OK now make a blank image and add that image view to the bottom of the layout and the top to the center of the layout. Just mess with the margins and size of the imageviews till it looks the way you want it. Hope this helps.
Convert your drawable into a bitmap and crop to get top of the image to form another bitmap, then display it into your image view.
// to convert drawable to bitmap
Bitmap resource = BitmapFactory.decodeResource(context.getResources(),
R.drawable.your_resource);
// to set width of bitmap to imageview's width if necessary,
int width = imageView.getMeasuredWidth();
// to crop the bitmap to specific width and height,
resource = Bitmap.createBitmap(resource, 0, 0, width, height);
here is the code to crop image into two part
public static Bitmap getScaleBitmap(Bitmap bitmap, int check) {
final Bitmap toBeCropped = bitmap;
final BitmapFactory.Options bitmapOptions = new BitmapFactory.Options();
bitmapOptions.inTargetDensity = 1;
toBeCropped.setDensity(Bitmap.DENSITY_NONE);
int top = 0;
int bottom = 0;
int targetheight = 0;
if (check == 0) {// return 1st half of image
top = 0;
bottom = bitmap.getHeight() / 2;
} else {// return 2nd half of image
top = (bitmap.getHeight() / 2) - 10;
bottom = (bitmap.getHeight() / 2) - 10;
}
int fromHere = (int) (toBeCropped.getHeight() * 0.5);
Bitmap croppedBitmap = Bitmap.createBitmap(toBeCropped, 0, top, toBeCropped.getWidth(), bottom);
return croppedBitmap;
}
I am trying to create a XML Drawable which I would use instead of the default marker in OSMDroid.
This is what it should look like in the end:
The black part will be loaded while creating the marker, as every marker will have a different image there. (these will be loaded from a Database if that´s important)
I tried to create a XML Drawable, and it kinda works, but the black part seems to be scaled to fit the image, thus making the marker just a big black square. (without the black part it works fine)
My current XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/marker"/> // main
<item android:drawable="#drawable/markerfill" /> // black part
</layer-list>
I tried using a scale for the second item, but as I looked into scales, it looked like I can´t use scales for this.
What I want:
I load the black box into the "main" part, resize it if necessary (while keeping the proportions) and change it from Java-Code.
I will be using this marker for OSMDroid.
What would be the best approach for this?
What I want: I load the black box into the "main" part, resize it if
necessary (while keeping the proportions) and change it from
Java-Code. I will be using this marker for OSMDroid.
If the first layer image will not be resized/scaled when used(I don't know how OSMDroid manages that marker) then you could use the current approach of a LayerDrawable and "place" the dynamic image with LayerDrawable.setLayerInset():
public Drawable makeBasicMarker(Bitmap bitmap) {
Drawable[] layers = new Drawable[2];
layers[0] = new BitmapDrawable(getResources(),
BitmapFactory.decodeResource(getResources(), R.drawable.marker));
layers[1] = new BitmapDrawable(getResources(), bitmap);
LayerDrawable ld = new LayerDrawable(layers);
ld.setLayerInset(1, xx, xx, xx, xx); // xx would be the values needed so bitmap ends in the upper part of the image
return ld;
}
If the image is scaled then you need to make your own Drawable and draw the parts yourself placing them appropriately.
give it a try like this: 1.define a view with the first drawable; 2. draw the second item with drawBitmap() method 3. call the postInvalidate() method to redraw.
drawing mBar on mBG, referring to those:
void onDraw(final Canvas canvas) {
super.onDraw(canvas);
float zoomX = mWidth / (float) mBG.getWidth();
float zoomY = mHeight / (float) mBG.getHeight();
canvas.drawBitmap(mBG, 0, 0, null);
canvas.drawBitmap(mBG, new Rect(0, 0, mBG.getWidth(), mBG.getHeight()),
new RectF(0, 0, mWidth, mHeight), null);
....
canvas.drawBitmap(mBar, new Rect(0, 0, (int) w, (int) h), new RectF(
X_LOCATION * zoomX, Y_LOCATION * zoomY, (X_LOCATION + w)
* zoomX, (Y_LOCATION + h) * zoomY), null);
}
I have created this class which extends View and draws a graph in Canvas. While drawing a graph I am considering actual screen height and width and it draws a graph according to that.
My problem is I am using this View as a widget in another activity with a desired size say 100 by 150..but the View class doesn't scale itself and only shows a clipped part of it not the graph. I know O have to do some calculation to fit this canvas into desired size but I have no clue how to do that..Any help would be great!!
Code where I am drawing graph is
public class GraphPlotting extends View
{
public void onDraw(Canvas canvas)
{
readPoints();
Paint paint1 = new Paint();
paint1.setColor(Color.rgb(0xFF,0xFF, 0xFF));
paint1.setStrokeWidth(1.0f);
Paint paint2 = new Paint();
paint2.setColor(Color.rgb(0xFF,0xFF, 0xFF));
paint2.setStrokeWidth(10.0f);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
canvas.drawPaint(paint);
canvas.drawLines(p,paint1);
}
public void readPoints()
{
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
height = dm.heightPixels;
width = dm.widthPixels;
// drawing graph based on above dimension which in my case is 480 by 800
}
xml Layout where I am using this View
<RelativeLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:layout_below="#+id/btn_analyze"
android:layout_centerHorizontal="true"
android:id="#+id/rlgraph"
>
<com.aventusoft.mylynel.GraphPlotting
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>
I want to fit my canvas with my Relative layout height and width and graph should visible in that area..currently its showing the View but only part of it..Graph is not visible at all..Please help me in calculation I need to do..
Copy/paste direct from one of my own classes which extends ImageView to draw a graph. The idea is that you can put this into any layout. The class takes care of it's own measurements.
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
widgetHeight = h;
widgetWidth = w;
if (sizeChangedObservers != null && sizeChangedObservers.size() > 0) {
for (SizeChangedObserver observer : sizeChangedObservers) {
observer.callback(w, h);
}
}
updateIncrements();
}
The sizeChangedObservers just let's me notify other classes if the graph size changes, e.g. I have scale indicators on the X and Y axis. updateIncrements() is where I figure out how many pixels each X and Y represents using the device screen resolution, graph size and DPI count.
Using this approach, the canvas will be whatever size it is and you don't care. When you plot, you just use x * xPixels and y * yPixels which are the calculated pixels per value.
[EDIT] Try reading this first http://developer.android.com/training/custom-views/custom-drawing.html
I need to make a thumbnail view with rounded corners and inner shadow. Usually I'm making ImageView frames with 9patches, which have served me well so far, but this time the effect I need requires drawing the inner shadow on top of the image (and not just around it). This lead me to extend the ImageView class and override the onDraw() method.
public class ThumbnailImageView extends ImageView {
After many tutorials (thanks StackOverflow!), I ended up with this code for the onDraw() method:
#Override
protected void onDraw(Canvas canvas) {
if (mBitmap == null) {
return;
}
int radius = 4;
int padding = 2;
int bleed = 2;
RectF frame = new RectF(padding, padding, getWidth() - padding, getHeight() - padding);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(0xFF000000);
canvas.drawRoundRect(frame, radius, radius, mPaint);
Shader bitmapShader = new BitmapShader(mBitmap, TileMode.CLAMP, TileMode.CLAMP);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(0xFF000000);
mPaint.setMaskFilter(new BlurMaskFilter(bleed, Blur.INNER));
mPaint.setShader(bitmapShader);
canvas.drawRoundRect(frame, radius, radius, mPaint);
}
What I'm basically doing, is drawing a black rounded rectangle first and then drawing a rounded-corners bitmap with fading edges (with the BlurMaskFilter) on top of it. The result is what I want:
The mBitmap value is initialized in the ImageView constructor like this:
mDrawable = getDrawable();
if (mDrawable != null) {
mBitmap = ((BitmapDrawable) mDrawable).getBitmap();
}
The problem is that I am overriding onDraw() completely (no super.onDraw()) is called, so I have to pre-scale all images to the desired thumbnail size (e.g. 96x96) or else only the top-left corner of the image is drawn. What I want to be able to do is take advantage of all the scaling the framework is doing when I assign the following xml values to the ThumbnailImageView:
android:id="#+id/thumb"
android:layout_width="96dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
To do this, I thought I should somehow call super.onDraw() while getting the effects I need at the same time. I have managed to get the rounded rectange by adding a clipping path to the canvas, but I can't find a way to add the inner shadow. This is the new onDraw() code:
#Override
protected void onDraw(Canvas canvas) {
int radius = 4;
int padding = 4;
RectF frame = new RectF(padding, padding, getWidth() - padding, getHeight() - padding);
Path clipPath = new Path();
clipPath.addRoundRect(frame, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
// add inner shadow
}
I can see two alternatives:
1) To properly pre-scale the ImageView's bitmap. But where is the best place to do it? In it's constructor? In the onDraw() method where the framework seems to be doing it? Is the framework even resizing any bitmap or is there another way to draw a scaled image on the canvas without being bad for performance?
2) To add the inner shadow layer on top of what the super.onDraw() is drawing so far, but I'm running out of ideas on how to do this.
Any help would be appreciated.
Thanks!
Take a look at Eric's (from squareup) presentation material from Oreilly's AndoridOpen Conference last year in his lecture titled Beautiful Android
It has a ton of info that should help you out.
I wish they had the video of his presentation somewhere. I could not find it. So sorry.
EDIT : Thanks to #mykola for the yt link