Como posso adicionar o novo " botão de ação flutuante " entre dois widgets / layouts

? Waza_Be @ | Original: StackOverFlow
---

Eu acho que você tem visto as novas diretrizes de design do Android, com o novo " botão de ação flutuante " aka " FAB "

Por exemplo, este botão vermelho :

Como posso adicionar o novo " botão de ação flutuante " entre dois widgets / layouts

A minha pergunta soa estúpido, e eu já tentei um monte de coisas, mas o que é a melhor maneira de colocar este botão na intersecção de dois layouts ?

No exemple acima, esse botão está perfeitamente posicionada entre o que podemos imaginar ser um ImageView e um RelativeLayout .

Eu já tentei um monte de ajustes, mas estou convencido de que há uma maneira correta de fazê-lo.

Muito para compartilhar suas idéias Graças .

---

Top 5 Responder

1Dre @

Acabo de assistir a seguinte conversa e acho que pode explicar o processo .

https://www.youtube.com/watch?v=ctzWKRlTYHQ?t=18m44s

O IMAGEVIEW top segue um keyline daí o posicionamento dos botões pode ser feito facilmente . Por exemplo topo ImageView é 112dp no celular ( 56dp x 2). Se a FAB é 56dp então ele precisa ter layout_marginTop de 56dp ( altura da FAB) + 28dp ( metade da altura da segunda caixa de 56dp ) = 84dp .

Este é apenas o que eu entendi . Espero que isso faz sentido e ajuda a você de alguma forma .

2Oleksii Kropachov @

Tente https://github.com/shamanland/floating-action-button ( http://shamanland.github.io/floating-action-button/com/shamanland/fab/FloatingActionButton.html ):

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

Ele fornece único widget com capacidade para personalizá-lo via Tema, xml ou java- código.

Como posso adicionar o novo " botão de ação flutuante " entre dois widgets / layouts  Como posso adicionar o novo " botão de ação flutuante " entre dois widgets / layouts

É muito simples de usar. Lá estão disponíveis normal e mini implementação de acordo com http://www.google.com/design/spec/patterns/promoted-actions.html padrão .

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Tente compilar o https://github.com/shamanland/floating-action-button . Há exemplo exaustiva: temas claros e escuros, usando com ListView, alinhe entre duas visões .

3nathandrake @

Deparei com este post enquanto i tentou implementá-lo em meu projeto http://www.bignerdranch.com/blog/floating-action-buttons-in-android-l/ o que eu gosto sobre isso é ele não requerem o uso de bibliotecas de terceiros.

4Hugh Jeffner @

Parece que a forma mais limpa neste exemplo é :

Use a RelativeLayout Position the 2 adjacent views one below the other Align the FAB to the parent right/end and add a right/end margin Align the FAB to the bottom of the header view and add a negative margin, half the size of the FAB including shadow

Exemplo (adaptado de implementação shamanland ), assuma FAB é alta 64dp incluindo sombra

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <whatever.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>
5Dalvik VM @

Você pode importar o projeto de amostra do Google no Android Estúdio clicando em Arquivo > Importar Sample ...

Como posso adicionar o novo " botão de ação flutuante " entre dois widgets / layouts

Este exemplo contém uma vista FloatingActionButton que herda de FrameLayout .