Então, no seu build.gradle
arquivo, adicione isto:
compile 'com.android.support:design:27.1.1'
AndroidX Nota: o Google está introduzindo novas bibliotecas de extensão AndroidX para substituir as bibliotecas de suporte mais antigas. Para usar o AndroidX, primeiro verifique se você atualizou seu gradle.properties
arquivo , edite build.gradle
para definir compileSdkVersion
como 28
(ou superior) e use a linha a seguir, em vez da linha anterior compile
.
implementation 'com.google.android.material:material:1.0.0'
Em seguida, no seu themes.xml
ou no que styles.xml
for, certifique-se de definir isso - é a cor de destaque do seu aplicativo - e a cor do seu FAB, a menos que você o substitua (veja abaixo):
<item name="colorAccent">@color/floating_action_button_color</item>
No XML do layout:
<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>
Ou, se você estiver usando a biblioteca de materiais AndroidX acima, use o seguinte:
<RelativeLayout
...
xmlns:app="http://schemas.android.com/apk/res-auto">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/myFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:srcCompat="@drawable/ic_plus_sign"
app:elevation="4dp"
... />
</RelativeLayout>
Você pode ver mais opções nos documentos ( documentos materiais aqui) ( setRippleColor
, etc.), mas uma das notas é:
app:fabSize="mini"
Outro interessante - para alterar a cor de fundo de apenas um FAB, adicione:
app:backgroundTint="#FF0000"
(por exemplo, para alterá-lo para vermelho) no XML acima.
De qualquer forma, no código, após a exibição da Atividade / Fragmento ser inflada ....
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
Observações:
- Se você tiver um desses botões em uma "costura" que divide duas visualizações (usando um RelativeLayout, por exemplo) com, digamos, uma margem de layout inferior negativa para sobrepor a borda, você notará um problema: o tamanho da FAB é realmente muito diferente no pirulito vs. pré-pirulito. Na verdade, você pode ver isso no editor de layout visual do AS quando você alterna entre APIs - de repente "se esvai" quando você muda para o pré-pirulito. A razão para o tamanho extra parece ser que a sombra expande o tamanho da visualização em todas as direções. Portanto, você deve levar isso em conta quando estiver ajustando as margens da FAB se estiver perto de outras coisas.
Aqui está uma maneira de remover ou alterar o preenchimento se houver muito:
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
myFab.setLayoutParams(p);
}
Além disso, eu colocaria programaticamente a FAB na "costura" entre duas áreas em um RelativeLayout agarrando a altura da FAB, dividindo por duas e usando-a como deslocamento de margem. Mas myFab.getHeight () retornou zero, mesmo depois que a exibição foi inflada, parecia. Em vez disso, usei um ViewTreeObserver para obter a altura somente após o layout e depois definir a posição. Veja esta dica
aqui . Parecia assim:
ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
if (viewTreeObserver.isAlive()) {
viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
// not sure the above is equivalent, but that's beside the point for this example...
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
closeButton.setLayoutParams(params);
}
});
}
Não tenho certeza se esse é o caminho certo para fazê-lo, mas parece funcionar.
- Parece que você pode diminuir o espaço de sombra do botão diminuindo a elevação.
Se você deseja o FAB em uma "costura", pode usar layout_anchor
e layout_anchorGravity
aqui está um exemplo:
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="@id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ic_discuss"
android:layout_margin="@dimen/fab_margin"
android:clickable="true"/>
Lembre-se de que você pode fazer com que o botão salte automaticamente quando um Snackbar aparecer, envolvendo-o em um CoordinatorLayout .
Mais: