How to create a user interface widget for Android?

Question

I read the new material design guide for Android, but I can not find anything about how to create this widget (element) of the user interface. Applications such as Gmail, S converter, etc., have updated their applications to support the new material design.

I have added a screenshot. Here is a link to it. due to low points I can’t put a picture. sorry about that

Any suggestions on how to do this?

Answer 1

You are talking about a floating action button. Bottom line: there is no "FAB" widget (at least for now), it is a custom layout that needs to be implemented.

If you really want to fully implement the Material Design app, I recommend that you take a look at the Google 2014 I / O app . They have an example FAB layout here .

Here is the code to create it. It was from this gist that I got from this post .

public class FloatingActionButton extends View { Context context; Paint mButtonPaint; Paint mDrawablePaint; Bitmap mBitmap; boolean mHidden = false; public FloatingActionButton(Context context) { super(context); this.context = context; init(Color.WHITE); } public void init(int color) { setWillNotDraw(false); setLayerType(View.LAYER_TYPE_SOFTWARE, null); mButtonPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mButtonPaint.setColor(color); 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); invalidate(); } @Override protected void onDraw(Canvas canvas) { setClickable(true); canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.6), mButtonPaint); canvas.drawBitmap(mBitmap, (getWidth() - mBitmap.getWidth()) / 2, (getHeight() - mBitmap.getHeight()) / 2, 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 setColor(int color) { init(color); } public void setDrawable(Drawable drawable) { mBitmap = ((BitmapDrawable) drawable).getBitmap(); invalidate(); } public void hide() { 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(new AccelerateInterpolator()); animSetXY.setDuration(100); animSetXY.start(); mHidden = true; } } public void show() { 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(new OvershootInterpolator()); animSetXY.setDuration(200); animSetXY.start(); mHidden = false; } } public boolean isHidden() { return mHidden; } public static 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; /** * Constructor using a context for this builder and the * {@link FloatingActionButton} it creates * @param context */ public Builder(Activity context) { scale = context.getResources().getDisplayMetrics().density; // The calculation (value * scale + 0.5f) is a widely used to convert to dps to pixel // units based on density scale // see <a href="http://developer.android.com/guide/practices/screens_support.html"> // developer.android.com (Supporting Multiple Screen Sizes)</a> size = (int) (72 * scale + 0.5f); // default size is 72dp by 72dp params = new FrameLayout.LayoutParams(size, size); params.gravity = gravity; this.activity = context; } /** * Sets the FAB gravity. */ public Builder withGravity(int gravity) { this.gravity = gravity; return this; } /** * Sets the FAB margins in dp. */ public Builder withMargins(int left, int top, int right, int bottom) { params.setMargins((int) (left * scale + 0.5f), (int) (top * scale + 0.5f), (int) (right * scale + 0.5f), (int) (bottom * scale + 0.5f)); return this; } /** * Sets the FAB drawable. * * @param drawable */ public Builder withDrawable(final Drawable drawable) { this.drawable = drawable; return this; } /** * Sets the FAB color. * * @param color */ public Builder withColor(final int color) { this.color = color; return this; } /** * Sets the FAB size. * * @param size * @return */ public Builder withSize(int size) { size = (int) (size * scale + 0.5f); params = new FrameLayout.LayoutParams(size, size); return this; } /** * Creates a {@link FloatingActionButton} with the * arguments supplied to this builder. */ public FloatingActionButton create() { final FloatingActionButton button = new FloatingActionButton(activity); button.setColor(this.color); button.setDrawable(this.drawable); params.gravity = this.gravity; ViewGroup root = (ViewGroup) activity.findViewById(android.R.id.content); root.addView(button, params); return button; } } } 

Then you would add like this:

 FloatingActionButton mFab = new FloatingActionButton.Builder(this) .withColor(getResources().getColor(R.color.accent_color)) .withDrawable(getResources().getDrawable(R.drawable.fab_icon)) .withSize(72) .withMargins(0, 0, 16, 16) .create();