Floating button

3

How to put a floating button, like Gmail, which is to write a new email in the application?

Is it possible to change the icon of this button via programming?

    
asked by anonymous 19.01.2015 / 02:54

3 answers

2

From SDK 21, you can use ViewOutlineProvider :

1) Create a layout within a layout-v21 folder in your project by entering a ImageButton :

<ImageButton
    android:id="@+id/floatingButton"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:contentDescription="description"
    android:background="@drawable/oval_ripple"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:elevation="4dp"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:src="@android:drawable/ic_delete" />

2) Create a simple Ripple to give effect to the button ( oval_ripple.xml in the drawable-v21 folder of your project):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary" />
        </shape>
    </item>
</ripple>

3) Now in your code:

...
//Verificando se o aparelho está no V21 ou não
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
    initLFloatingButtons();
} else{
    //implementações abaixo
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void initLFloatingButtons() {

    int size = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 56, getResources().getDisplayMetrics());

    final ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
        @Override
        public void getOutline(View view, Outline outline) {
            outline.setOval(0, 0, size, size);
        }
    };

    ImageButton floatingButton = ((ImageButton) findViewById(R.id.floatingButton));
    floatingButton.setOutlineProvider(viewOutlineProvider);
    floatingButton.setClipToOutline(true);
    floatingButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //Seu evento
        }
    });
}

For you to use a Floating Button before v21, recommend you use this repository . You can import the library into your project or simply select the files that interest you inside the repository.

To implement (if you have extracted the classes for your project), you simply:

<br.com.seuprojeto.seupackage.FloatingActionButton
    android:id="@+id/floatingButton"
    android:layout_width="76dp"
    android:layout_height="76dp"
    android:contentDescription="description"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_marginBottom="8dp"
    android:layout_marginRight="8dp" />

And in your class:

...
FloatingActionButton floatingButton = findViewById(R.id.floatingButton);
floatingButton.setSize(FloatingActionButton.SIZE_NORMAL);
floatingButton.setColorNormalResId(R.color.sua_cor_normal);
floatingButton.setColorPressedResId(R.color.sua_cor_pressionada);
floatingButton.setIcon(R.drawable.seu_drawable);
floatingButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        //Seu evento
    }
});

Edit

Use the FloatingActionButton of Android's own design library .

    
19.01.2015 / 14:57
2

This to xml

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|start"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/stat_notify_chat"
    app:layout_anchor="@+id/item_detail_container"
    app:layout_anchorGravity="top|end" />

and add this to the code

 FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
            fab.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                 // adicione sua ação    
                }
            });

Or start a project already with the ready button

    
28.05.2016 / 06:03
1

Use FloatingActionButton , and use graph% ShapeDrawable .

Another simpler way to change the image or button, would be through setImageResource , according to the image to do certain method.

    
19.01.2015 / 13:58