Carregando imagens de outras fontes com o Picasso

Olá pessoal,

As bibliotecas de carregamento de imagens são utilizadas em praticamente todos os projetos Android. Elas facilitam o carregamento de imagens a partir de diversas fontes como: web, sistema de arquivos e até de banco de dados. Possuem recursos de redimensionamento, crop, placeholder, animação, etc. As mais famosas desse segmento são: Picasso, Glide e Universal Image Loader (UIL). Todas são ótimas, já resolvi uns problemas com uma, outros problemas com outra e por aí vai.
No projeto que estou atualmente estou usando o Picasso, e estava precisando carregar imagens de um local não suportado nativamente por ele: o arquivo de expansão de APK.
Graças ao grande mestre Jake Wharton, podemos implementar isso de uma forma muito fácil. Basta criar uma subclasse de RequestHandler.

import com.squareup.picasso.Request;
import com.squareup.picasso.RequestHandler;

public class MeuRequestHandler extends RequestHandler {

    public MeuRequestHandler() {
    }

    @Override
    public boolean canHandleRequest(Request data) {
        // Retorne true se essa classe pode tratar a leitura da imagem
        return data != null
                && data.uri != null
                && data.uri.getScheme() != null
                && data.uri.getScheme().startsWith("ngvl");
    }

    @Override
    public Result load(Request request, int networkPolicy) 
            throws IOException {
        Bitmap imagem = metodoQueCarregaSeuBitmap(request.uri);
        Result result = new Result(imagem, Picasso.LoadedFrom.DISK);
        return result;
    }
}

Essa classe possui apenas dois métodos:

• canHandleRequest(Request) define se essa classe é capaz de carregar uma determinada imagem. Nesse exemplo, estou usando o parâmetro Request para checar se o endereço (definido por uma Uri) começa com "ngvl". 
• Já o método load(Request, int) carrega a imagem em si e a retorna por meio de um objeto Result, que recebe o Bitmap da imagem e de onde ela foi carregada (memória, disco ou rede).

Criado o handler, basta adicioná-lo a uma instância do Picasso.

Picasso = mPicassoInstance = 
    new Picasso.Builder(mContext.getApplicationContext())
        .addRequestHandler(new MeuRequestHandler())
        .build();

Com isso, você está adicionando uma nova fonte de imagens à sua instância do Picasso, ou seja, você pode usar todos os schemas já suportados pelo Picasso (http, file, content, ...) e esse que acabamos de criar.
Agora, se invocarmos o código a seguir, o nosso handler tratará essa requisição.

mPicassoInstance
        .load("ngvl://minhaimagem/logo.jpg")
        .into(imageView);

#perfmatters #protip É importante que só haja uma instância desse objeto para evitar problemas de memória! Sendo assim, implemente um Singleton, e caso precise de um Context, passe o getApplicationContext() para ele ;)

4br4ç05,
nglauber

Universal Image Loader

Olá povo,

Quem nunca precisou carregar imagens vindas da rede ou do cartão de memória em um Adapter no Android? Nativamente não temos uma maneira simples de fazer isso (porque hein Google?). Se assim como eu, você sempre buscava alguma solução alternativa, eu recomendo o Universal Image Loader.

Ele é o mais simples de usar que achei, e o que fornece mais recursos, pois nos permite setar uma imagem para uma ImageView passando apenas uma URI, que pode ser:

// da Web
String imageUri = "http://site.com/image.png"; 
// do SD card
String imageUri = "file:///mnt/sdcard/image.png"; 
// de um content provider
String imageUri = 
  "content://media/external/audio/albumart/13"; 
// da pasta assets do seu projeto
String imageUri = "assets://image.png"; 
// da pasta res/drawable
String imageUri = "drawable://" + R.drawable.image; 

Foi essa biblioteca que utilizei no aplicativo do blog. E como pode ser visto no site deles, já foi utilizada e aprovada por dezenas de aplicações.
Os passos da utilização são bem simples e estão descritos no site, mas vou colocar aqui a maneira mais simples. 1) Faça o download do jar e adicione na pasta libs do seu projeto. 2) Adicione as permissões de Internet e de escrita no cartão de memória no AndroidManifest.xml. Além disso, vamos criar uma classe que herda de Application e também declará-la no manifest. Essa classe é o melhor lugar para inicializarmos os singletons da nossa aplicação, pois ela é ponto de partida da mesma.

<uses-permission 
  android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission 
  android:name="android.permission.INTERNET" />

<application
  android:name="pacote.da.app.ClasseDaSuaApp" ... >

Agora adicione a classe da sua app que inicializará o Universal Image Loader.

public class ClasseDaSuaApp 
  extends Application {

  @Override
  public void onCreate() {
    super.onCreate();
    DisplayImageOptions defaultOptions = 
      new DisplayImageOptions.Builder()
        .cacheInMemory(true)
        .cacheOnDisc(true)
        .build();

    ImageLoaderConfiguration config = 
      new ImageLoaderConfiguration.Builder(
          getApplicationContext())
        .defaultDisplayImageOptions(defaultOptions)
        .build();

    ImageLoader.getInstance().init(config);
  }
}

