3

Como colocar um botão flutuante, tipo o do Gmail, que é pra escrever um novo e-mail, na aplicação?

É possível alterar o ícone deste botão via programação?

1

3 Respostas 3

2

A partir do SDK 21, você pode utilizar o ViewOutlineProvider:

1) Crie um layout dentro de uma pasta layout-v21 no seu projeto, inserindo um 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) crie um Ripple simples para dar o efeito no botão (oval_ripple.xml na pasta drawable-v21 de seu projeto):

<?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) Agora, em seu código:

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

Para você utilizar um Floating Button antes do v21, recomendo você utilizar este repositório. Você pode importar a biblioteca em seu projeto ou simplesmente selecionar os arquivos que te interessam dentro do repositório.

Para implementar (caso você tenha extraido as classes para seu projeto), você simplesmente:

<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" />

E em sua classe:

...
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

Utilize o FloatingActionButton da biblioteca de design do próprio Android.

2

Isso ao 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" />

e adicione isto ao código

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

Ou inicie um projeto já com o botão pronto

1

Utilize FloatingActionButton, e utlizar da parte gráfica ShapeDrawable.

Outra forma mais simples de trocar a imagem ou botão, seria através do setImageResource, de acordo com a imagem fazer determinado método.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .