Ajustar o tamanho do ícone do botão de ação flutuante (fab)

172

Botão flutuante O novo botão de ação flutuante deve ser 56dp x 56dp e o ícone dentro dele deve ser 24dp x 24dp . Portanto, o espaço entre o ícone e o botão deve ser 16dp .

<ImageButton
    android:id="@+id/fab_add"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_gravity="bottom|right"
    android:layout_marginBottom="16dp"
    android:layout_marginRight="16dp"
    android:background="@drawable/ripple_oval"
    android:elevation="8dp"
    android:src="@drawable/ic_add_black_48dp" />

ripple_oval.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item>
        <shape android:shape="oval">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

E este é o resultado que obtive :
Resultado do botão flutuante
usei o ícone de \ material-design-icons-1.0.0 \ content \ drawable-hdpi \ ic_add_black_48dp.png
https://github.com/google/material-design-icons/releases /tag/1.0.1

Como fazer com que o tamanho do ícone dentro do botão seja exatamente como descrito nas diretrizes?

http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button

vovahost
fonte
Possível duplicata de: stackoverflow.com/a/59455009/3974530
InsaneCat
@InsaneCat Talvez o contrário, porque a pergunta que você mencionou é mais recente que a minha.
vovahost

Respostas:

184

Como seu conteúdo é 24dp x 24dp, você deve usar o ícone 24dp . E defina android:scaleType="center"no ImageButton para evitar o redimensionamento automático.

Gaëtan M.
fonte
Você pode explicar ou soltar um link para algum site, por que, por exemplo, na pasta drawable-hdpi existem imagens _18dp.png, _24dp.png, _36dp.png, _48dp.png.
Vovahost
Não entendi sua pergunta, existem 18dp, 24dp, 36dp e 48dp para imagens de tamanhos diferentes.
precisa
Você se lembra dos antigos Android_Design_Icons que tinham apenas uma variante do ícone na pasta hdpi com 48px x 48px. Por que agora na pasta hdpi existem 4 resoluções diferentes para o mesmo ícone, ou seja, 27 px x 27 px, 36 px x 36 px, 54 px x 54 px, 72 px x 72 px?
vovahost
1
ImageButton é uma subclasse de ImageView então você tem uma attribut ScaleType e ScaleType padrão é ScaleType.FIT_CENTER
Gaëtan M.
4
Não funciona mais com com.android.support:support-v4:28.0.0-rc01
StarWind0
116

Faça esta entrada em dimens

<!--Floating action button-->
<dimen name="design_fab_image_size" tools:override="true">36dp</dimen>

Aqui 36dp é o tamanho do ícone no botão de ponto flutuante. Isso definirá o tamanho de 36dp para todos os ícones do botão de ação flutuante.

Atualizações conforme comentários

Se você deseja definir o tamanho do ícone para um determinado botão de ação flutuante, basta usar os atributos do botão de ação flutuante, como app: fabSize = "normal" e android: scaleType = "center".

  <!--app:fabSize decides size of floating action button You can use normal, auto or mini as per need-->
  app:fabSize="normal" 

  <!--android:scaleType decides how the icon drawable will be scaled on Floating action button. You can use center(to show scr image as original), fitXY, centerCrop, fitCenter, fitEnd, fitStart, centerInside.-->
  android:scaleType="center"
Abhishek
fonte
3
Era exatamente disso que eu precisava - simples e fácil. Obrigado por publicar.
Blisterpeanuts
1
Sim. Não funciona com github.com/Clans/FloatingActionButton . Ele funciona quando você estiver usando andróides FloatingActionButton
Abhishek
2
Sim, mas eu não quero fazer isso em todo o aplicativo!
StarWind0
@ StarWind0 Você precisa usar os atributos fabSize e scaleType se quiser solicitar um único botão de ação flutuante. Eu atualizei minha resposta.
precisa
110

Tente usar em app:maxImageSize="56dp"vez das respostas acima depois de atualizar sua biblioteca de suporte para a v28.0.0

Robin
fonte
1
De qualquer forma, você não consegue isso na versão 28.0.0, mas no androidx.
Khemraj
1
Eu não mudei para o AndroidX, é isso que estou usando: api 'com.android.support:design:28.0.0' #
Robin
3
Isso funcionou para mim, mas eu gostaria de obter mais informações para entender por que definir a maxIconSizealtera o tamanho do ícone.
stramin
45

Existem três principais atributos XML para FABs personalizados:

  • app:fabSize: "Mini" (40dp), "normal" (56dp) (padrão) ou "automático"
  • app:fabCustomSize: Isso decidirá o tamanho geral da FAB.
  • app:maxImageSize: Isso decidirá o tamanho do ícone.

Exemplo:

app:fabCustomSize="64dp" 
app:maxImageSize="32dp"

O preenchimento FAB (o espaço entre o ícone e o círculo do plano de fundo, também conhecido como ondulação ) é calculado implicitamente por:

4-edge padding = (fabCustomSize - maxImageSize) / 2.0 = 16

Observe que as margens do fab podem ser definidas pelas android:marginpropriedades usuais da tag xml.

varun
fonte
27

As diretrizes de design definem dois tamanhos e, a menos que haja um motivo forte para se desviar do uso de qualquer um deles, o tamanho pode ser controlado com o fabSizeatributo XML do FloatingActionButtoncomponente.

Considere especificar usando app:fabSize="normal"ou app:fabSize="mini", por exemplo:

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/ic_done_white_24px"
   app:fabSize="mini" />
Cristian Almstrand
fonte
15
<ImageButton
        android:background="@drawable/action_button_bg"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:padding="16dp"
        android:src="@drawable/ic_add_black_48dp"
        android:scaleType="fitXY"
        android:elevation="8dp"/>

Com o plano de fundo que você forneceu, resulta no botão abaixo no meu dispositivo (Nexus 7 2012)

insira a descrição da imagem aqui

Parece bom para mim.

Chris K.
fonte
7
Coloquei o estofamento, mas não faz nada. E o preenchimento correto seria 16 dp não 32dp
vovahost
10

Qual é o seu objetivo?

Se definir o tamanho da imagem do ícone como maior:

  1. Certifique-se de ter um tamanho de imagem maior que o tamanho desejado (so you can set max image size for your icon)

  2. O tamanho da imagem do meu ícone de destino é 84dp e o tamanho fabuloso é 112dp :

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src= <image here>
        app:fabCustomSize="112dp"
        app:fabSize="auto"
        app:maxImageSize="84dp" />
Shem Alexis Chavez
fonte
6

Se você estiver usando o androidx 1.0.0 e um tamanho fab personalizado, precisará especificar o tamanho personalizado usando

app:fabCustomSize="your custom size in dp"

Por surdo, o tamanho é 56dp e há outra variação que é o tamanho pequeno, que é 40dp; se você estiver usando algo, precisará especificá-lo para que o preenchimento seja calculado corretamente.

Suhaib Roomy
fonte
Era exatamente isso que eu estava procurando! Você nem precisa definir layout_widthe layout_height. Isso simplesmente funciona. Isto também está disponível emcom.android.support:design:28.0.0
PNDA 17/02/19
4

Como FABé ImageViewassim Você pode usar o scaleTypeatributo para alterar o tamanho do ícone da mesma forma ImageView. O padrão scaleTypepara a FABé fitCenter. Você pode usar centere centerInsidetornar o ícone pequeno e grande, respectivamente.

Todos os valores para o scaleTypeatributo são - center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXYe matrix.

Consulte https://developer.android.com/reference/android/widget/ImageView.ScaleType.html para obter mais detalhes.

lRadha
fonte
3

fora da resposta do @ IRadha na configuração de desenho vetorial android:height="_dp" e definição do tipo de escala para android:scaleType="center" definir o desenho para qualquer tamanho definido

Daniel Dube
fonte
2

Você pode jogar com as seguintes configurações do FloatingActionButton: android: scaleType e app: maxImageSize. Quanto a mim, eu tenho um resultado desejável se android: scaleType = "centerInside" e app: maxImageSize = "56dp".

Andrew Glukhoff
fonte