-
-
Save Jogan/9def6110edf3247825c9 to your computer and use it in GitHub Desktop.
| FloatingActionButton fabButton = new FloatingActionButton.Builder(this) | |
| .withDrawable(getResources().getDrawable(R.drawable.ic_action_add)) | |
| .withButtonColor(Color.WHITE) | |
| .withGravity(Gravity.BOTTOM | Gravity.RIGHT) | |
| .withMargins(0, 0, 16, 16) | |
| .create(); |
Took 2 days to figure out. That helped thank you.
Hi,
I am trying to make a layout with top and bottom view and FAB on border of both of the layouts.
This FAB converts dp to pixel for setting margin i want to add a FAB between layouts border and it always go slightly up side can you please assist me on that that would be very helpful.
Hey, thanks for this, I improved this a little bit by adding a character, settings it's size and color, and also xml support and programmatically adding it to a custom layout. Code:
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.OvershootInterpolator;
import android.widget.FrameLayout;
public class FloatingActionButton extends View {
final static OvershootInterpolator overshootInterpolator = new OvershootInterpolator();
final static AccelerateInterpolator accelerateInterpolator = new AccelerateInterpolator();
Context context;
Paint mButtonPaint;
Paint mDrawablePaint;
Bitmap mBitmap;
boolean mHidden = false;
private FloatingActionButton(Context context) {
super(context);
this.context = context;
init(Color.WHITE);
}
public FloatingActionButton(Context context, AttributeSet attrs){
super(context, attrs);
this.context = context;
TypedArray a = context.getTheme().obtainStyledAttributes(
attrs,
R.styleable.FloatingActionButton,
0, 0);
try {
int color = a.getColor(R.styleable.FloatingActionButton_withColor, Color.WHITE);
Drawable icon = a.getDrawable(R.styleable.FloatingActionButton_withDrawable);
char c = attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "text").charAt(0);
float size = a.getDimension(R.styleable.FloatingActionButton_textSize, 24f);
int tColor = a.getColor(R.styleable.FloatingActionButton_textColor, Color.WHITE);
init(color);
if(icon != null)
setFloatingActionButtonDrawable(icon);
setCharacterSize(size);
setCharacterColor(tColor);
setCharacter(c);
}finally {
a.recycle();
}
}
public void setFloatingActionButtonColor(int FloatingActionButtonColor) {
init(FloatingActionButtonColor);
}
public void setFloatingActionButtonDrawable(Drawable FloatingActionButtonDrawable) {
mBitmap = ((BitmapDrawable) FloatingActionButtonDrawable).getBitmap();
invalidate();
}
private char text= ' ';
private float textY;
public void setCharacter(char c){
this.text = c;
Rect r = new Rect();
mDrawablePaint.getTextBounds(c + "", 0, 1, r);
int h = r.height();
textY = (getHeight() + h * 2);
Log.d("ENV", "TEXTY: " + textY);
invalidate();
}
public void setCharacterColor(int color){
mDrawablePaint.setColor(color);
invalidate();
}
public void setCharacterSize(float size){
mDrawablePaint.setTextSize(size);
setCharacter(text);
invalidate();
}
public void init(int FloatingActionButtonColor) {
setWillNotDraw(false);
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
mButtonPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mButtonPaint.setColor(FloatingActionButtonColor);
mButtonPaint.setStyle(Paint.Style.FILL);
mButtonPaint.setShadowLayer(10.0f, 0.0f, 3.5f, Color.argb(100, 0, 0, 0));
mDrawablePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mDrawablePaint.setTextAlign(Paint.Align.CENTER);
mDrawablePaint.setLinearText(true);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
setClickable(true);
canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.6), mButtonPaint);
if(mBitmap != null)
canvas.drawBitmap(mBitmap, (getWidth() - mBitmap.getWidth()) / 2, (getHeight() - mBitmap.getHeight()) / 2, mDrawablePaint);
canvas.drawText(text + "", getWidth() / 2, textY, mDrawablePaint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
setAlpha(1.0f);
} else if (event.getAction() == MotionEvent.ACTION_DOWN) {
setAlpha(0.6f);
}
return super.onTouchEvent(event);
}
public void hideFloatingActionButton() {
if (!mHidden) {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1, 0);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1, 0);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(scaleX, scaleY);
animSetXY.setInterpolator(accelerateInterpolator);
animSetXY.setDuration(100);
animSetXY.start();
mHidden = true;
}
}
public void showFloatingActionButton() {
if (mHidden) {
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 0, 1);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 0, 1);
AnimatorSet animSetXY = new AnimatorSet();
animSetXY.playTogether(scaleX, scaleY);
animSetXY.setInterpolator(overshootInterpolator);
animSetXY.setDuration(200);
animSetXY.start();
mHidden = false;
}
}
public boolean isHidden() {
return mHidden;
}
static public class Builder {
private FrameLayout.LayoutParams params;
private final Activity activity;
int gravity = Gravity.BOTTOM | Gravity.RIGHT; // default bottom right
Drawable drawable;
int color = Color.WHITE;
int size = 0;
float scale = 0;
public Builder(Activity context) {
scale = context.getResources().getDisplayMetrics().density;
size = convertToPixels(72, scale); // default size is 72dp by 72dp
params = new FrameLayout.LayoutParams(size, size);
params.gravity = gravity;
this.activity = context;
}
/**
* Sets the gravity for the FAB
*/
public Builder withGravity(int gravity) {
this.gravity = gravity;
return this;
}
/**
* Sets the margins for the FAB in dp
*/
public Builder withMargins(int left, int top, int right, int bottom) {
params.setMargins(
convertToPixels(left, scale),
convertToPixels(top, scale),
convertToPixels(right, scale),
convertToPixels(bottom, scale));
return this;
}
/**
* Sets the FAB drawable
*/
public Builder withDrawable(final Drawable drawable) {
this.drawable = drawable;
return this;
}
/**
* Sets the FAB color
*/
public Builder withButtonColor(final int color) {
this.color = color;
return this;
}
/**
* Sets the FAB size in dp
*/
public Builder withButtonSize(int size) {
size = convertToPixels(size, scale);
params = new FrameLayout.LayoutParams(size, size);
return this;
}
private char c = ' ';
public Builder withChar(char c){
this.c = c;
return this;
}
private float charS = 32f;
public Builder withCharSize(float size){
charS = size * scale;
return this;
}
private int charColor = Color.BLACK;
public Builder withCharColor(int color){
charColor = color;
return this;
}
public FloatingActionButton create(int layoutId) {
final FloatingActionButton button = new FloatingActionButton(activity);
button.setFloatingActionButtonColor(this.color);
button.setFloatingActionButtonDrawable(this.drawable);
button.setCharacter(c);
button.setCharacterColor(charColor);
button.setCharacterSize(charS);
params.gravity = this.gravity;
ViewGroup root = (ViewGroup) activity.findViewById(layoutId);
root.addView(button, params);
return button;
}
// The calculation (value * scale + 0.5f) is a widely used to convert to dps to pixel units
// based on density scale
// see developer.android.com (Supporting Multiple Screen Sizes)
private int convertToPixels(int dp, float scale){
return (int) (dp * scale + 0.5f) ;
}
}
}
And in attrs.xml:
Enjoy!
how to hide the button when we don't need it? i can't call it from other activity
Upon adding a FAB using your technique I see a thin translucent ring around the actual image. I tried removing the margins and shadowlayer but it didn't work. Could you suggest how this can be removed?
how can i set an OnClickListener?
Hey i import these code in my sample project but it didn't work on Pre-Lollipop device, Please tell me how i able to see these button on devices below Lollipop...?
Please reply me ASAP
@MatBenetti the same way you would set an OnClickListener on any other view. fabButton.setOnClickListener
I got the button working. How do you add functionalities like adding things that will appear once clicked?
fabButton.setOnClickListener(new View.OnClickListener() {
@OverRide
public void onClick(View v) {
Intent i = new Intent(MainActivity.this, tabs.class);
startActivity(i);
}
});
i'mm having a problem with FAB overlapping my toolbar and its items
Hi! How i can add this fab button in layout/activity_simple.xml file?
Very nice and easy to use especially in Eclipse.
Where is the location to put this code.. please help m just a novice...
@shahbaz-man how I can change the color dynamically
This code is awsom , simple and helping.. thanks @Jogan ,
Just need how to add icon , my fab is simple white .
builder cannot be resolved
@Jogan, you are the boss!!! thanks so much, so easy to use and light weight. @faisal find below a code snip that haddles ur request.
FloatingActionButton read = new FloatingActionButton.Builder(this)
.withDrawable(getResources().getDrawable(R.drawable.ic_read))
.withButtonColor(Color.YELLOW)
.withGravity(Gravity.BOTTOM | Gravity.RIGHT)
.withMargins(0, 0, 16, 145).create();
USE THE DESIGN SUPPORT LIBRARY - NOT THIS ANYMORE
Too good and simple code thanks a lot..
Nice code, question how can I bring up the menu.xml on onClick?
how to start action button when i click
awsome bosss !!!
how to add another button after clicking on this button
i need to add more button.
Thank you so much for this code.. @Jogan
Your code is very much helpful for us. Thanks 👍
thank you from mw. it's very helpful cause i need to create app project mobile offline.
Thanks alot!