No código acima, ativamos a opção de cache em memória e em disco. Feito isso, é só utilizar no seu adapter lá no getView.

String imgUrl = entry.thumbnailURL;
holder.imgThumbnail.setImageResource(R.drawable.ic_launcher);
if (!TextUtils.isEmpty(imgUrl)){
  ImageLoader.getInstance().displayImage(imgUrl, holder.imgThumbnail);
}

Qualquer dúvida, consultem o site da biblioteca no github.

4br4ç05,
nglauber

Facebook API no Android

Olá povo,

Até a presente data, eu não tenho conta (de verdade) no Facebook. Por isso que até agora não tinha colocado nada relacionado aqui no blog. Mas depois de tantos alunos me perguntando como integrar a aplicação com o Facebook, resolvi deixar registrado como utilizar essa rede social.

Registrando a aplicação do Facebook

O processo é bem similar ao que mostrei no post sobre integração com o Twitter. Devemos primeiro criar/registrar nossa aplicação no Facebook. Para tal, acesse: https://developers.facebook.com/apps, faça o login com uma conta do facebook (aconselho criar uma conta de teste) e clique na opção Create New App. A janela abaixo será exibida:

Digite o nome da aplicação e clique em Continue.

Nota: Por questões de segurança o Facebook pede que você coloque uma informação que te identifique. No meu caso, eu tive que preencher o número do meu celular. Uma vez que cadastrei, o Facebook envia um código de ativação via SMS. Clique no link que foi enviado para o seu aparelho ou digite o código de confirmação para concluir o seu cadastro.

Uma vez que a aplicação está cadastrada, habilite a opção Native Android App.

Nós precisaremos preencher o campo Android Key Hash que é o identificador da nossa aplicação. Ele é gerado a partir do arquivo *.keystore que é usado pra assinar nossa aplicações Android. Aqui, utilizaremos o debug.keystore.
Para gerar esse hash, precisaremos do OpenSSL. Se você estiver no Windows, baixe o openssl-for-windows (http://code.google.com/p/openssl-for-windows/) e descompacte o ZIP na unidade C:

Ainda se você estiver no Windows, abra o prompt de comando, e digite o comando abaixo para adicionar o diretório do openssl no path.
set PATH=%PATH%;C:\openssl-0.9.8k_WIN32\bin

Para gerar a chave digite esse comando:
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Nota 1: o comando keytool é do JDK. Dessa forma, a pasta bin do JDK deve estar no seu PATH, se não tiver, adicione ou digite esse comando dentro da pasta bin do JDK.
Nota 2: se você estiver usando Windows, substitua ~/.android/debug.keystore por C:\Users\seuusuario\.android\debug.keystore (se o nome do seu usuário tiver espaço, coloque o caminho entre aspas)

Copie a hash que foi gerada e cole no campo Android Key Hash e conclua o cadastro da aplicação no Facebook.

Importanto o projeto do Facebook SDK

O código do Facebook SDK está disponível em um repositório GIT, mas você pode baixá-lo no formato ZIP. Acesse https://github.com/facebook/facebook-android-sdk/ e selecione a opção Download this repository as a ZIP file". Terminado o download, descompacte onde desejar.

Vamos criar agora um novo projeto Android com o código que acabamos de baixar. No Eclipse, selecione File | New | Android Project, coloque o nome do projeto de facebooksdk e selecione a opção Create project from existing code. Selecione o diretório onde você descompactou o código do facebooksdk e clique em Finish.

Nota: Se o projeto der erros em relação a anotações @Override, você pode removê-las.

Criando um projeto de exemplo

Vamos criar uma aplicação simples que realizará o login no facebook e atualizará o status do usuário. Crie um novo projeto Android e ao concluir o assistente, vamos adicionar a referência do projeto facebooksdk ao nosso projeto. Para tal, clique com o botão direito sobre o projeto e selecione Properties. No lado esquerdo, selecione Android, e na parte inferior adicione a referência ao projeto clicando em Add... e selecionando o facebooksdk.

Abra o AndroidManifest.xml e adicione a permissão de INTERNET.

<uses-permission 
  android:name="android.permission.INTERNET"/>

Agora, deixe a Activity da sua aplicação da seguinte forma:

public class ExFacebookActivity extends Activity {
 
  private static final String APP_ID = "ID_SUA_APP";
 
  private static final String
    ACCESS_EXPIRES = "access_expires";
  private static final String
    ACCESS_TOKEN = "access_token";

  private Facebook facebook;
  private SharedPreferences prefs;

  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    facebook = new Facebook(APP_ID);
    prefs = getPreferences(MODE_PRIVATE);
    // Carrega a accessToken pra saber se o usuário
    // já se autenticou.
    loadAccessToken();

    // Caso não tenha se autenticado, abre o login
    if(!facebook.isSessionValid()) {

      // Chama a tela de login do facebook
      facebook.authorize(this, 
        new String[] {"publish_stream"},
          new DialogListener() {
            // Login com sucesso, salva o accessToken
            public void onComplete(Bundle values) {
              saveAccessToken();
            }
            // Os métodos abaixo devem ser 
            // implementados para tratatmento dos
            // fluxos alternativos
            public void onFacebookError(
              FacebookError error) {}
    
            public void onError(DialogError e) {}
    
            public void onCancel() {}
          });
    }
  }
    
  public void onActivityResult(
    int requestCode, int resultCode, Intent data) {
    super.onActivityResult(
      requestCode, resultCode, data);
    // A API do Facebook exige essa chamada para 
    // concluir o processo de login.
    facebook.authorizeCallback(
      requestCode, resultCode, data);
  }
  
  // Evento de clique do botão para atualizar o status
  public void updateStatusClick(View v){
    EditText edt = (EditText)
      findViewById(R.id.editText1);
    updateStatus(edt.getText().toString()); 
  }

  private RequestListener requestListener = 
    new RequestListener() {
      public void onMalformedURLException(
        MalformedURLException e, Object state) {
        showToast("URL mal formada");
      }
      public void onIOException(
        IOException e, Object state) {
        showToast("Problema de comunicação");
      }
      public void onFileNotFoundException(
        FileNotFoundException e, Object state) {
        showToast("Recurso não existe");
      }
      public void onFacebookError(
        FacebookError e, Object state) {
        showToast("Erro no Facebook: "+ 
          e.getLocalizedMessage());
      }
      public void onComplete(
        String response, Object state) {
        showToast("Status atualizado");
      }
    };

  // Método que efetivamente atualiza o status
  private void updateStatus(String status) {
    AsyncFacebookRunner runner = 
      new AsyncFacebookRunner(facebook);
  
    Bundle params = new Bundle(); 
    params.putString("message", status);
    runner.request("me/feed", params, "POST", 
      requestListener, null);
  }
 
  private void showToast(final String s){
    final Context ctx = ExemploFacebookActivity.this;
    runOnUiThread(new Runnable() {
      public void run() {
        Toast.makeText(ctx, s, 
          Toast.LENGTH_SHORT).show();
      }
    });
  }

  private void saveAccessToken() {
    SharedPreferences.Editor editor = prefs.edit();
    editor.putString(
      ACCESS_TOKEN, facebook.getAccessToken());
    editor.putLong(
      ACCESS_EXPIRES, facebook.getAccessExpires());
    editor.commit();
  }

  private void loadAccessToken() {
    String access_token = 
      prefs.getString(ACCESS_TOKEN, null);
    long expires = prefs.getLong(ACCESS_EXPIRES, 0);
    if(access_token != null) {
      facebook.setAccessToken(access_token);
    }
    if(expires != 0) {
      facebook.setAccessExpires(expires);
    }
  }
}

