FloatingActionButton Com Três Diferentes Libs, Material Design Android - Parte 6

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Android /FloatingActionButton Com Três Diferentes Libs, Material Design Android - Parte 6

FloatingActionButton Com Três Diferentes Libs, Material Design Android - Parte 6

Vinícius Thiengo
(9725) (44)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Opa, blz?

Nesse vídeo continuo com a série sobre Material Design no Android, dessa vez mostrando a utilização do FloatingActionButton utilizando no caso três diferentes libs, todas com características próprias e com seus prós e contras. Relembrando que é muito bom que você leia o meterial sobre FloatingActionButton nos guidelines do Material Design no Android. Bom, vamos aos comentários das libs utilizadas:

FloatingActionButton (com.melnykov.fab.FloatingActionButton): vantagem de ter suporte desde API 7 e a facilidade de implementação e uso. Contra, pouco customizável e apenas uma forma nativa de animação.

Action Button (com.software.shell.fab.ActionButton): vantagem de ter suporte desde API 9, escolha de animação para apresentação e remoção do FloatingActionButton na tela. Alto poder de customização, até mesmo o shadow é customizável por completo. Contra, aparentemente o método playShowAnimation() não tem a animação se movendo na mesma velocidade que quando utilizados os métodos show() e hide(), consequentemente dificutando a visulização da animação inicial na entrada da APP.

FloatingActionMenu (com.github.clans.fab.FloatingActionMenu): a possibilidade de animação (já ligada por padrão) e o uso de menu com outros FloatingActionButtons é a grande diferença em relação as outras libs. Contras, somente a partir da API 14 é que ele funcionará e o método setClosedOnTouchOutside() aparentemente não funciona apenas com a simples chamada a ele passando true como parâmetro de entrada.

Mesmo com os prós e contras das libs, todas são boas e podem lhe atender em seus projetos Android. Somente tome cuidado em quando utilizar o FloatingActionButton, pois como recomendei no inicio do texto a leitura do guideline dele, há uma série de regras em quando utilizá-lo e quando não. Basicamente ele deve ser a view que permitirá que a ação principal da tela seja executada e seu posicionamento e estilo devem ser os corretos na tela de acordo com o guideline. Sem mais delongas vou deixar você assistir ao vídeo.

O link para download do projeto se encontra logo abaixo no post.

Os links ara os vídeos anteriores da série Material Design no Android se encontram na sessão "Relacionado" desse post (a maioria deles).

Segue links das libs e outros apresentados no vídeo:

Página da lib FloatingActionButton de makovkastar no GitHub

Página da lib Floating Action Button Library for Android de shell-software no GitHub

Página da lib Floating Action Button de Clans no GitHub

Página de relatórios de uso das versões e estilos do Android pelo mundo

Página do MaterialDesignIcons

Vlw

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

RecyclerView, Material Design Android - Parte 2RecyclerView, Material Design Android - Parte 2Android
Animação, onLongPress e GridLayoutManager em RecyclerView, Material Design Android - Parte 3Animação, onLongPress e GridLayoutManager em RecyclerView, Material Design Android - Parte 3Android
Utilizando CardView, Material Design Android - Parte 4Utilizando CardView, Material Design Android - Parte 4Android
Utilizando NavigationDrawer, Material Design Android - Parte 5Utilizando NavigationDrawer, Material Design Android - Parte 5Android

Compartilhar

Comentários Facebook

Comentários Blog (44)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
17/11/2015
Opa Thiengo!

Eu to testando a lib clans, preciso desses menus quando clica no FAB...

Mas na animacao ta dando um bug muito estranho, o 'plus' no centro do FAB nao faz a mesma animacao que o FAB... ele nao some junto com o botao... ele sai como se fosse um slide em diagonal nessa direçao \. Nao sei o por que de nao estar sincronizado.

Queria testar usando a primeira animaçao que tem no video demo do clans tambem ( https://youtu.be/XngUY3PN1IQ ), pra poder analisar qual se encaixa melhor, porem nao consigo implementar essa animaçao... poderia me ajudar?

abraços
Responder
Vinícius Thiengo (0) (0)
29/11/2015
Fala Vitor, blz?
Qual foi a dificuldade na implementação do clans? Seguiu pelo Git tb (https://github.com/Clans/FloatingActionButton )? Abraço
Responder
Johnathan (1) (0)
05/10/2015
Olá Thiengo, você  teria  um vídeo explicando  como a utilização dos componentes do celular como Bluetooth, WIFI e etc.
Abraço.
Responder
Vinícius Thiengo (0) (0)
07/10/2015
Fala Johnathan, blz?
No Blog ainda não vídeos com Bluetooth e cia, mas checou esses exemplos na documentação (http://developer.android.com/guide/topics/connectivity/bluetooth.html - http://developer.android.com/reference/android/net/wifi/WifiManager.html )? Abraço
Responder
Augusto (2) (0)
28/09/2015
Olá Thiengo, gosto muito do seu material e está me auxiliando bastante em meu TCC. Cara, com esse floating action button é possível eu definir a posição dele???
Responder
Vinícius Thiengo (0) (0)
30/09/2015
Fala Augusto, blz?
Com esses desse vídeo não lembro se é possível coloca-los em qualquer lugar da tela, terá de testar. Porém o desse vídeo (http://www.thiengo.com.br/design-support-library-e-collapsingtoolbarlayout-material-design-android-parte-11 ) que é o nativo do Android (vem com a lib de support de Material Design no Android) vc tem mais flexibilidade quanto a customização, posicionamento na tela, alias esse ultimo é o que recomendo utilizar, pois ele é nativo. Abraço
Responder
22/09/2015
Iae Thiengo, blz? eu utilizo  WebView. Como posso implementar o scroll do RecycleView com ele(webview)?
Responder
Vinícius Thiengo (0) (0)
24/09/2015
Fala Elvis, blz?
Vc diz implementar o FloatingActionButton junto ao scroll do WebView? Se sim, provavelmente não tem como, devido a não ter listener de scroll no WebView (pesquise mais um pouco para ter certeza de que não tem), apesar de ele já ter o scroll nativo. Abraço
Responder
newrubson (1) (0)
12/09/2015
olá Thiago dúvida eu conseguir fazer o tudo exceto fazer com que ele faça o efeito quando fazer o scroll eu estou usando fragment dentro de XML onde está o floating button  .. tem como Me da uma luz :)
Responder
Vinícius Thiengo (0) (0)
12/09/2015
Fala NewRubson, blz?
Vinculou o FAB ao RecyclerView? Pois ele precisa saber quando realizar o efeito, que será disparado quando o Recycler for movimentado / scrolled. Só seguir o que foi feito no exemplo, sem erro. De qualquer forma dê uma olhada nesse FAB da lib de suporte ao Material Design no Android (http://www.thiengo.com.br/design-support-library-e-collapsingtoolbarlayout-material-design-android-parte-11 ), essa versão do FAB é a que recomendo por ela vir da lib de suporte nativa do Android. Abraço
Responder
Fernando (1) (0)
25/06/2015
Opa Thiengo, blz?
Estou com um problema no CardView, fiz uma lista usando o CardView e FloatingActionButton, esta funcionando, o problema ocorre ao carregar mais items, minha lista pode ou não conter imagens , parecidas com as imagens dos carros. Ao chegar no ultimo item da lista, se o mesmo tiver imagem, a verificação com o ' if ' para saber se o tamanho da lista é igual ao tamanho do layoutmanager sempre da false. Quando o ultimo item não exibe imagem funciona. Não sei se ficou claro , é algo difícil de explicar , aguardo alguma sugestão, enquanto isso vou fazendo testes para identificar o problema e postar aqui a solução, obrigado.
Responder
Vinícius Thiengo (0) (0)
26/06/2015
Fala Fernando, blz sim.
Utilize o LogCat para saber se realmente são os valores que não estão batendo no momento da comparação. Print no LogCat logo antes da comparação no IF. Pois por ser problema de lógica é difícil dar até mesmo um "chute"no que pode ser. Abraço
Responder
Fernando (1) (0)
29/06/2015
Obrigado Thiengo, consegui resolver com outro código, obrigado pelo retorno, esta de parabéns.
Responder
vitor.carmignoli (1) (0)
12/06/2015
Eae Thiengo, blz?
Estou com um pequeno problema, pois a cor do botão não muda, e fica só no vermelho,  sabe se pode ter alguma coisa com a lib?

E mais uma dúvida, totalmente fora do contexto, mas se vc souber pelo menos o começo já vai me ajudar muito, eu preciso criar um APP para abrir arquivos em formato PDF e EPUB, vc tem alguma ideia de por onde começar?

Desde já, Agradeço
Vlw.
Responder
Vinícius Thiengo (0) (0)
13/06/2015
Fala Vitor, blz?
Qual das libs está utilizando? Esse comportamento de não mudar de cor não é normal, somente se á algum bug na atualização da lib que está utilizando. Não sei se já viu, mas agora o Android tem uma lib de suporte para Material Design, essa lib inclui um FloatingButton que abordei nesse vídeo mais atual (http://www.thiengo.com.br/design-support-library-e-collapsingtoolbarlayout-material-design-android-parte-11 ).

Para leitor de EPUB dê uma olhada nesses links:
http://www.siegmann.nl/epublib
http://stackoverflow.com/questions/16615488/open-epub-from-uri-activitynotfoundexception-error-android

Para leitor de PDF veja esse link:
http://stackoverflow.com/questions/8221556/opening-pdf-file-programmatically-is-going-into-menu-page/8221594#8221594

Abraço
Responder
Flavio (2) (0)
25/05/2015
Obrigado pela resposta Thiego, a noite irei tentar e digo se funcionou.

Outra dificuldade que estou tendo é como desabilitar o botão Floating em novas Fragments.

Obrigado!
Responder
Vinícius Thiengo (1) (0)
25/05/2015
Flavio, se estiver com o script igual ao dos exemplos, basta sobrescrever o método setFloatingActionButton() que assim vc controla em qual fragment o floating vai aparecer. Abraço
Responder
Flavio (2) (0)
25/05/2015
Obrigado pela resposta Thiengo, desculpe a minha ignorância, mas de que forma eu seto o método para ele não aparecer na Fragmente.

Eu sobrescrevi o método dentro da fragment que eu criei, mas não sei como setar ela para não aparecer.


Obrigado!
Responder
Vinícius Thiengo (1) (0)
25/05/2015
Não instancie o Floating, apenas sobrescreva o método, deixe-o vázio. No caso, estou assumindo que vc está implementando o mesmo algoritmo desse vídeo (http://www.thiengo.com.br/material-dialog-correcao-bug-statusbar-e-acoes-nos-fragments-material-design-android-parte-7 ), pois nele fiz algumas modificações onde o FloatingActionButton é utilizado.
Responder
Flavio (1) (0)
26/05/2015
Boa noite Thiengo,

Deu certo amigo, eu passei o fab.hideMenuButton(true);  ao chamar a fragment, desta forma o botão some ao inicializar a fragment.

Obrigado amigo!
Responder
Flavio (3) (0)
25/05/2015
Bom dia Thiengo,

Primeiramente gostaria de agradecer pelos vídeos. Gostaria de saber como incluir a ação de chamar outra tela através das opções do Floating Action Button.

Obrigado!
Responder
Vinícius Thiengo (1) (0)
25/05/2015
Fala Flavio, blz?
Seguindo os listeners que coloquei no vídeo, coloque ao invés de Toasts o getActivity().startActivity( new Intent( getActivity() , SuaOutraActivity.class ) ). Abraço
Responder
Flavio (2) (0)
25/05/2015
Thiengo, funcionou do jeito que você mencionou, mas de qual forma eu chamaria uma Fragment?

Desta forma quando eu chama a Fragmente ele diz que ela não está declarada no Manifest e fragments não são declaráveis correto?

Obrigado!
Responder
Vinícius Thiengo (1) (0)
26/05/2015
Está chamando dessa forma:
BookReadingFragment frag = new BookReadingFragment();
FragmentTransaction ft = getActivity().getSupportFragmentManager().beginTransaction();
ft.replace(R.id.rl_container_left, frag);
ft.commit();
Pode acrescentar a pilha tb. Abraço
Responder
Flavio (1) (0)
26/05/2015
Deu certo Thiengo!!

Para funcionar tirei a primeira linha (BookReadingFragment frag = new BookReadingFragment(); )

Agora o problema que eu tenho é quando chama a fragment a toolbar fica com o título da fragment anterior.

Tem alguma maneira de passar o titulo ao chamar a fragment?

Obrigado Amigo!!!
Responder
Vinícius Thiengo (0) (0)
27/05/2015
Vc pode passar o toolbar como parametro de entrada de seu fragment, assim em algum dos métodos do ciclo de vida do fragment vc pode alterar o title do Toolbar de acordo com o fragment atual. O método onResume() é um bom candidato para essa alteração. Abraço
Responder
Flavio (1) (0)
02/06/2015
Thiengo,

Tentei de diversas formas e não consegui fazer com que ao chamar uma fragment ele altere o título la toolbar.
Responder
Vinícius Thiengo (0) (0)
03/06/2015
Flavio, está utilizando o mesmo Drawer dos vídeos de exemplo do Material Design aqui do Blog? Se sim, no listener withOnDrawerItemClickListener() vc consegue via variavel de entrada "i", saber qual foi o fragment chamado e consequentemente ali mesmo no listener vc altera o title do Toolbar. Tentou assim? Abraço
Responder
Flavio (1) (0)
03/06/2015
Thiengo, estou usando o mesmo Drawer dos vídeos, segui rigorosamente até o video: (http://www.thiengo.com.br/material-dialog-correcao-bug-statusbar-e-acoes-nos-fragments-material-design-android-parte-7 ).

A classe onde defini as ações do float é CarFragment e as demais recebem como herança.

Ainda estou começando na programação para android e por isso tanta dificuldade (rsrs)...

Eu verifiquei e não existe esse método criado (withOnDrawerItemClickListener) na CarFragment, eu crio esse metodo e seto o titulo via variável de entrada(que tem o fragment que estou chamando em outro método), eu só não entendi como fazer para que a variável recebe a informação da fragment que está chamando.

Att,


Flávio.
Responder
Vinícius Thiengo (0) (0)
03/06/2015
Flavio esse withOnDrawerItemClickListener() é um método de inicialização do Drawer, nesse vídeo (http://www.thiengo.com.br/utilizando-navigationdrawer-material-design-android-parte-5 ) mostro exatamente como utilizá-lo incluindo a mudança de título no Toolbar. Note que o Navigation é declarado na Activity, logo todo o código e variaveis que serão alterada (no caso somente o toolbar.setTitle()) estarão na Activity tb. Utilize o parametro de entrada "i" do método withOnDrawerItemClickListener() para saber qual nome colocar no Toolbar. Essa verificação de qual título colocar vc pode fazer utilizando um switch() onde cada case será referente aos fragments que vc tem, por exemplo, se i == 1, então o título é "Carros de Luxo", se i == 2, então o título é igual a "Carros Esportivos", ... Abraço
Responder
M soninha Toledo (1) (0)
19/05/2015
Olá Thiengo, tenho sido enriquecida de conhecimentos no Android, com o seu blog e quero parabanizá-lo! Muito explicadinho!! Eu não tinha a menor idéia do que era Abdroid, até se deparar com ele na faculade (isto é a programação!). Conhecia de utilizar!!!
Responder
Alessandro (1) (0)
07/05/2015
Blz Vinícius, uma sugestão (se é que já não pensou nisso), colocar as tabs.

Muito bom os vídeos, parabéns.
Responder
Vinícius Thiengo (0) (0)
08/05/2015
Vlw Alessandro, pensei sim. No próximo vídeo vou falar mais sobre as açÕes que ainda não coloquei nesses exemplos (chamar fragment, Activity de detalhe, ...) Abraço
Responder
06/05/2015
Fala Thiengo,muito bom o blog.
Vai implementar o SearchView não?
Estou aguardando.
Valeu.
Responder
Vinícius Thiengo (0) (0)
06/05/2015
Fala Hemerson, blz?
Vou fazer sim, mas tem alguns para vim antes. Abraço
Responder
06/05/2015
Muito boa a vídeo aula, estou aprendendo muito com elas. Gostaria de saber da possibilidade da criação de uma vídeo aula com a utilização do recurso de Widget, não vejo muitos livros nem vídeo aulas ensinando a fazer, principalmente atualização automática com o banco de dados. Abraço.
Responder
Vinícius Thiengo (1) (0)
06/05/2015
Fala Jonatan, blz?
É um conteúdo interessante mesmo, vou ver se o faço, vlw a dica. Abraço
Responder
Bruno Guzella (1) (0)
05/05/2015
Fala Calopsita, blz?
Estou tentando usar em minha app, so que esta dando o erro abaixo, pode me ajudar?
Como nao estou usando gradle ainda, fiz o download do jar e importei no projeto.

No resource identifier found for attribute 'fab_colorRipple' in package br.'com.minhaapp'

Codigo da recicleview

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android "
             xmlns:fab="http://schemas.android.com/apk/res-auto "
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="@android:color/transparent"
        android:scrollbars="vertical"/>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add_white_24dp"
        fab:fab_colorNormal="@color/accent"
        fab:fab_colorPressed="@color/accent_pressed"
        fab:fab_colorRipple="@color/ripple"/>
</FrameLayout>
Responder
Vinícius Thiengo (0) (0)
06/05/2015
Fala Bruno, blz?
Remova o atributo fab_colorRipple e tente rodar. Pois o ripple, se não me engano rodará somente com API 21 para cima. Abraço
Responder
Jonatas Oliveira (1) (0)
04/05/2015
Aew thiengo blz?

Só pra avisar que a qualidade do video ta 360p. É assim mesmo? Da pra ver o que esta na tela, mas com um pouco de esforço. Mas de qualquer forma ta valendo, o audio compensa o video. Abraço.
Responder
Vinícius Thiengo (0) (0)
04/05/2015
Fala Jonatas, blz sim.
Na verdade já percebi que isso pode acontecer, pois envie o vídeo em HD, porém com alguns a qualidade fica ruim de inicio, na verdade tem um outro seguidor do blog que se queixou desse problema, porém ele falou que depois a versão em HD passou. Pode ser a qualidade de sua conexão com a Internet no momento. Acredito que logo vai ficar ok. Abraço
Responder
PAULO ROBERTO (1) (0)
30/05/2015
Percebi, porém é só ir no menu de resoluções e voltar ele para 720p
Responder
hugg76 (1) (0)
04/05/2015
Excelente Thiengo, como sempre amigo. Contigo sim e facil de aprender de 1 - 10. Tens nota 10 mais 10 e 10 :-) :-) :-)
Responder
lucasadorno16 (1) (0)
04/05/2015
Opa, estava muito no aguardo desde vídeo. Estava com dificuldades de implementá-lo na minha App. Espero que agora solucione :)
Responder