Slides no Android Com a Lib AndroidImageSlider

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog. Você receberá um email de confirmação. Somente depois de confirma-lo é que poderei lhe enviar os conteúdos exclusivos.

Email inválido.
Blog /Android /Slides no Android Com a Lib AndroidImageSlider

Slides no Android Com a Lib AndroidImageSlider

Vinícius Thiengo
(5995) (45)
Go-ahead
"É fácil decidir o que fazer. O difícil é decidir o que não fazer."
Michael Dell
Kotlin Android
Capa do livro Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia
TítuloDesenvolvedor Kotlin Android - Bibliotecas para o dia a dia
CategoriasAndroid, Kotlin
AutorVinícius Thiengo
Edição
Capítulos19
Páginas1035
Acessar Livro
Treinamento Oficial
Android: Prototipagem Profissional de Aplicativos
CursoAndroid: Prototipagem Profissional de Aplicativos
CategoriaAndroid
InstrutorVinícius Thiengo
NívelTodos os níveis
Vídeo aulas186
PlataformaUdemy
Acessar Curso
Receitas Android
Capa do livro Receitas Para Desenvolvedores Android
TítuloReceitas Para Desenvolvedores Android
CategoriaDesenvolvimento Android
AutorVinícius Thiengo
Edição
Ano2017
Capítulos20
Páginas936
Acessar Livro
Código Limpo
Capa do livro Refatorando Para Programas Limpos
TítuloRefatorando Para Programas Limpos
CategoriaEngenharia de Software
AutorVinícius Thiengo
Edição
Capítulos46
Páginas599
Acessar Livro
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Conteúdo Exclusivo
Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Opa, blz?

Nesse vídeo dou continuidade a série de vídeos sobre libs úteis no dev Android, porém dessa vez mostrando a lib AndroidImageSlider que nos permite colocar a mesma feature de slides comum em sistemas Web no sistema mobile, mais precisamente na APP Android. A Lib AndroidImageSlider é fácil de configurar e utilizar, porém como no vídeo passado encontrei algumas limitações ao utilizar a lib, as limitações estão nos listeners disponíveis. Não encontrei o listener para o movimento de troca de slides e também não encontrei o listener de clique nos indicadores de slides, basicamente a única utilidade dos indicadores é visual. Também não encontrei um método que nos permite setar o slide atual. Todas as features que não encontrei acredito que dariam um poder maior a lib, mas mesmo sem elas o custo / beneficio da lib AndroidImageSlider ainda é muito válido devido ao slide funcionar como esperado (com imagens locais ou imagens vindas da Web) e ainda ter um listener de clique no slide que nos permite abrir uma outra entidade (Activity ou Fragment, por exemplo). Outra funcionalidade importante da lib é o auto ajuste da imagem no quadrante que foi determinado para o SliderLayout, porém mesmo assim é ainda necessário o uso de imagens adequadas para cada densidade de tela (falo sobre imagens e densidade de tela nesse vídeo: Suporte de Tela com Drawable DPI no Android), no exemplo não fiz essa adequeção, pois é somente um exemplo (I'm lazy, now). Para os slides, se quiser com descrição utilize a entidade TextSliderView e se quiser sem descrição (visivel, pois o método description() ainda continua funcionando) utilize a entidade DefaultSliderView. A lib AndroidImageSlider também permite a customização do indicador (apresentada uma no vídeo), do efeito de transação, do Slider view e da view que apresenta a descrição. Então é isso, vou evitar mais delongas e deixar você assistir ao vídeo.

Obs. : não esqueça do atributo xmlns:custom="http://schemas.android.com/apk/res-auto" no tag XML root de seu layout que tem o SliderLayout.

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

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

Página inicial da lib AndroidImageSlider no Github

Página da Wiki da lib AndroidImageSlider no Github

Vlw

Receba em primeira mão, e com prioridade, os conteúdos Android exclusivos do Blog.
Email inválido

Relacionado

EventBus Lib, Comunicação Entre Entidades AndroidEventBus Lib, Comunicação Entre Entidades AndroidAndroid
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

Compartilhar

Comentários Facebook

Comentários Blog (45)

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...
25/11/2016
Thiengo, beleza? Uma coisa que fiquei bem curioso. Como tratar o cache de imagens? Por exemplo: ao trocar a imagem no servidor demora um tempo para a imagem atualizar. Como poderíamos solucionar este problema? Eu tentei assim e não funcionou.

  aq= new AQuery(rootView);
        aq.id(images[0]).image("[URL-IMAGE.jpg]",false,false);
Responder
Vinícius Thiengo (1) (0)
25/11/2016
Edwy, tudo bem?

A versão mais atual a library deveria fornecer essa opção.

De qualquer forma, salvando a imagem no SDCard, em um diretório criado para sua APP e depois carregando ela de um loca storage.

Fazendo isso o delay de carregamento deve ser muito menor, não permitindo que o usuário perceba.

Uma maneira simples de salvar imagens de sua APP no SDCard é com a library Universal Image Loader:

http://www.thiengo.com.br/carregamento-e-cache-de-imagem-com-universal-image-loader-no-android

No artigo indicado, não deixe de ler os comentários e de acessar a página oficial da library no GitHub? caso opte por utilizar a lógica de negócio acima. Abraço
Responder
27/11/2016
Boa noite!

Tudo sim e com você?

eu li o Material e pratiquei no android studio, mas não obtive sucesso.

Gostaria que você me ajudasse em outro detalhe:

Repare que no código abaixo eu seto as URL's das imagens em um Array justamente para chamar a imagem em um SliderLayout usando a posição da imagem. Para URL-IMAGE-01.jpg, posição image[0] e assim por diante.

O que eu posso implementar no código abaixo para limpar o cache de imagens? Lembrando que as imagens serão alteradas no servidor uma vez por semana.

Como poderíamos solucionar isso? Não quero deixar de usar o SliderLayout.

Como eu posso tratar o cache de imagens


public class FragmentGridBanners extends Fragment implements BaseSliderView.OnSliderClickListener {

    private String[] images = {
            "URL-IMAGE-01.jpg",
            "URL-IMAGE-02.jpg",
            "URL-IMAGE-03.jpg"};

    private String[] effects = {
            "Default"};

    private SliderLayout.Transformer[] effectsId = {
            SliderLayout.Transformer.Default};
    private SliderLayout slImages;

    public FragmentGridBanners() {
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.gridimagens, container, false);


        // SLIDERLAYOUT
        slImages = (SliderLayout) rootView.findViewById(R.id.slImages);


        DefaultSliderView aux1 = new DefaultSliderView(getActivity());
        //aux1.description("Image Web 1");
        aux1.image(images[0]);

        aux1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() {
            @Override
            public void onSliderClick(BaseSliderView baseSliderView) {
                Intent intent = new Intent(getActivity(), TelaBanner1.class);
                startActivity(intent);
                Toast toast = Toast.makeText(getActivity().getApplicationContext(), "Promoções Especiais", Toast.LENGTH_SHORT);
                toast.show();
            }
        });
        //aux1.setOnImageLoadListener(getActivity());
        slImages.addSlider(aux1);
Responder
Vinícius Thiengo (1) (0)
29/11/2016
Edwy, verifique se o cache não está sendo persistido no servidor das imagens.

Limpe o cache do servidor e depois atualize as imagens, deixando os mesmos nomes, faça isso para ver se as novas imagens são carregadas.

Note que na documentação do AndroidImageSlider é informado que essa library utiliza o Picasso, logo uma alternativa para limpar a cache seria o código abaixo:

Picasso.with( context )
.load( ?imagem_url" )
.memoryPolicy( MemoryPolicy.NO_CACHE )
.into( imageView );

Veja se com ele funciona sem problemas. Mas não esqueça de também trabalhar a cache no servidor. Mas teste essa solução do Picasso primeiro. Abraço.
Responder
02/12/2016
Excelente Thiengo!!! Usei o Picasso, mas não precisei implementar o MemoryPolicy.NO_CACHE.

Eu fiz assim:

//var
private Picasso picasso;
private LruCache picassoLruCache;

//OnCreate
picassoLruCache = new LruCache(this);

        // Set cache
        picasso = new Picasso.Builder(this) //
                .memoryCache(picassoLruCache) //
                .build();

        // Clear cache
        picassoLruCache.clear();

//SLIDER LAYOUT
....
....
....

        Picasso.with(this).load(images[0]);
        Picasso.with(this).load(images[1]);
        Picasso.with(this).load(images[2]);


DONE!!!

Obrigado cara. Abraço
Responder
Vinícius Thiengo (1) (0)
02/12/2016
Show de bola Edwy. Abraço.
Responder
02/12/2016
Opa, encontrei um problema. Quando altero a imagem no servidor ele altera no app apenas a posição 0. As demais não alteram. Teria uma sugestão para solução abaixo?


Picasso.with(this).load(images[1]);
        Picasso.with(this).load(images[2]);
Responder
Vinícius Thiengo (1) (0)
02/12/2016
Comportamento estranho.

E com o MemoryPolicy.NO_CACHE, tentou?
Responder
03/12/2016
usando o  .memoryPolicy(MemoryPolicy.NO_CACHE) e .networkPolicy(NetworkPolicy.NO_CACHE);

ocorre erro de "Error:(82, 32) error: cannot find symbol variable NetworkPolicy"



Picasso.with(this).load(new File(images[0]))
                .memoryPolicy(MemoryPolicy.NO_CACHE)
                .networkPolicy(NetworkPolicy.NO_CACHE);
Responder
03/12/2016
Opa...

Depois de 5 horas de testes. Encontrei uma solução final..

deleteDirectoryTree(this.getCacheDir());


    public static void deleteDirectoryTree(File fileOrDirectory) {
        if (fileOrDirectory.isDirectory()) {
            for (File child : fileOrDirectory.listFiles()) {
                deleteDirectoryTree(child);
            }
        }

        fileOrDirectory.delete();
    }

Isso resolveu meu problema.

Espero ter contribuído com as minhas dúvidas.

Abraço
Responder
Vinícius Thiengo (1) (0)
03/12/2016
Edwy, show de bola.

Ajudou sim. Sempre solicito que quem estiver com dúvidas leia os comentários também. Essa solução que encontrou vai ajudar a outros. Obrigado pela contribuição. Abraço
Responder
Tio Burla (0) (0)
15/03/2016
Thiengo, tem como me passar um script completo de como inserir clique em cada Slide, estou à 2 dias tentando e não consegui por clique no meu Slide, estou precisando muito disso pra poder dar fim ao meu projeto...
Muito obrigado, ótimo trabalho
Responder
Vinícius Thiengo (0) (0)
16/03/2016
Respondido no post do Firebase. Abraço
Responder
joao mario (1) (0)
13/02/2016
Oi, eu quero criar um slide com imagems da camera ou do sdcard, mas não estou conseguindo fazer, pode mim ajudar? eu pensei em converter do bitmap para inteiro mas não achei nem um codigo sobre isso.
Responder
Vinícius Thiengo (0) (0)
13/02/2016
Fala João Mario, blz?
A principio vc está no inicio no desenvolvimento Android, certo? Dê uma olhada nos vídeos dessa PlayList (https://www.youtube.com/playlist?list=PLBA57K2L2RILUAyMeRmw5kkt4-zzTHv78 ), veja na sequencia, dessa forma vai ficar tranquilo desenvolver essa APP.

A maior parte dos vídeos estão no Eclipse, mas utilize o AndroidStudio. Se não for possível o AS utilize o Eclipse com o plugin do gradle instalado (http://www.vogella.com/tutorials/EclipseGradle/article.html ).

Falo isso, pois vc precisa primeiro da base para poder desenvolve-la. Abraço
Responder
02/10/2015
Olá Thiengo....

...Parabéns pelo vídeo. Estou tentando fazer com que abra uma activity a cada imagem, porém não consigo. Há alguma forma?
Responder
Vinícius Thiengo (0) (0)
03/10/2015
Fala Willian, blz?
Veja no exemplo do vídeo que consigo ter um listener de click com o método setOnSliderClickListener() e com o método description consigo colocar um valor diferente para cada Slide para posteriormente acessá-lo no onSliderClick() e então utilizar if...else ou switch...case. Acesso via baseSliderView.getDescription(). Tente assim que conseguirá abrir a Activity correta para o slide correto clicado. Era isso? Abraço
Responder
Fabricio (1) (0)
06/09/2015
Fala Thiengo!!

Conhece alguma biblioteca mais simples que implementa somente o ViewPage com o Indicator e imagens local, ou é tranquilo de fazer, pode dar uma luz?

Desde já agradeço!
Responder
Vinícius Thiengo (0) (0)
07/09/2015
Fala Fabricio, blz?
Mais simples, dê uma olhada nessa aqui (https://android-arsenal.com/search?q=viewpager ), de repente alguma lhe atende com esse script com imagens. Dê uma olhada nesse link tb (http://codetheory.in/android-image-slideshow-using-viewpager-pageradapter/ ). Abraço
Responder
Alexandre Ferreira dos Santos (1) (0)
04/08/2015
Bom dia Thiengo, estou com aplicacao funcionando perfeitamente, so que quando eu desconecto da internet, nao consigo, mais efetuar o processo de transicao de imagens. Com esta lib consigo salvar as imagens que estou buscando da internet. Pois estou criando uma aplicativo de pega uma imagem da url depois troca por outra e assim por diante como o Slider esta fazendo, so que como salvo na memoria tem alguma possibilidade.
Responder
Vinícius Thiengo (0) (0)
04/08/2015
Fala Alexandre, blz?
Uma alternativa, já que quer as imagens funcionando tb em modo offline é utilizar uma lib de carregamento de imagem que além do cache salva as imagens no SDCard, o Universal Image Loader faz isso de maneira simples, veja esse vídeo (http://www.thiengo.com.br/carregamento-e-cache-de-imagem-com-universal-image-loader-no-android ). Abraço
Responder
Alexandre Ferreira (1) (0)
24/07/2015
Boa tarde, tudo bem consegue agora corrigir o erro, tinha esquecido de um elemento, porém eu tenho que pegar essas url que estao vindo de um servidor entao terei um array, como faco para pegar a posicao de cada um. Esta maneira e correta?

private SliderLayout slImages;

    for(String name : ArrayListdeImagens){

        aux1 = new TextSliderView(DownloadActivity.this);
        //aux1.description("Image Web 3");
        aux1.image(ArrayListImagens.get(name));
        aux1.setOnSliderClickListener(DownloadActivity.this);
        aux1.setOnImageLoadListener(DownloadActivity.this);
        slImages.addSlider(aux1);
    }
Responder
Vinícius Thiengo (1) (0)
25/07/2015
Alexandre, se quer pegar a posição então utilize um "for" convencional sem ser o enhanced, como abaixo:

for(int i, tamI = ArrayListdeImagens.size(); i < tamI; i++){

    aux1 = new TextSliderView(DownloadActivity.this);
    //aux1.description("Image Web 3");
    aux1.image(ArrayListImagens.get(i));
    aux1.setOnSliderClickListener(DownloadActivity.this);
    aux1.setOnImageLoadListener(DownloadActivity.this);
    slImages.addSlider(aux1);
}

O "i" será a posição vc precisa ter acesso. Era isso? Abraço
Responder
Alexandre (2) (0)
24/07/2015
Boa tarde, Thiengo desde ja muito obrigado pelos videos, minha duvida e que no momento da importacao no gradle os arquivos nao sao exportados corretamente., Tentei executar o seu proejto mais nem consigo importar para o Android Studio. Tem alguma forma de importar estas lib diretamente ?
Responder
Vinícius Thiengo (0) (0)
25/07/2015
Fala Alexandre, blz?
Somente conheço essa forma de import de libs, mas qual o erro que está sendo informado no Android Studio? Alguma lib deprecated? Abraço
Responder
Alexandre Ferreira (1) (0)
25/07/2015
Bom dia Thiengo, consegui resolver esta parte, estava importando um compile antigo, uma outra questão é como a imagem aparece ela tem uma tarja no rodapé é possível tirar isso para aparecer apenas a imagem.
Responder
Vinícius Thiengo (0) (0)
25/07/2015
Alexandre, remova a descrição que se me lembro bem a faixa não mais aparece, dê uma olhada nas issues da lib (https://github.com/daimajia/AndroidImageSlider/issues ) para ver se já não tem algo como sua dúvida e ainda com resposta. Abraço
Responder
Alexandre (1) (0)
25/07/2015
Obrigado pelo retorno, mais já removi a descrição e mesmo assim aparece. Vou tentar procurar alguma coisa na própria wiki da biblioteca não tem nada falando.
Responder
Vinícius Thiengo (0) (0)
25/07/2015
Tente acessar o TextSliderView e dar um setVisibility(View.GONE) nele para ver se funciona. Abraço
Responder
Alexandre Ferreira (1) (0)
29/02/2016
Thiengo, estou utilizando esta biblioteca jã faz um tempo, so que agora eu preciso fazer com que seja carregado uma lista de imagens e ser exibido. Ate ai conseguir fazer, so que o problema e que quando eu exclui uma imagem ou quando faco uma insercao no webservice ele nao atualiza. Eu fiz um timer para ficar atualizar o slider so que ele ele cria varios threads e as imagens ficam totalmente distorcidas, teria alguma maneira de ficar atualizando as imagens e ir trocando no imageview
Responder
Vinícius Thiengo (0) (0)
01/03/2016
Fala Alexandre, blz?
Baixe as imagens com libraries que já fazem todo o trabalho pesado para ti (Thread secundaria, Thread principal download, ...). As que indico são:

Picasso (http://square.github.io/picasso/ )

Fresco (http://www.thiengo.com.br/lib-fresco-para-carregamento-de-imagens-com-gifs-e-webps-animados-material-design-android-parte-12 )

A questão de baixar uma imagem que foi recém enviada ao server, o que pode fazer é utilizar tb um push message, pois dessa forma, assim que a imagem é enviada ao server seu script backend já pode comunicar a todos sobre a imagem, no corpo da push message pode enviar o path de acesso a imagem para então incluir no array de imagens a serem apresentadas no slide, isso sem precisar de recarregar o slide.

Essa parte é mais lógica, se achar melhor pode recarregar o slide. Abraço
Responder
11/05/2015
No caso da utilização do Eclipse como IDE, one baixo essas libs ?
Responder
Vinícius Thiengo (0) (0)
12/05/2015
Fala Danilo, blz?
Na página da lib tem uma sessão onde o autor fala sobre um exemplo que é para ser adaptado e utilizado no Eclipse. Segue link de download do exemplo. Abraço

https://github.com/daimajia/AndroidImageSlider
Responder
Dario Mahalambe (1) (0)
10/05/2015
Oi Thiengo, estou tendo um problema, adicionei as dependencies no android studio
mas sincronizei e tudo, mais as classes as aclasses nao aparecem no autocomplete
desconfio que nao tenha adicionado a biblioteca. porque quando executo da erro no metodo addSlider(), NullPointerException.
O que pode estar a aconetecer?
Queria saber como resolver?
Responder
Vinícius Thiengo (0) (0)
10/05/2015
Fala Dario, blz?
Bom, somente de ter conseguido executar é sinal de que importou a lib corretamente, porém ou a entidade que vc está colocando como argumento em addSlider() está null ou a entidade que vc está utilizando para chamar esse método ( variavel.addSlider() ) está null. Verifique se está iniciando a variavel que chama addSlider() corretamente. Baixe o exemplo disponível aqui para download e tente executa-lo. Abraço
Responder
03/05/2015
Olá Thiengo. Parabens pelo video. Gostaria de saber como faço para acrescentar um clique em cada imagem do image slider para chamar outra activity? Desde já obrigado.
Responder
Vinícius Thiengo (1) (0)
03/05/2015
Fala Andre, blz?
Na verdade, se me lembro bem somente é possível acrescentar o clique no próprio slider, assim que clicado ele retorna pelo menos o position da imagem / slide atual. No video mostro isso (se me recordo bem). Mas para cada slide, mesmo se fosse possível acho que não teria mt efeito, pois eles ficam escondidos. Era isso? Abraço
Responder
04/05/2015
opa Thiengo, obrigado pela atencao. Na verdade era isso msmo. Mas eu queria chamar uma activity clicando em 1 slide. Se nao for possivel, o que me recomenda? Desde já muito obrigado.
Responder
Vinícius Thiengo (1) (0)
05/05/2015
Fala Andre,
É possível sim, no vídeo mostro a utilização do método  description() tanto para TextSliderView quanto para DefaultSliderView, com ele vc pode colocar o "1" que identificará esse slide como sendo o slide que abrirá uma Activity quando clicado e então no listener do Slide (onSliderClick()) vc utiliza o baseSliderView.getDescription() para saber qual foi o slide clicado, se igual a "1" vc então abre a Activity via startActivity(). Abraço
Responder
05/05/2015
Perfeito Thiengo. Muito obrigado mais uma vez e parabens por todo seu trabalho! Voce eh fera !
Responder
André (1) (0)
12/05/2015
Opa Thiengo, blz? Cara, desculpa te perturbar denovo, mas acho que será a ultima vez. Sua última resposta foi muito bem explicativa, mas mesmo assim não consegui, mas tá faltando pouco. Meu listener onSliderClick está assim:
@Override
    public void onSliderClick(BaseSliderView baseSliderView) {
        Intent b = new Intent(this, Matriz.class);
        baseSliderView.getDescription();
        startActivity(b);
    }
o slide que quero cliclar está com a description: "1". Como faço para identifica-lo no getDescription() ? Obrigado.
Responder
Vinícius Thiengo (1) (0)
13/05/2015
Ok, antes de dar o startActivity, faça isso:

if( baseSliderView.getDescription().equals("1") ){
      startActivity( b );
}

Assim deve funcionar. Abraço
Responder
18/01/2015
Fala Thiengo!
Só passando aqui pra sugerir vídeo sobre Tab na ActionBar (como tu já fez), mas com o sliding horizontal de um jeito não deprecated.
Responder
Vinícius Thiengo (0) (0)
19/01/2015
Fala Lucas,
Tenho sim, mas não com slide ainda e utilizando o Sherlock (http://www.thiengo.com.br/adicionando-tabs-actionbar-android ). Abraço
Responder
Leonardo (3) (0)
17/01/2015
Sugestão: Iniciar uma série de vídeos ensinando a trabalhar com o novo conceito Material Design do Android, mostrando como fazer as animações de carregamento e da action bar por exemplo.

Seus vídeos são excelentes, só sinto falta de uma abordagem maior da parte visual do Android. Afinal de contas hoje em dia não adianta fazer aplicativos funcionais, precisamos caprichar principalmente no visual para que o aplicativo consiga competir ou até mesmo sair na frente dos demais.

Um abraço!
Responder