Ícones Com Bootstrap Lib no Android

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 /Ícones Com Bootstrap Lib no Android

Ícones Com Bootstrap Lib no Android

Vinícius Thiengo
(6706) (28)
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ítuloTest-Driven Development: Teste e Design no Mundo Real
CategoriaEngenharia de Software
Autor(es)Mauricio Aniche
EditoraCasa do Código
Edição1
Ano2012
Páginas194
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 apresento a Bootstrap Lib para Android. Bootstrap que é muito conhecida no mundo dos desenvolvedores Web, mais pelos ícones que nos permite utilizar nas páginas Web. O FontAwesome é a extensão do Bootstrap que fornece os ícones a serem utilizados. Apesar da lib Bootstrap para Android ser fácil de utilizar ela apresenta algumas limitações, como por exemplo a view FontAwesomeText nos permite colocar apenas o ícone texto e não o ícone texto e o texto, para isso no vídeo coloquei um TextView ao lado do FontAwesomeText, ambos com android:layout_width="wrap_content", para dar a impressão que é apenas uma entidade, quando na verdade são duas. Outra limitação, ou bug, é quando vamos adicionar um BootstrapButton via Java API, ele não aparece com o ícone setado e nem com o texto, e quando queremos trocar os dados de um BootstrapButton já no XML, o posicionamento do ícone nós não conseguimos alterar, porém o ícone é possível alterar. Os Thumbnails funcionam perfeitamente, exceto o BootstrapThumbnail que não tem a opção bt_minimal para removersmos a borda branca. A lib Bootstrap também nos permite colocar animações de flash e rotação. Bom, como falei no vídeo, o forte da lib é a variedade de ícones que temos acesso, possibilitando montarmos um layout mais personalizado. Sem mais delongas vou deixar você assistir ao vídeo.

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

Segue links das páginas apresentadas no vídeo:

Página do Bootstrap Lib Android no GitHub

Página dos ícones FontAwesome

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

ButterKnife Lib, Simplificando Acesso a Views no AndroidButterKnife Lib, Simplificando Acesso a Views no AndroidAndroid
Cortando Imagens Com a Lib Cropper no AndroidCortando Imagens Com a Lib Cropper no AndroidAndroid
TextJustify Lib Com SpannableString no AndroidTextJustify Lib Com SpannableString no AndroidAndroid
Slides no Android Com a Lib AndroidImageSliderSlides no Android Com a Lib AndroidImageSliderAndroid

Compartilhar

Comentários Facebook

Comentários Blog (28)

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...
Thiago (1) (0)
09/04/2016
Fala, Thiengo. Então, eu tentei fazer o mesmo que você em meu projeto, porém o Android Studio me retorna o seguinte erro:
 Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : uses-sdk:minSdkVersion 8 cannot be smaller than version 14 declared in library [com.beardedhen:androidbootstrap:2.2.0] C:\Users\Thiago\AndroidStudioProjects\ProjetoBD\app\build\intermediates\exploded-aar\com.beardedhen\androidbootstrap\2.2.0\AndroidManifest.xml
Suggestion: use tools:overrideLibrary="com.beardedhen.androidbootstrap" to force usage
Pelo que eu entendi a versão do bootstrap dá suporte até a API 14. Como faço  pra ela dá suporte para a minSdkVersion 8, que no caso é a que você usa no video?
Responder
Vinícius Thiengo (1) (0)
10/04/2016
Fala Thiago, blz?
Primeiro indico o estude se realmente é necessário o suporte a uma API tão antiga que tem quase nenhum usuário Android, veja esses números (http://developer.android.com/intl/pt-br/about/dashboards/index.html ).

O Bootstrap dá suporte a partir da API 14, que para mim é mt bom devido ao número de usuários Android a aprtir dessa versão. Caso mesmo assim queira esse suporte, o que aconselho é buscar uma outra library similar que lhe dará esse suporte. Busque no Android Arsenal (https://android-arsenal.com/search?q=bootstrap ). Abraço
Responder
Thiago (1) (0)
10/04/2016
Obrigado pela dica, cara. Continue seu trabalho, muito bom mesmo, vlw.
Responder
28/12/2015
Facilita a customização do app. Ótimo tutorial!
Responder
09/04/2015
Boa tarde Thiengo, mais uma vez... Meus parabéns pelo ótimo canal. Continue sempre assim... Mas vamos a dor de cabeça, ele está dando um erro na hora de gerar um Bootstrap Button... Estou usando tudo exatamente igual a você... Mas comigo esse erro acontece, existe algo que você tenha visto sobre isso?
Responder
Vinícius Thiengo (1) (0)
10/04/2015
Fala Igor, blz?
Vlw pelo apoio ao canal. Me diz como colocou o código que está retornando erro e qual é o erro? Abraço
Responder
10/04/2015
pronto, eu coloquei o seguinte codigo:

Lembrando que esse código é exatamente igual ao que se encontra no github... E ele apresenta o seguinte erro: java.lang.ClassCastException: com.beardedhen.androidbootstrap.BootstrapButton cannot be cast to android.widget.Button O que pode ser isso? Acabei de fazer um teste... e percebi que quando eu coloco o id ele dá esse erro, sem o id ele funciona numa boa.. Como posso resolver isso? Desde já agradeço
Responder
10/04/2015
Thiengo,
Já descobri qual é a solução. Não sei se é boa, mas pelo menos resolveu... Eu simplesmente troquei o id por onClick... Pelo menos comigo agora está funcionando.
Responder
Vinícius Thiengo (0) (0)
10/04/2015
Igor, provavelmente vc deve estar tentando utilizar o BootstrapButton em uma variável do tipo Button, coloque a variável sendo do tipo BootstrapButton tb se já não estiver fazendo isso. Imagino que atualmente esteja fazendo algo como abaixo:

Button bt = (BootstrapButton) findViewById(R.id.idDoSeuBootstrapButton)

Certo? Abraço
Responder
Vinícius Thiengo (0) (0)
10/04/2015
Show de bola que resolveu. Abraço
Responder
daviola.menezes (0) (0)
20/03/2015
Fala Thiengo blz? Uma d?vida importante pra mim,  nosso App leva consigo todos os ?cones da biblioteca? Ou somente o q usamos? E isso vale pra todas as libs q importamos no projeto. As vezes importamos v?rias libs pra usar uma ou outra coisa, a? a lib fica pesando no App?
Responder
Vinícius Thiengo (1) (0)
20/03/2015
Fala Daviola, blz sim.
Bom, primeiro temos de ter em mente que o "valor pesado", na APP é quando estamos rodando ela, na verdade esse é o valor pesado que realmente devemos nos importar, o valor de recurso / memória sendo utilizada. Vc pode alterar as lib e levar somente o necessário, mas desse modo pode ser um pouco mais demorado, pois terá de abrir a lib e destrincha-la para saber o que pode ou não ser removido. No caso do FontAwesome que é utilizado com a lib do bootstrap não vejo problemas em remover todos os icones que não estão sendo utilizados, porém terá de realizar o teste para ver se a lib do bootstrap não vai reclamar da falta dos outros ícones (provavelmente não). Então o que temos é que mesmo com um tamanho grande em bytes para instalação do APP, não significa que nossa APP vai instanciar uma série de objetos que vão tb deixar a utilização dela pesada. As libs mtas vezes são assim, utilizamos uma coisa ou outra nela. Lembrando que se otimização até mesmo do download da APP for importante para sua APP, então vale a pena abrir as libs e destrinchar o que pode ser deletado e então deletar (vc tb perderá o support da lib quando fizer isso, assim terá de realizar essa limpeza toda vez que a lib for atualizada). Abraço
Responder
20/03/2015
Show! Obrigado mais uma vez!
Responder
André (1) (0)
02/03/2015
Show Thiengo,mais uma vez parabens. Uma duvida: é possivel usar o bootstrap com os icones do fontawesome para personalizar uma listview ? exemplo: gostaria de criar uma lista simples com icone seguido de nome. como faco usando essa lib ?

Quero parecido com essa listview desse site http://hmkcode.com/android-custom-listview-titles-icons-counter/
Desde já obrigado.
Responder
Vinícius Thiengo (0) (0)
02/03/2015
Fala André, blz?
É possível sim, utilizando um layout personalizado quando trabalhando tb com BaseAdapter (http://www.thiengo.com.br/utilizando-baseadapter-para-personalizacao-completa-da-listview ) vc consegue colocar a tag do Bootstrap dentro desse layout de item e então em tempo de execução passar os icons de cada linha. Crie uma classe que terá o id do icon e o nome que estará o acompanhando na linha do ListView, então crie um ArrayList<SuaClasseDeIcons> que será passado preenchido para seu BaseAdapter. Note que o RecyclerView hj é a melhor opção ante ao uso do ListView e já que vai colocar icons em um listView, tente seguir a guideline do MaterialDesign para Lista e icons (http://www.google.com/design/spec/components/lists.html#lists-specs ). Abraço
Responder
André (1) (0)
03/03/2015
Opa Thiengo, blz?
Obrigado pela ajuda, intendi bem porém ainda não consegui fazer funcionar. Criei um layout com a listview,um layout com a "custom_listview", e fiz certinho o esquema do BaseAdapter, mas nao consegui adaptar para usar com o bootstrap. nao sei como vai ficar na minha Main_activity.
Se for possivel envio o codigo para você me ajudar, mas se der mto trabalho vou tentar criar o layout "à mão" sem listview msmo.
Mais uma vez muito obrigado e parabéns pelo excelente trabalho.
Responder
Vinícius Thiengo (0) (0)
03/03/2015
Ok André, me mostre o código de seu BaseAdapter, mais precisamente o código dentro do método getView() e tb me mostre o XML que está sendo inflado no getView(). Abraço
Responder
André (1) (0)
03/03/2015
Obrigado mais uma vez Thiengo. Esse é o meu adapter, está normal, não sei como adapta-lo:
 
import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class AdapterDirectivos extends BaseAdapter{

    protected Activity activity;
    protected ArrayList items;

    public AdapterDirectivos(Activity activity, ArrayList items) {
        this.activity = activity;
        this.items = items;
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int arg0) {
        return items.get(arg0);
    }

    @Override
    public long getItemId(int position) {
        return items.get(position).getId();
    }


    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // Generamos una convertView por motivos de eficiencia
        View v = convertView;

        //Asociamos el layout de la lista que hemos creado
        if(convertView == null){
            LayoutInflater inf = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = inf.inflate(R.layout.custom_listview, null);
        }

        // Creamos un objeto directivo
        Directivo dir = items.get(position);
        //Rellenamos la fotografía
        ImageView foto = (ImageView) v.findViewById(R.id.foto);
        foto.setImageDrawable(dir.getFoto());
        //Rellenamos el nombre
        TextView nombre = (TextView) v.findViewById(R.id.nombre);
        nombre.setText(dir.getNombre());
        //Rellenamos el cargo
        TextView cargo = (TextView) v.findViewById(R.id.cargo);
        cargo.setText(dir.getCargo());

        // Retornamos la vista
        return v;
    }
}

e esse eh meu xml custom:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android "
    xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto "
    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto "
    xmlns:bootstrap="http://schemas.android.com/apk/res-auto "
    xmlns:bootstrapthumbnail="http://schemas.android.com/apk/res-auto "
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <!-- icon -->
    <com.beardedhen.androidbootstrap.FontAwesomeText
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:id="@+id/foto" />
        
        

    <TextView
        android:id="@+id/cargo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="40dp"
        android:text="bunda"
        android:textSize="18dp" />

    <TextView
        android:id="@+id/nombre"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="18dp" />

</LinearLayout>

Responder
Vinícius Thiengo (1) (0)
06/03/2015
André, seus TextViews estão com o layout_width igual a MATCH_PARENT, coloque ambos dentro de um LinearLayout com o layout_width igual a WRAP_CONTENT e com uma orientação vertical, igual no script abaixo... depois tes para ver se passa sem problemas, caso contrário volte ae. Abraço

http://schemas.android.com/apk/res/android "
    xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto "
    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto "
    xmlns:bootstrap="http://schemas.android.com/apk/res-auto "
    xmlns:bootstrapthumbnail="http://schemas.android.com/apk/res-auto "
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
 
    
    
       
    

        
     
        
    

Responder
02/02/2015
Curti. Já uso o bootstrap pra tudo com programação web. E agora tem pro android com certeza vou migrar pra minha app android. Valeu Thiengo.
Responder
wiliam (2) (0)
02/02/2015
Oi Thiengo, olha eu aqui incomodando de novo rsrs. Primeiro quero te parabenizar pelo vídeo show de bola, mas eu tenho uma perguntinha q não tem muito haver com o vídeo é uma duvida q eu tenho e queria ver se vc poderia me ajudar como vc sempre faz, Cara eu to com um listview em um app que eu estou desenvolvendo e eu queria mudar a orientação de exibição dos elementos a listview por padrão exibe os elementos da lista de cima pra baixo correto? ai quando não cabem mais na tela ele cria um scroll pra gente rolar e ver os elementos q estão em baixo, pois bem eu queria mudar essa orientação ao invés dos elementos aparacerem de cima para baixo eu quero que eles apareçam de baixo pra cima entendi? vc sabe como fazer isso, desd já te agradeço seu blog tem sido de grande ajuda pra mim que ainda sou amador no ramo rs abraços cara.
Responder
Vinícius Thiengo (2) (0)
03/02/2015
Fala Wiliam, blz?
Faz o seguinte, assim que colocar os dados no ListView vc seta a posição que é para começar apresentando no ListView com o método setSelection(ultimaPosicicaoAqui); Assim vc pega o número de elementos de sua lista que preencheu o ListView e coloca esse número -1 como o argumeto do método. Lembre que para carregar mais vc terá de botar os dados no topo e não no bottom da ListVew. Ve se assim funciona. Abraço
Responder
wiliam (2) (0)
04/02/2015
Assim cara não funcionou muito não, mas não sei se vc entendeu muito bem o que eu quero, vou explicar de uma forma mais concreta o que eu quero. Eu estou desenvolvendo uma app  e nela eu tenho um chat e eu uso o listview para apresentar as mensagens que vem do banco de dados remoto então como vc ja sabe o listview sempre mostra as primeiras mensagens que foram escritas no topo e as outras vão ficando em baixo eu queria fazer o efeito contrario eu quero que as primeiras mensagens subam e as que eu estou escrevendo agora apareçam embaixo entendeu? Como no Whatsapp vc vai escrevendo e suas mensagens vão aparecendo em baixo e as outras vão subindo é exatamente isso que eu quero fazer, o lance do método que vc falou o "setSelection" é interessante mas eu não sei bem onde chamar ele, e tbm não entendi muito bem a parte em que vc fala que eu tenho que carregar os dados no topo, mas sem muitas delongas esse é o efeito que eu quero fazer, será que tem essa possibilidade? abraços
Responder
Vinícius Thiengo (2) (0)
05/02/2015
Fala Wiliam. Eu lhe entendi, a resposta que dei anteriormente é válida, ficou um pouco incompleta, pois não falei que as novas mensagens que chegarem para serem apresentadas no ListView, ao invés de carrega-las no inicio da lista que está vinculada ao Adapter que está no ListView, vc carregará novos dados no final dessa lista, sendo que o ultimo dado da lista é a mensagem mais recente enviada. Assim quamdo o usuário rolar o ListView para cima e acessar o topo do ListView, vc carrega mensagens mais antigas, porém a primeira mensagem depois da primeira mensagem que já estava no topo do ListView é a mensagem menos antiga em relação as mensagens posteriores que foram carregadas com ela. Isso: "então como vc ja sabe o listview sempre mostra as primeiras mensagens que foram escritas no topo e as outras vão ficando em baixo" não é verdade, vc escolhe o comportamento do ListView de acordo como vc preenche a lista que está vinculada a ele, vinculada ao adapter dele. Isso que está querendo fazer eu fiz para um cliente a pouco tempo, mas ao invés de utilizar  o "setSelection" para ir ao final do ListView e apresentar os dados mais recentes eu utilizei o "smoothScrollToPosition" pq é mais suave. Abraço
Responder
Wiliam (2) (0)
06/02/2015
Oi Thiengo, sim como vc falou a sua primeira resposta realmente foi valida eu é que me atrapalhei um pouco, não compreendi direito. Eu estou recebendo as mensagens do banco remoto via Broadcast recebi essas mensagens e depois que eu enviei para o ListView eu chamei o  "setSelection"  da forma que vc falou:  setSelection(adapter.getCount() - 1); e sim aconteceu o efeito que eu queria :D porém eu tive que chamar esse método tbm no OnCreate para que quando o usuário entrar no chat ele veja sempre a ultima mensagem que ele escreveu. Vai me desculpando pela minha ignorância sou meio "noob" ainda em android, mas ainda bem que existem blogs como o seu feito por pessoas capacitadas pra me ajudar ;) valeu mesmo cara e eu ainda nao tinha ouvido falar nesse "smoothScrollToPosition" vou dar uma pesquisada sobre ele. Abraços cara valeu.
Responder
27/01/2015
Como configura sem utilizar o gradle?
Responder
Vinícius Thiengo (2) (0)
28/01/2015
Responder
Alessandro (2) (0)
28/01/2015
Obrigado pelo dica. Continue com o excelente trabalho.
Responder