L Android - Botão Fab

? theyanu @ | Original: StackOverFlow
---

Será que o Google já lançou um estilo definido ou um componente para este novo botão FAB circular ou devo implementar o projeto por conta própria?

O botão é descrito aqui: http://www.google.com/design/spec/components/buttons.html#

Thanks, Yanu

Enquanto espera, eu criei para meu próprio :

layout.xml

    <Button
    style="?android:attr/buttonStyleSmall"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="+"
    android:textSize="40sp"
    android:background="@drawable/ripple"
    android:id="@+id/fabbutton"
    android:layout_margin="@dimen/activity_horizontal_margin"
    android:elevation="3dp"
    android:paddingBottom="16dp"
    android:fontFamily="sans-serif-light"
    android:layout_alignParentEnd="true"
    android:layout_gravity="right|bottom" />

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
 <ripple android:color="#ffb300" xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@drawable/fab"></item>
</ripple>

fab.xml

<?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="@color/accentColor" />
</shape>

Activity.java

    import android.graphics.Outline;
    ...
    Button fab = (Button) rootView.findViewById(R.id.fabbutton);

    Outline mOutlineCircle;
    int shapeSize = getResources().getDimensionPixelSize(R.dimen.shape_size);
    mOutlineCircle = new Outline();
    mOutlineCircle.setRoundRect(0, 0, shapeSize, shapeSize, shapeSize / 2);

    fab.setOutline(mOutlineCircle);
    fab.setClipToOutline(true);

Este código será mostrado como erro no android estúdio v0.8.1, assim como outros componentes l android . Ele será corrigido na próxima versão .

Result:

L Android - Botão Fab

---

Top 5 Responder

1Daniele Segato @

De acordo com Adam Powell e Chet Haase eles não criar um widget para o botão FAB causar é um componente muito fácil de reproduzir .

Havia uma pergunta no discurso Google IO 2014 "Google I / O 2014 - ciência Material: desenvolvimento de aplicações Android com design de material ", no final do discurso (a cerca de 37:50 ), não era exatamente a essa pergunta, você pode ouvir -lo aqui :  https://www.youtube.com/watch?v=lSH9aKXjgt8#t=2280

Chet Haase dizer que há um RoundedBitmapDrawable (eu não verificado se é esse o nome ) que já deve fazer o trabalho de definição do Contorno .

Mas você pode fazê-lo com seu próprio drawable, definir um Elevation a ele e definir um esboço círculo de forma programática.

Isso deve lhe dar o botão redondo com sombra no L release. Mas eu acho que você vai ter que construir a Sombra pré -L em seu próprio país .

I deve verificar o código para CardView para ver como ele se reproduzir a sombra pré -L. Eu provavelmente vou fazer isso, mas não tenho tempo agora. Se ninguém pop com os detalhes que vou fazer depois de eu ter encontrado tempo para ir e check- up.

EDIT:

Gabriele Mariotti ( ver sua resposta abaixo, obrigado) adicionado algum código para mostrar-lhe como fazê-lo .

Graças a shomeser comentários, ele escreveu uma biblioteca para fazer o botão fab :

https://github.com/shamanland/floating-action-button

To use it:

dependencies {
    compile 'com.shamanland:fab:0.0.3'
}

Você também pode ler a sua resposta a outra pergunta: http://stackoverflow.com/questions/24459352/how-can-i-add-the-new-floating-action-button-between-two-widgets-layouts/25098626#25098626

2Gabriele Mariotti @

Confira a resposta da Daniele .

ATUALIZADO: 2014/02/12 com Android código de 5

Além disso, você pode adicionar e stateListAnimator à sua Button:

<Button
 android:stateListAnimator="@anim/anim"
/>

Onde anim.xml é :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_enabled="true"
        android:state_pressed="true">
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_elevation"
            android:valueTo="@dimen/button_press_elevation"
            android:valueType="floatType" />
    </item>
    <item>
        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueFrom="@dimen/button_press_elevation"
            android:valueTo="@dimen/button_elevation"
            android:valueType="floatType" />
    </item>
</selector>

Dimens.xml is

<resources>
    <dimen name="fab_size">56dp</dimen>

    <dimen name="button_elevation">2dp</dimen>
    <dimen name="button_press_elevation">4dp</dimen>
</resources>

Sobre Contorno mencionado por Daniele . Adicione o atributo elevação no seu Button, e definir o contorno via código:

   <ImageButton
        android:background="@drawable/ripple"
        android:stateListAnimator="@anim/anim"
        android:src="@drawable/ic_action_add"
        android:elevation="4dp"
        />

About Outline:

public class MainActivity extends Activity {

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

        //Outline: OLD METHOD IN L-PREVIEW
        //int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
        //Outline outline = new Outline();
        //outline.setOval(0, 0, size, size);
        //findViewById(R.id.fab).setOutline(outline);

        Button fab = (Button) findViewById(R.id.fab);
        ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
           @Override
           public void getOutline(View view, Outline outline) {
              // Or read size directly from the view's width/height
              int size = getResources().getDimensionPixelSize(R.dimen.fab_size);
              outline.setOval(0, 0, size, size);
           }
        };
        fab.setOutlineProvider(viewOutlineProvider);
    }

}

L Android - Botão Fab

3Roman @

Desde Labels recurso FAB (como no Evernote ou aplicativos Caixa de Entrada ) foi adicionada a este impressionante https://github.com/futuresimple/android-floating-action-button sinta-se livre para usá-lo :

Dependência Gradle :

    compile 'com.getbase:floatingactionbutton:1.3.0'

Layout.xml:

     <com.getbase.floatingactionbutton.FloatingActionsMenu
        android:id="@+id/multiple_actions"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action A"
            fab:fab_colorPressed="@color/white_pressed"/>

        <com.getbase.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            fab:fab_colorNormal="@color/white"
            fab:fab_title="Action B"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>

menu_labels_style.xml :

    <style name="menu_labels_style">
        <item name="android:background">@drawable/fab_label_background</item>
        <item name="android:textColor">@color/white</item>
    </style>

fab_label_background.xml :

    <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/black_semi_transparent"/>
    <padding
        android:left="16dp"
        android:top="4dp"
        android:right="16dp"
        android:bottom="4dp"/>
    <corners
        android:radius="2dp"/>
</shape>

Enjoy!