Slides no Android Com a Lib AndroidImageSlider

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

Relacionado

EventBus Lib, Comunicação Entre Entidades AndroidAndroid

ButterKnife Lib, Simplificando Acesso a Views no AndroidAndroid

Cortando Imagens Com a Lib Cropper no AndroidAndroid

TextJustify Lib Com SpannableString no AndroidAndroid

Comentários Blog (47)

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.

Enviar

Enviando, aguarde...

Gil (0) (0)

07/06/2020

Thiengo, tenho um banco de dados onde cadastro o endereço da imagen na internet, como faço para armazenar essas imagens na String[] images =? poderia me passar um exemplo?

Responder

Vinícius Thiengo (0) (0)

07/06/2020

Gil, tudo bem?

O path completo de cada imagem está cadastrado no banco de dados remoto, certo?

Neste caso, primeiro você precisa colocar em seu aplicativo Android uma API de comunicação remota para conseguir, via JSON, esses endereços de imagens.

A sua linguagem de backend (PHP, Java, Kotlin, Python, ...) vai consultar o banco de dados e retornar ao menos os dados das imagens cadastradas. Retornar em formato JSON.

A Retrofit API é a API de comunicação remota Android que mais recomendo. É a mais utilizada pela comunidade Android para a tarefa "requisição remota".

Veja o conteúdo a seguir sobre está API:

-> Library Retrofit 2 no Android: https://www.thiengo.com.br/library-retrofit-2-no-android

Depois de conseguir configurar toda a conexão de seu app Android com o backend Web de seu projeto.

Depois disto o próximo passo é utilizar alguma API de carregamento de imagens em servidor remoto.

A API que mais recomendo é também muito bem aceita na comunidade de desenvolvedores Android.

Neste caso estou falando da Picasso API:

-> Documentação oficial Picasso API: https://square.github.io/picasso/

Gil, é isso.

Acredito que você não terá problemas na construção de todo esse algoritmo de carregamento e apresentação de imagens.

O resultado será justamente esse: os paths completos das imagens em algum array do tipo String[].

Gil, mas se mesmo assim você precisar de alguém para obter essa sua demanda, volte a me contactar que assim poderei lhe indicar alguns bons profissionais Android.

Pois eu mesmo jé estou alocado em outras demandas de desenvolvimento.

Surgindo mais dúvidas, pode enviar.

Abraço.

Responder

Edwy (1) (0)

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

Edwy (1) (0)

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

Edwy (1) (0)

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

Edwy (1) (0)

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

Edwy (1) (0)

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

Edwy (1) (0)

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

Willian Fernando (1) (0)

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

Danilo de Jesus (1) (0)

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

Andre (1) (0)

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

andre (1) (0)

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

Andre (1) (0)

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

Lucas (0) (0)

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