A classe acima está comentada, então vou apenas ressaltar os pontos principais. No onCreate da Activity verificamos se o usuário está autenticado. Essa verificação é feita através do AccessToken que é salvo em uma SharedPreferences (veja mais aqui). Caso o usuário não esteja autenticado, chamamos o método autorize passando as permissões que a nossa aplicação requer para acessar determinados recursos. A lista completa de permissões está aqui. Como essa comunicação é feita em uma Thread separada (para não travar a GUI) é utilizado um RequestListener para saber o status da solicitação (sucesso ou falha).
O método updateStatus vai enviar uma mensagem para seu "wall" do Facebook. Nesse método, criamos uma AsyncFacebookRunner que realizará o processo em uma Thread separada. Criamos um objeto Bundle para passar os parâmetros da solicitação, que no nosso caso é apenas a mensagem.
O método request recebe como parâmetro:
- o recurso do facebook que queremos acessar, nesse caso "me/feed" (a lista completa pode ser vista aqui);
- o bundle com os parâmetros; - o método HTTP (GET ou POST); - um RequestListener similar ao que declaramos no login.

Por fim, vou colocar o layout da aplicação:

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <EditText
    android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

  <Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Atualizar Status" 
    android:onClick="updateStatusClick"/<

</LinearLayout>

Agora é só executar a aplicação. Ao iniciar pela primeira vez, será exibida a tela de login. Após fazer a autenticação, a tela de login é fechada e voltará automaticamente para aplicação. Aí é só digitar sua mensagem e postar no Facebook :)

Se quiser postar uma foto, basta substituir o método updateStatus por esse aqui:

private void sendPhoto(String status) {
  AsyncFacebookRunner runner = 
    new AsyncFacebookRunner(facebook);
  
  Bitmap image = BitmapFactory.decodeResource(
    getResources(), R.drawable.ic_launcher);

  ByteArrayOutputStream baos = 
    new ByteArrayOutputStream();   

  image.compress(
    Bitmap.CompressFormat.PNG, 100, baos); 

  byte[] bytes = baos.toByteArray();  

  Bundle params = new Bundle(); 
  params.putByteArray("picture", bytes);  
  params.putString("message", status);
     
  runner.request("me/photos", params, 
    "POST", requestListener, null);
} 

Como vocês devem conhecer o Facebook melhor que eu, vocês já devem imaginar que existem muitas outras possibilidades nessa API. Eu só quis mostrar o suficiente para começar. Quem quiser se aprofundar, dá uma olhada aqui.

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber