How Do I Create An Android Material Design Ui Widget?

I did read new android material design guide but i am not able to find anything about how to create this UI widget(element). Apps like Gmail, S converter etc has updated their apps

Solution 1:

You are talking about the Floating Action Button. Bottom line is: there is no native "FAB" widget (at least for now), it is a custom layout that must be implemented.

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

Here's also the code to create one. It is from this gist.

publicclassFloatingActionButtonextendsView {

    Context context;
    Paint mButtonPaint;
    Paint mDrawablePaint;
    Bitmap mBitmap;
    booleanmHidden=false;

    publicFloatingActionButton(Context context) {
        super(context);
        this.context = context;
        init(Color.WHITE);
    }

    publicvoidinit(int color) {
        setWillNotDraw(false);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);

        mButtonPaint = newPaint(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 = newPaint(Paint.ANTI_ALIAS_FLAG);

        invalidate();
    }

    @OverrideprotectedvoidonDraw(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);
    }

    @OverridepublicbooleanonTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            setAlpha(1.0f);
        } elseif (event.getAction() == MotionEvent.ACTION_DOWN) {
            setAlpha(0.6f);
        }
        returnsuper.onTouchEvent(event);
    }

    publicvoidsetColor(int color) {
        init(color);
    }

    publicvoidsetDrawable(Drawable drawable) {
        mBitmap = ((BitmapDrawable) drawable).getBitmap();
        invalidate();
    }

    publicvoidhide() {
        if (!mHidden) {
            ObjectAnimatorscaleX= ObjectAnimator.ofFloat(this, "scaleX", 1, 0);
            ObjectAnimatorscaleY= ObjectAnimator.ofFloat(this, "scaleY", 1, 0);
            AnimatorSetanimSetXY=newAnimatorSet();
            animSetXY.playTogether(scaleX, scaleY);
            animSetXY.setInterpolator(newAccelerateInterpolator());
            animSetXY.setDuration(100);
            animSetXY.start();
            mHidden = true;
        }
    }

    publicvoidshow() {
        if (mHidden) {
            ObjectAnimatorscaleX= ObjectAnimator.ofFloat(this, "scaleX", 0, 1);
            ObjectAnimatorscaleY= ObjectAnimator.ofFloat(this, "scaleY", 0, 1);
            AnimatorSetanimSetXY=newAnimatorSet();
            animSetXY.playTogether(scaleX, scaleY);
            animSetXY.setInterpolator(newOvershootInterpolator());
            animSetXY.setDuration(200);
            animSetXY.start();
            mHidden = false;
        }
    }

    publicbooleanisHidden() {
        return mHidden;
    }

    publicstaticclassBuilder {
        private FrameLayout.LayoutParams params;
        privatefinal Activity activity;
        intgravity= Gravity.BOTTOM | Gravity.RIGHT; // default bottom right
        Drawable drawable;
        intcolor= Color.WHITE;
        intsize=0;
        floatscale=0;

        /**
         * Constructor using a context for this builder and the
         * {@link FloatingActionButton} it creates
         * @param context
         */publicBuilder(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 = newFrameLayout.LayoutParams(size, size);
            params.gravity = gravity;

            this.activity = context;
        }

        /**
         * Sets the FAB gravity.
         */public Builder withGravity(int gravity) {
            this.gravity = gravity;
            returnthis;
        }

        /**
         * 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));
            returnthis;
        }

        /**
         * Sets the FAB drawable.
         *
         * @param drawable
         */public Builder withDrawable(final Drawable drawable) {
            this.drawable = drawable;
            returnthis;
        }

        /**
         * Sets the FAB color.
         *
         * @param color
         */public Builder withColor(finalint color) {
            this.color = color;
            returnthis;
        }

        /**
         * Sets the FAB size.
         *
         * @param size
         * @return
         */public Builder withSize(int size) {
            size = (int) (size * scale + 0.5f);
            params = newFrameLayout.LayoutParams(size, size);
            returnthis;
        }

        /**
         * Creates a {@link FloatingActionButton} with the
         * arguments supplied to this builder.
         */public FloatingActionButton create() {
            finalFloatingActionButtonbutton=newFloatingActionButton(activity);
            button.setColor(this.color);
            button.setDrawable(this.drawable);
            params.gravity = this.gravity;
            ViewGrouproot= (ViewGroup) activity.findViewById(android.R.id.content);
            root.addView(button, params);
            return button;
        }
    }

}

Then you would add like this:

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