Reputation:

Floating Action Button

I have been trying to use Floating Action Button. I tried to use some of the resources suggested on here and the links were great; however, I couldn't use alot of them because of problems with dependicies. I tried to fix it but it got more messed up. Long story short, I use the following code as a way to bypass dependicies in my bundle. I got the button to work; however, I couldn't figure out how to have options to appear when the button is clicked. I tried on clicklistener and other ways but I always got an error.

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 com.williammora.openfeed.widgets.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;
    }

    public Builder withGravity(int gravity) {
        this.gravity = gravity;
        return this;
    }


    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;
    }


    public Builder withDrawable(final Drawable drawable) {
        this.drawable = drawable;
        return this;
    }
    public Builder withColor(final int color) {
        this.color = color;
        return this;
    }


    public Builder withSize(int size) {
        size = (int) (size * scale + 0.5f);
        params = new FrameLayout.LayoutParams(size, size);
        return this;
    }
    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;
    }
}

 }



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

MainActivity

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

Upvotes: 3

Answers (4)

Ashish Rawat

Reputation: 5829

You don't have to create FAB now, its already available, just follow this Link

you need to add

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

   <android.support.design.widget.FloatingActionButton
        android:id="@+id/myFAB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_plus_sign"
        app:elevation="4dp"
        ... />

</RelativeLayout>

and

FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        doMyThing();
    }
});

in code behind

For more detail follow : FloatingActionButton example with Support Library

Upvotes: 1

Gurinder Singh

Reputation: 857

This is how you create a floating action button.

build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

MainActivity.java

package com.ahotbrew.floatingactionbutton;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton FAB = (FloatingActionButton) findViewById(R.id.fab);
        FAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Would you like a coffee?", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Hope that complete example helps someone.

The example is from http://www.ahotbrew.com/android-floating-action-button/ It also shows how to place the button in other locations if interested.

Upvotes: 1

Vicky

Reputation: 1947

There is no need to create FloatingActionButton by yourself now. The new com.android.support:design:23.0.1 can do that for you. Just follow the below procedure.

1.Add this line compile 'com.android.support:design:23.0.1' in dependencies in your build.gradle in Android Studio

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:23.0.1'
}

2.To create a FloatingActionButton using the following xml file.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/YourEventsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!--Add other elements here-->

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_margin="16dp"
            android:src="@drawable/ic_add_white_24dp"
            app:elevation="6dp"
            app:fabSize="normal"
            app:pressedTranslationZ="12dp" />

</android.support.design.widget.CoordinatorLayout>

In MainActivity in onCreate method set setOnClickListener as follows

FloatingActionButton fab; fab = (FloatingActionButton) getView().findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Do what you want here } });

Upvotes: 1

Kaveesh Kanwal

Reputation: 1763

Just put compile 'com.android.support:design:22.2.1' in your module app dependencies.

In your xml:

<android.support.design.widget.FloatingActionButton
        style="@style/<your_style>"
        android:src="@drawable/<your_icon_src>"
        app:layout_anchor="@id/<if using along with list put your listID here>"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/fab"
        />

In you java:

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

Upvotes: 2

Floating Action Button

Answers (4)

Related Questions