sexta-feira, 29 de novembro de 2013

Comunicação HTTP eficiente no Android com Volley

Olá povo,

Conversando com meus novos mentores Neto Marin, Marcelo Quinta e Lúcio Maciel que conheci no DevBus Brasil, percebi uma unanimidade no que diz respeito a acesso HTTP no Android: a biblioteca Volley. Quando assisti o vídeo do Ficus Kirkpatrick no Google IO de 2013 não dei muita bola, mas os meus novos "orientadores" me mostraram o quanto essa biblioteca é poderosa e fácil de usar. Tudo isso aliado ao fato dela ser mantida pelo próprio Google.
Eu já falei em outros posts aqui do blog como fazer comunicação HTTP com AsyncTask (link 1 e link 2) e com AsyncTaskLoader (link), assim como carregar imagens da web em um Adapter usando o UniversalImageLoader (link). E também como ler um JSON de um WebService REST (link). Mas com o Volley podemos resolver todos os problemas citados nos posts anteriores e ainda remover todo aquele boiler plate que fazemos ao realizar essas requisições, simplificando o código. Além disso, ela tem as seguintes vantagens:
  • Comunicação paralela com possibilidade de priorização. Por exemplo, podemos criar uma fila de requisições JSON e outra de requisição de imagens e dizer que a primeira tem maior prioridade que a segunda;
  • Quando giramos a Activity, a mesma é destruída (mostrei como resolver isso aqui) e se nesse momento estiver havendo alguma requisição HTTP, o resultado é perdido. Podemos implementar algum tipo de cache em memória ou em banco, mas o Volley já faz esse serviço pra gente.
  • Um "ImageLoader" para carregar imagens da web, particularmente útil em adapters (falei de adapter aqui).
Depois dessa breve introdução, vamos por a mão na massa!

O Volley está em um repositório git no código-fonte do próprio Android. Então você terá que fazer um clone do mesmo via comando. Se você não tem o git instalado na sua máquina, siga esse tutorial aqui. Depois é só digitar no terminal.
git clone https://android.googlesource.com/platform/frameworks/volley

Feito isso, importe o projeto do Volley dentro do Eclipse e marque-o como biblioteca clicando com o botão direito sobre o projeto e selecionando Properties. Em seguida, selecione a opção Android do lado esquerdo e marque a checkbox "Is Library".

Em homenagem ao Ricardo Lecheta, vou fazer uma Activity que lê o JSON de carros disponível no site do seu livro de Android (que por sinal é muito bom e uso nas minhas aulas). E para ler o JSON e as imagens dos carros, vamos usar o Volley.

Vamos começar pela classe que vai manter a fila de execução de requisições do Volley bem como seu ImageLoader. O Google recomenda que ela seja um singleton, pois podemos gerenciar quantas filas de execução podemos ter e não termos que criar várias.
public class VolleySingleton {
  private static VolleySingleton mInstance = null;
  // Fila de execução
  private RequestQueue mRequestQueue;
  // Image Loader
  private ImageLoader mImageLoader;
 
  private VolleySingleton(Context context){
    mRequestQueue = Volley.newRequestQueue(context);

    mImageLoader = new ImageLoader(this.mRequestQueue, 
      new ImageLoader.ImageCache() {
        // Usando LRU (Last Recent Used) Cache
        private final LruCache<String, Bitmap> 
          mCache = new LruCache<String, Bitmap>(10);

        public void putBitmap(
          String url, Bitmap bitmap) {
          mCache.put(url, bitmap);
        }
        public Bitmap getBitmap(String url) {
          return mCache.get(url);
        }
      });
  }
 
  public static VolleySingleton getInstance(
    Context context){

    if(mInstance == null){
      mInstance = new VolleySingleton(context);
    }
    return mInstance;
  }
 
  public RequestQueue getRequestQueue(){
    return this.mRequestQueue;
  }
 
  public ImageLoader getImageLoader(){
    return this.mImageLoader;
  }
}
Vou definir um POJO simples que representa os objetos carro que iremos listar.
public  class Carro {
  String nome;
  String imageUrl;
 
  public Carro(String nome, String imageUrl) {
    this.nome = nome;
    this.imageUrl = imageUrl;
  }
}
Abaixo temos o arquivo de layout usado no adapter. Note que estamos usando NetworkImageView ao invés do ImageView tradicional.
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/itemRoot"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" >

  <com.android.volley.toolbox.NetworkImageView
    android:id="@+id/img"
    android:layout_width="140dp"
    android:layout_height="70dp"
    android:src="@drawable/ic_launcher" />

  <TextView
    android:id="@+id/txtName"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:textSize="20dp"
    android:text="@null"/>
</LinearLayout>
A classe Adapter listada abaixo herda de ArrayAdapter e está usando o NetworkImageView e o ImageLoader do Volley.
public class CarroAdapter extends ArrayAdapter<Carro>{

  static final int LAYOUT = R.layout.item_lista;
 
  public CarroAdapter(Context context, 
    List<Carro> objects) {

    super(context, LAYOUT, objects);
  }

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

    Context ctx = parent.getContext();
    if (convertView == null){
      convertView = LayoutInflater.from(ctx)
        .inflate(R.layout.item_lista, null);
    }
    NetworkImageView img = (NetworkImageView)
      convertView.findViewById(R.id.img);
    TextView txt = (TextView)
      convertView.findViewById(R.id.txtName);
  
    Carro carro = getItem(position);
    txt.setText(carro.nome);
    img.setImageUrl(
      carro.imageUrl, 
      VolleySingleton.getInstance(
        getContext()).getImageLoader());
  
    return convertView;
  }
}
E finalmente a Activity... Ela implementa duas interfaces: Response.Listener e Response.ErrorListener. O método da primeira (onResponse) será chamada quando a requisição ocorrer sem problemas, e da segunda (onErrorResponse) caso contrário. No onCreate, obtemos a fila de execução a partir do nosso singleton, e depois criamos um JsonObjectRequest. No Volley, além desse tipo de Request, temos o ImageRequest e o StringRequest, o primeiro para imagens e o segundo para qualquer requisição que retorne uma String. Após criar a requisição, a adicionamos na fila para ser executada.
No método onResponse já recebemos o JSONObject, então é só fazer o parse do mesmo. Aqui poderíamos usar o Gson, mas eu não gosto dele :p
Após transformar o JSONObject em uma Lista de Carros, criamos e setamos o adapter da nossa ListActivity.
Se alguma coisa der errado, o método onErrorResponse será chamado, e daí estamos exibindo um Toast.
public class MainActivity extends ListActivity 
  implements 
    Response.Listener<JSONObject>, 
    Response.ErrorListener {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    String url="http://www.livroandroid.com.br/livro/"+
      "carros/carros_classicos.json";
  
    RequestQueue queue = Volley.newRequestQueue(this);

    JsonObjectRequest jsObjRequest = 
      new JsonObjectRequest(
        Request.Method.GET, // Requisição via HTTP_GET
        url,   // url da requisição
        null,  // JSONObject a ser enviado via POST
        this,  // Response.Listener
        this); // Response.ErrorListener
  
    queue.add(jsObjRequest);  
  }

  @Override
  public void onResponse(JSONObject response) {
    List<Carro> carros = new ArrayList<Carro>();
  
    try {
      // Não precisamos converter o 
      // InputStream em String \o/
      JSONObject jsonCarros = 
        response.getJSONObject("carros");
      JSONArray jsonCarro = 
        jsonCarros.getJSONArray("carro");
   
      for (int i = 0; i < jsonCarro.length(); i++) {
        JSONObject jsonCarroItem = 
          jsonCarro.getJSONObject(i);
        String nome = 
          jsonCarroItem.getString("nome");
        String thumbnail = 
          jsonCarroItem.getString("url_foto");
    
        Carro carro = new Carro(nome, thumbnail);
        carros.add(carro);
      }
    } catch (Exception e){
      e.printStackTrace();
    }
   
    setListAdapter(new CarroAdapter(this, carros));
  }
 
  @Override
  public void onErrorResponse(VolleyError error) {
    Toast.makeText(this, "Erro!", 
      Toast.LENGTH_SHORT).show();
  }
}
Ah! Como toda app Android que acessa a Web, adicione a permissão de Internet no seu AndroidManifest.xml.

É isso, a partir de agora podemos utilizar o Volley em nossas aplicações com essa biblioteca usada e mantida pelo próprio Google. Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

terça-feira, 26 de novembro de 2013

ContentProvider, CursorLoader e CursorAdapter

Olá povo,

Quem já assistiu minhas aulas ou alguma palestra minha sobre Android sabe que eu sempre falo que o Android tem 4 componentes básicos: Activities, Services, Broadcast Receivers e Content Providers.
Nesse post vou falar sobre ContentProvider e os benefícios de utilizá-lo junto com um CursorLoader e um CursorAdapter.

Um ContentProvider, como o próprio nome diz, é um provedor de conteúdo que nos permite compartilhar informações da nossa aplicação com outras aplicações. Essas informações normalmente são dados do nosso banco de dados SQLite (mas nada impede que venha de outra fonte). Ao meu ver, as grande vantagens de utilizar esse mecanismo são: 1) se quisermos alterar a forma de persistir os dados, teremos apenas que alterar o provider internamente; 2) podemos deixar o provider público ou privado; 3) os dados ficam sincronizados com o cursor adapter, ou seja, alterou no provider, a tela é automaticamente atualizada.

No nosso exemplo, faremos um pequeno aplicativo que salva textos no SQLite. Para tal, vamos criar uma classe que herda de SQLiteOpenHelper e que vai criar a tabela.
public class DBHelper extends SQLiteOpenHelper {

  public static final String TABLE_NAME = "messages";
  public static final String COLUMN_ID = "_id";
  public static final String COLUMN_MESSAGE="message";
 
  public static final String[] ALL_COLUMNS = { 
    COLUMN_ID, COLUMN_MESSAGE
  }; 
 
  private static final String NOME_BANCO="dbMessages";
  private static final int    VERSAO_BANCO = 1;
 
  public DBHelper(Context context) {
    super(context, NOME_BANCO, null, VERSAO_BANCO);
  }

  @Override
  public void onCreate(SQLiteDatabase db) {
    db.execSQL(
      "CREATE TABLE "+ TABLE_NAME +" ("+ 
      COLUMN_ID+" INTEGER PRIMARY KEY AUTOINCREMENT,"+
      COLUMN_MESSAGE +" TEXT )");
  }

  @Override
  public void onUpgrade(SQLiteDatabase db, 
    int oldVersion, int newVersion) {
    // Utilizar só na proxima versão :)
  }
}
Essa classe ficará responsável por criar o banco (e as suas tabelas) se não existir, ou atualizá-las caso já existam (em uma nova versão da app por exemplo).

Declare o Content Provider no AndroidManifest.xml.
<provider
  android:name="ngvl.android.excp.db.MessageProvider"
  android:authorities="ngvl.android.excp"
  android:exported="false" />
Agora, vamos implementar nosso Content Provider conforme abaixo.
public class MessageProvider extends ContentProvider {
  // Deve estar igual ao Manifest
  private static final String 
    AUTHORITY = "ngvl.android.excp";
  // Tipo de acesso que retorna todas as mensagens
  private static final int TYPE_ALL_MESSAGES = 1;
  // Tipo de acesso que retorna apenas uma mensagem
  // usando o id da mesma
  private static final int TYPE_SINGLE_MESSAGE = 2;

  private static final String BASE_PATH = "messages";
  // É através dessa URI que acessamos nosso provider
  public static final Uri CONTENT_URI = Uri.parse(
    "content://" + AUTHORITY + "/" + BASE_PATH);

  // Classe para checar se a Uri passada é valida 
  private static final UriMatcher sUriMatcher;

  static {
    sUriMatcher = new UriMatcher(UriMatcher.NO_MATCH);
    sUriMatcher.addURI(AUTHORITY, 
      BASE_PATH, TYPE_ALL_MESSAGES);
    sUriMatcher.addURI(AUTHORITY, 
      BASE_PATH + "/#", TYPE_SINGLE_MESSAGE);
  }

  private DBHelper mOpenHelper;

  @Override
  public boolean onCreate() {
    // Ao criar o Provider, inicializamos o helper
    mOpenHelper = new DBHelper(getContext());
    return true; // success
  }

  @Override
  public String getType(Uri uri) {
    return null;
  }

  @Override
  public Uri insert(Uri uri, ContentValues values) {
    int uriType = sUriMatcher.match(uri);
    SQLiteDatabase sqlDB = 
      mOpenHelper.getWritableDatabase();
    long id = 0;

    switch (uriType) {
    case TYPE_ALL_MESSAGES:
      id = sqlDB.insert(
        DBHelper.TABLE_NAME, 
        null, 
        values);
      break;
   
    default:
      throw new IllegalArgumentException(
        "Unknown URI: " + uri);
    }

    getContext().getContentResolver()
      .notifyChange(uri, null);

    return Uri.parse(BASE_PATH + "/" + id);
  }

  @Override
  public int update(Uri uri, ContentValues values, 
    String selection, String[] selectionArgs) {

    int uriType = sUriMatcher.match(uri);
    SQLiteDatabase sqlDB = 
      mOpenHelper.getWritableDatabase();

    int rowsUpdated = 0;

    switch (uriType) {
    case TYPE_ALL_MESSAGES:
      rowsUpdated = sqlDB.update(
        DBHelper.TABLE_NAME, 
        values, 
        selection,
        selectionArgs);
      break;

    case TYPE_SINGLE_MESSAGE:
      String id = uri.getLastPathSegment();
      if (TextUtils.isEmpty(selection)) {
        rowsUpdated = sqlDB.update(
          DBHelper.TABLE_NAME, 
          values,
          DBHelper.COLUMN_ID + "=" + id, 
          null);
      } else {
        rowsUpdated = sqlDB.update(
          DBHelper.TABLE_NAME, 
          values,
          DBHelper.COLUMN_ID +"="+ id +
            " and "+ selection,
          selectionArgs);
      }
      break;

    default:
      throw new IllegalArgumentException(
        "Unknown URI: " + uri);
    }

    getContext().getContentResolver()
      .notifyChange(uri, null);
    return rowsUpdated;
  }

  @Override
  public int delete(Uri uri, String selection, 
    String[] selectionArgs) {

    int uriType = sUriMatcher.match(uri);
    SQLiteDatabase sqlDB = 
      mOpenHelper.getWritableDatabase();

    int rowsDeleted = 0;
    switch (uriType) {
    case TYPE_ALL_MESSAGES:
      rowsDeleted = sqlDB.delete(
        DBHelper.TABLE_NAME, 
        selection,
        selectionArgs);
      break;

    case TYPE_SINGLE_MESSAGE:
      String id = uri.getLastPathSegment();
      if (TextUtils.isEmpty(selection)) {
        rowsDeleted = sqlDB.delete(
          DBHelper.TABLE_NAME,
          DBHelper.COLUMN_ID + "=" + id, 
          null);
      } else {
        rowsDeleted = sqlDB.delete(
          DBHelper.TABLE_NAME,
          DBHelper.COLUMN_ID +"="+ id + 
            " and " + selection,
          selectionArgs);
      }
      break;
    default:
      throw new IllegalArgumentException(
        "Unknown URI: " + uri);
    }

    getContext().getContentResolver()
      .notifyChange(uri, null);
    return rowsDeleted;
  }

  @Override
  public Cursor query(Uri uri, String[] projection, 
    String selection, String[] selectionArgs, 
    String sortOrder) {

    SQLiteQueryBuilder queryBuilder = 
      new SQLiteQueryBuilder();

    queryBuilder.setTables(DBHelper.TABLE_NAME);

    int uriType = sUriMatcher.match(uri);
    Cursor cursor = null;
    SQLiteDatabase db = 
      mOpenHelper.getWritableDatabase();
  
    switch (uriType) {
    case TYPE_ALL_MESSAGES:
      cursor = queryBuilder.query(
        db, 
        projection, 
        selection,
        selectionArgs, 
        null, 
        null, 
        sortOrder);   
      break;

    case TYPE_SINGLE_MESSAGE:
      queryBuilder.appendWhere(
        DBHelper.COLUMN_ID + "= ?");

      cursor = queryBuilder.query(
        db, 
        projection, 
        selection,
        new String[]{ uri.getLastPathSegment() },
        null,
        null,
        null);
        break;
   
    default:
      throw new IllegalArgumentException(
        "Unknown URI: " + uri);
    }

    cursor.setNotificationUri(
      getContext().getContentResolver(), uri);
  
    return cursor;
  }
}
Nossa classe herda de ContentProvider e declaramos uma constante para o authority da mesma. Esse atributo deve estar igual ao que definimos no AndroidManifest.xml pois ele faz parte do caminho da Uri que utilizaremos para acessar o provider.
Nosso provedor de conteúdo responde por dois tipos de Uri: content://ngvl.android.excp/messages e content://ngvl.android.excp/messages/X onde "X" é o id da mensagem que queremos acessar.
Por isso, instanciamos um objeto do tipo UriMatcher para checar se a Uri passada bate (match) com uma das Uris disponíveis.
No onCreate instanciamos nosso SQLiteHelper, e depois temos os quatro principais métodos: insert, update, delete e query.
Os quatro métodos são bem parecidos, eles iniciam checando que tipo de Uri foi passada e instanciando o SQLiteDatabase a partir do nosso helper. Depois efetuamos a operação correspondente no banco de dados. A parte mais importante é que em todos os quatro métodos notificamos os cursores que alguma operação foi efetuada através da chamada: getContext().getContentResolver().notifyChange(uri, null).
Com isso, o adapter que estiver observando esse ContentProvider será atualizado automaticamente.

Agora vamos criar o CursorAdapter que acessará nosso provider para exibir as mensagens na tela. Ele é um pouquinho diferente do BaseAdapter, pois contém o método newView para quando uma nova View precisa ser criada e o bindView para quando precisamos apenas preencher os componentes da View.
public class MessageCursorAdapter 
  extends SimpleCursorAdapter {

  private static final int LAYOUT = 
    R.layout.item_message;

  public MessageCursorAdapter(
    Context context, Cursor cursor) {

    super(context, LAYOUT, cursor, 
      DBHelper.ALL_COLUMNS, null, 0);
  }

  @Override
  public void bindView(View view, Context context, 
    Cursor cursor) {

    TextView txtMessage = (TextView) 
      view.findViewById(R.id.txtMessage);
    TextView txtId = (TextView) 
      view.findViewById(R.id.txtId);

    txtId.setText(
      cursor.getString(
        cursor.getColumnIndex(
          DBHelper.COLUMN_ID)));
    txtMessage.setText(
      cursor.getString(
        cursor.getColumnIndex(
          DBHelper.COLUMN_MESSAGE)));
  }

  @Override
  public View newView(Context contex, Cursor cursor, 
    ViewGroup viewGroup) {

    return LayoutInflater.from(contex).inflate(
      LAYOUT, null);
  }
}
O arquivo de layout usado pelo adapter é listado abaixo.
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal" >

  <TextView
    android:id="@+id/txtMessage"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@null"
    android:textSize="20sp" />

  <TextView
    android:id="@+id/txtId"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@null"
    android:textSize="20sp"
    android:textColor="#FF0000" />
</LinearLayout>
Agora é só usar na Activity. No nosso exemplo temos um EditText, um Button e uma ListView. Ao clicar no botão, adicionamos o texto no banco de dados via ContentProvider. Ao clicar em um item da lista, o EditText é preenchido e se clicarmos em salvar o mesmo será atualizado. Se clicarmos no item, apagar o conteúdo do EditText e clicarmos em salvar, o mesmo será excluído. Assim, podemos testar todas as operações do nosso ContentProvider.
É na Activity que usamos o CursorLoader. Esse padrão é essencial no uso de banco de dados no Android, pois ele fará a consulta dos dados em segundo plano, evitando assim o bloqueio da Thread de UI, que faz com que a aplicação apareça estar travada se tivermos com uma grande quantidade de dados. A interface LoaderCallbacks notifica quando podemos criar o loader, quando a busca foi concluída e quando o cursor foi resetado por algum motivo.
public class MainActivity extends FragmentActivity 
  implements 
    LoaderManager.LoaderCallbacks<Cursor>, 
    OnClickListener, 
    OnItemClickListener {

  SimpleCursorAdapter mAdapter;
 
  EditText mEdtMessage;
 
  boolean isEditing;
  long currentMessageId;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    mEdtMessage = (EditText)
      findViewById(R.id.edtMessage);
    findViewById(R.id.btnAdd).setOnClickListener(this);
  
    mAdapter = new MessageCursorAdapter(this, null);
    getSupportLoaderManager().initLoader(0, null, this);
  
    ListView listView = (ListView)
      findViewById(R.id.listMessages);
    listView.setOnItemClickListener(this);
    listView.setAdapter(mAdapter);
  }

  @Override
  public Loader<Cursor> onCreateLoader(
    int id, Bundle args) {

    return new CursorLoader(
      this,
      MessageProvider.CONTENT_URI,
      DBHelper.ALL_COLUMNS,
      null, 
      null, 
      DBHelper.COLUMN_ID);
  }

  @Override
  public void onLoadFinished(
    Loader<Cursor> loader, Cursor cursor) {

    mAdapter.swapCursor(cursor);
  }

  @Override
  public void onLoaderReset(Loader<Cursor> loader) {
    mAdapter.swapCursor(null);
  }

  @Override
  public void onClick(View v) {
    String message = mEdtMessage.getText().toString();
  
    if (!isEditing && TextUtils.isEmpty(message)){
      Toast.makeText(this, "Preencha a mensagem", 
        Toast.LENGTH_SHORT).show();
      return;
    }
  
    mEdtMessage.getText().clear();
  
    ContentValues values = new ContentValues();
    values.put(DBHelper.COLUMN_MESSAGE, message);
  
    if (isEditing){
      String whereClause = DBHelper.COLUMN_ID +" = ?";
      String[] whereArgs = new String[]{ 
        String.valueOf(currentMessageId) };

      if (TextUtils.isEmpty(message)){
        getContentResolver().delete(
          MessageProvider.CONTENT_URI, 
          whereClause,
          whereArgs);

      } else {
          getContentResolver().update(
            MessageProvider.CONTENT_URI, 
            values, 
            whereClause,
            whereArgs);
      }

    } else {
      getContentResolver().insert(
        MessageProvider.CONTENT_URI, 
        values);
    }
    isEditing = false;
  }

  @Override
  public void onItemClick(AdapterView<?> adaptView, 
    View view, int position, long id) {

    Cursor cursor = mAdapter.getCursor();
    cursor.moveToPosition(position);
  
    long messageId = cursor.getLong(
      cursor.getColumnIndex(DBHelper.COLUMN_ID));

    String messageText = cursor.getString(
      cursor.getColumnIndex(DBHelper.COLUMN_MESSAGE));
  
    currentMessageId = messageId;
    mEdtMessage.setText(messageText);
    isEditing = true;
  }
}
Pra que ninguém reclame, e peça o código fonte, segue abaixo o arquivo de layout :)
<RelativeLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity" >

  <Button
    android:id="@+id/btnAdd"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:text="Save" />

  <EditText
    android:id="@+id/edtMessage"
    android:hint="Digite a mensagem aqui"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/btnAdd"
    android:layout_alignBottom="@+id/btnAdd"
    android:layout_alignParentLeft="true"
    android:layout_toLeftOf="@+id/btnAdd"/>

  <ListView
    android:id="@+id/listMessages"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/edtMessage"
    android:layout_below="@+id/btnAdd" />

</RelativeLayout>

Bem povo, esse post ficou gigante. Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

domingo, 17 de novembro de 2013

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

Genymotion: o melhor emulador para Android

Olá povo,

Todo mundo que mexe com Android sabe que o emulador nativo da plataforma não é lá essas coisas. Ele demora pra abrir e é bem lento. Apesar de ser muito melhor (e recomendado) testar sua aplicação em um aparelho de verdade (aliás, em vários), o emulador pode ajudar a ver o aplicativo se comporta em outros tamanhos de tela ou versões do Android, por exemplo.
Meu aluno do TECDAM, Thomas Cristanis me deu a dica de usar o Genymotion.


Esse emulador é fantástico! Rápido, permite redimensionamento da tela, usar a webcam, e o melhor, roda o Google Play! Consequentemente todas as APIs baseadas no Play (como Google Maps v3) funcionam nesse emulador.
Para usá-lo, você terá que se registrar gratuitamente, fazer o download e seguir as etapas descritas no próprio site. Ele funciona em Windows, Mac e Linux e pode ser baixado aqui.
Ele utiliza o Virtual Box para criar uma VM com a imagem do Android. Testei com imagens de smartphones e tablets e tudo funciona muito bem.
Alguns colegas tiveram problemas com ele (no Windows, pra variar) mas isso era por conta da placa de vídeo (que não suportava GPU) ou do processador (antigo) que não suportava VMs.

4br4ç05,
nglauber

quarta-feira, 13 de novembro de 2013

Google DevBus Brasil

Olá povo,

A Google está promovendo um evento denominado Developer Bus que já passou pelas cidades de Buenos Aires, Cidade do México e Bogotá. Agora chegou a vez do Brasil receber esse evento, que acontecerá nos próximos dias 21, 22 e 23 de Novembro em São Paulo.
Mais de 2200 pessoas entre Desenvolvedores, Designers e Gerentes de Projetos se inscreveram e passaram por 3 etapas de seleção, onde apenas 40 foram selecionadas pela equipe do Google para fazerem parte desse evento, que na verdade é uma mistura de Hackaton com Reality Show. Hackaton porque os selecionados terão que desenvolver soluções para PEM (Pequenas e Médias Empresas) da América Latina utilizando as tecnologias do Google. E reality por que será transmitido ao vivo via stream diretamente do evento.
Para conseguir o objetivo em tão pouco tempo, haverão mentores do Google que são especialistas em cada tecnologia auxiliando as equipes. Como premiação, a equipe vencedora irá para Mountain View conhecer o HQ do Google.

Eu estarei lá \o/ e quando voltar vou contar como foi a experiência de ser passageiro do #DevBusBrasil.

4br4ç05,
nglauber

Mais informações:
http://codigo-google.blogspot.com.br/2013/10/o-developer-bus-chega-ao-brasil.html
http://developerbus.withgoogle.com/sao-paulo/

sábado, 26 de outubro de 2013

nglauber no Google Play

Olá povo,

Depois de anos enrolando, finalmente postei a aplicação daqui do blog no Google Play. A aplicação é gratuita e compatível com dispositivos Android 2.2 ou superior. Nela, você pode ver todos os posts daqui blog em seu smartphone e/ou tablet e ter um acesso rápido e fácil aos seus posts favoritos.

Durante o desenvolvimento da aplicação surgiram alguns desafios interessantes e que podem gerar muito conteúdo aqui pro blog. Sendo assim, como essa é a primeira versão, vou aguardar alguns feedbacks de vocês aqui pelo blog (e pelo Google Play também, claro) e assim que tiver uma versão bem estável, disponibilizarei o código ;) Acho que isso ajudará o pessoal que está começando e também aqueles que já têm experiência com Android.

Então é isso pessoal! Baixem a aplicação clicando na imagem abaixo, testem e mandem suas sugestões e bugs encontrados. Testei pouco a aplicação, então vocês devem achar vários bugs :( Mas podem reportar sem problema. Aí vou corrigindo a medida do possível.


Ah! Se algum designer caridoso quiser ajudar com o visual da aplicação, eu agradeço (mas não pago nada, digo logo :)

Abaixo coloquei dois screenshots da app.


4br4ç05,
nglauber

sexta-feira, 11 de outubro de 2013

Adeus AlertDialog! Bem-vindo DialogFragment

Olá povo,

Até a versão 2.3 do Android (API Level 10), a forma padrão de exibir mensagens para os usuários era através da classes AlertDialog, mas partir da versão 3 do Android (Honeycomb API Level 11) uma nova abordagem foi adotada, a utilização da classe DialogFragment.
Apesar de ter sido lançada na versão 3, a API de compatibilidade do Android nos permite usar esse recurso em versões anteriores. Umas das vantagens dessa abordagem é o maior controle sobre o ciclo de vida do Dialog, uma vez que ele nada mais é do que um Fragment.
Apenas para relembrar, até o 2.3 fazíamos isso:

int x = 0;
 
@Override
protected Dialog onCreateDialog(int id) {
  AlertDialog dialog = new AlertDialog.Builder(this)
    .setTitle("Título")
    .setMessage("Deseja exibir "+ x++)
    .setPositiveButton("Sim", null) // Listener aqui
    .setNegativeButton("Não", null) // e aqui
    .create();
  return dialog;
}
 
@Override
protected void onPrepareDialog(int id, Dialog dialog) {
  ((AlertDialog)dialog).setMessage("Mensagem "+ x++);
  super.onPrepareDialog(id, dialog);
}
 
public void abrirAlert(View v){
  showDialog(0);
}
A abordagem acima era a recomendada pois, se abríssimos um dialog e girássemos a tela, o mesmo era perdido. No método onCreateDialog, é criado o dialog (dããã), mas se precisássemos alterar o texto mudando apenas um detalhe (no exemplo acima, o valor de x) deveríamos usar o método onPrepareDialog conforme acima. Todos os dialogs da Acvity deviam ser criados no onCreateDialog e cada um tem o seu ID que é recebido por parâmetro. Para exibir o dito-cujo, era só chamar showDialog(ID).

A classe DialogFragment envolve (wraps) um AlertDialog, ou pode ter qualquer view. Podemos dizer que seria como um "Fragment Modal". No exemplo abaixo, temos um exemplo de um DialogFragment que recebe um título, uma mensagem e os (de 1 a 3) botões.

import android.app.AlertDialog;
import android.app.AlertDialog;
import android.app.Dialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.support.v4.app.FragmentManager;

public class SimpleDialog extends DialogFragment 
  implements OnClickListener {
 
  private static final 
    String EXTRA_ID      = "id";
  private static final 
    String EXTRA_MESSAGE = "message";
  private static final 
    String EXTRA_TITLE   = "title";
  private static final 
    String EXTRA_BUTTONS = "buttons";
  private static final 
    String DIALOG_TAG    = "SimpleDialog";
 
  private int dialogId;
 
  public static SimpleDialog newDialog(int id, 
    String title, String message, int[] buttonTexts){
    // Usando o Bundle para salvar o estado
    Bundle bundle  = new Bundle();
    bundle.putInt(EXTRA_ID, id);
    bundle.putString(EXTRA_TITLE, title); 
    bundle.putString(EXTRA_MESSAGE, message);
    bundle.putIntArray(EXTRA_BUTTONS, buttonTexts);
  
    SimpleDialog dialog = new SimpleDialog();
    dialog.setArguments(bundle);
    return dialog; 
  }
 
  @Override
  public Dialog onCreateDialog(
    Bundle savedInstanceState) {

    String title = getArguments()
      .getString(EXTRA_TITLE);
    String message = getArguments()
      .getString(EXTRA_MESSAGE);
    int[] buttons = getArguments()
      .getIntArray(EXTRA_BUTTONS);
     
    AlertDialog.Builder alertDialogBuilder = 
      new AlertDialog.Builder(getActivity());
    alertDialogBuilder.setTitle(title);
    alertDialogBuilder.setMessage(message);
        
    switch (buttons.length) {
      case 3:
        alertDialogBuilder.setNeutralButton(
          buttons[2], this);

      case 2:
        alertDialogBuilder.setNegativeButton(
          buttons[1], this);
   
      case 1:
        alertDialogBuilder.setPositiveButton(
          buttons[0], this);
    }    
    return alertDialogBuilder.create();
  }
    
  @Override
  public void onClick(
    DialogInterface dialog, int which) {
    // Sua Activity deve implementar essa interface
    ((FragmentDialogInterface)getActivity())
      .onClick(dialogId, which);
  }

  public void openDialog(
    FragmentManager supportFragmentManager) {

    if (supportFragmentManager.findFragmentByTag(
      DIALOG_TAG) == null){

      show(supportFragmentManager, DIALOG_TAG);
    }  
  }
  // Interface que erá chamada ao clicar no bot"ao
  public interface FragmentDialogInterface {
    void onClick(int id, int which);
  }
}
Podemos notar no código acima que estamos herdando da classe DialogFragment. Criei um método estático para inicializar o Dialog, lembrando que essa é uma boa prática uma vez que sempre devemos ter o construtor padrão e o Bundle armazenará o estado do Fragment. No método onCreateDialog, inicializamos o AlertDialog com os dados passados no "método construtor".
Nossa Activity deve implementar essa interface, pois não podemos manter a referência dela, uma vez que ela pode ter sido destruída ao girar o aparelho. Para abrir o dialog, verificamos se ele já foi adicionado ao FragmentManager, caso contrário, exibimos.
Pra exibir o dialog, basta fazer conforme abaixo:
public void abrirSimpleDialog(View v) {
  SimpleDialog dialog = SimpleDialog.newDialog(
    0,              // Id do dialog
    "Alerta",       // título
    "Mensagem",     // mensagem
    new int[]{      // texto dos botões
      android.R.string.ok, 
      android.R.string.cancel });
    dialog.openDialog(getSupportFragmentManager());
  }

  @Override
  public void onClick(int id, int which) {
    Toast.makeText(MainActivity.this, 
      "Botão clicado "+ which, Toast.LENGTH_SHORT)
        .show();
  }
Agora se quisermos um Dialog customizado, para por exemplo, receber input do usuário, podemos criar um arquivo de layout e associá-lo ao DialogFragment.
 
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/edtName"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:orientation="vertical"
  android:padding="16dp" >

  <TextView
    android:id="@+id/lbl_your_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Your name" />

  <EditText
    android:id="@+id/txt_your_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:imeOptions="actionDone"
    android:inputType="text" />

</LinearLayout>
O Layout é simple e contém apenas um TextView e um EditText. Vamos ver como ficará o DialogFragment que usaria esse layout.
public class EditNameDialog 
  extends DialogFragment 
  implements OnEditorActionListener {

  private static final 
    String DIALOG_TAG = "editDialog";
  private static final 
    String EXTRA_INPUT_TEXT = "message";
  private static final 
    String EXTRA_TITLE = "inputText";

  private EditText mEditText;

  // Sua Activity deve implementar essa Interface
  public interface EditNameDialogListener {
    void onFinishEditDialog(String inputText);
  }

  public static EditNameDialog newInstance(
    String title, String inputText) {

    Bundle bundle = new Bundle();
    bundle.putString(EXTRA_TITLE, title);
    bundle.putString(EXTRA_INPUT_TEXT, inputText);

    EditNameDialog dialog = new EditNameDialog();
    dialog.setArguments(bundle);
    return dialog;
  }

  @Override
  public View onCreateView(LayoutInflater inflater, 
    ViewGroup container, Bundle savedInstanceState){

    String title = getArguments()
      .getString(EXTRA_TITLE);
    String inputText = getArguments()
      .getString(EXTRA_INPUT_TEXT);

    View view = inflater.inflate(
      R.layout.layout_dialog, container);

    TextView txtView = (TextView)
      view.findViewById(R.id.lbl_your_name);
    txtView.setText(inputText);
    // Exibe o teclado virtual ao exibir o Dialog
    getDialog().getWindow().setSoftInputMode(
      WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);

    getDialog().setTitle(title);

    mEditText = (EditText)
      view.findViewById(R.id.txt_your_name);
    mEditText.requestFocus();
    // Listener para quando clicarmos 
    // em 'Done' no teclado
    mEditText.setOnEditorActionListener(this);

    return view;
  }

  @Override
  public boolean onEditorAction(TextView v, 
    int actionId, KeyEvent event) {
    // Se clicou em 'Done'
    if (EditorInfo.IME_ACTION_DONE == actionId) {
      // Notifique a Activity
      EditNameDialogListener activity = 
        (EditNameDialogListener) getActivity();
      activity.onFinishEditDialog(
        mEditText.getText().toString());
      // Feche o dialog
      dismiss();
      return true;
    }
    return false;
  }

  public void openDialog(FragmentManager fm) {
    if (fm.findFragmentByTag(DIALOG_TAG) == null) {
      show(fm, DIALOG_TAG);
    }
  }
}
Para exibir e tratar esse dialog usamos o código abaixo:
public void abrirEditDialog(View v){
  EditNameDialog editNameDialog = 
    EditNameDialog.newInstance(
      "Informação", "Digite seu nome");

  editNameDialog.openDialog(
    getSupportFragmentManager());
}
 
@Override
public void onFinishEditDialog(
  String inputText) {

  Toast.makeText(this, "Olá, " + inputText, 
    Toast.LENGTH_SHORT).show();  
}
O resultado ficará conforme a figura.


[EDITADO em (11/10/2013 às 11:20)]
Como você devem ter notado, em ambos os exemplo estamos usando a Activity para tratar o retorno do Dialog. Mas e se quisermos chamar o Dialog a partir de um Fragment?
Nesse caso podemos utilizar a propriedade Target Fragment. Ela funciona como o startActivityForResult, só que para Fragments.
// A partir de um Fragment
public void abrirSimpleDialog() {
  SimpleDialog dialog = SimpleDialog.newDialog(
    0, // Id do dialog
    "Alerta", // título
    "Mensagem", // mensagem
    new int[] { // texto dos botões
      android.R.string.ok, 
      android.R.string.cancel });
  // Segredo do sucesso! :)
  // 1 = RequestCode
  dialog.setTargetFragment(this, 1); 
  dialog.openDialog(
    getActivity().getSupportFragmentManager());
}

@Override
public void onActivityResult(int requestCode, 
  int resultCode, Intent data) {

  super.onActivityResult(
    requestCode, resultCode, data);

  int which = data.getIntExtra("which", -1);
  // Tratar dialog  
}
Com essa alteração, a interface FragmentDialogInterface pode ser eliminada (uma vez que a Activity não precisa mais implementá-la), e o código do onClick da classe SimpleDialog, ficaria dessa forma:
@Override
public void onClick(DialogInterface dialog, int which) {
  Intent it = new Intent();
  it.putExtra("which", which);
  // Chamando o onActivityResult do targetFragment
  getTargetFragment().onActivityResult(
    getTargetRequestCode(), Activity.RESULT_OK, it);
}

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

segunda-feira, 9 de setembro de 2013

O que é ser um programador?

Olá povo,

Faz tempo que não posto nada aqui pois estou muito ocupado com minhas aulas de Android e iOS. Mas meu amigo Daniel Ferreira, postou no Twitter um ótimo vídeo produzido pelo site code.org que vale esse post. Com depoimentos de grandes nomes da computação como Bill Gates e Mark Zuckenberg, o vídeo mostra o porquê, e quão legal é ser um programador. Ele também enfatiza a importância que todos nós saibamos programar um computador :)



4br4ç05,
nglauber

quarta-feira, 31 de julho de 2013

ActionBar na API de Compatibilidade

Olá povo,

No último 18/07 a Google finalmente adicionou o suporte à ActionBar na API de compatibilidade. Pelo menos para API v7 (Android 2.1 ou superior). Para usá-la, vá até o SDK Manager e atualize a API de compatibilidade marcando a opção Extras > Android Support Library.



Feito isso, vá até o Eclipse e importe o projeto appcompat disponível no diretório SDK_DIR/extras/android/support/v7. Crie um novo projeto e referencie o projeto importado anteriormente clicando com o botão direito sobre o projeto e selecionando Properties.  Em seguida, selecione a opção Android no lado esquerdo e na parte inferior, clique em Add. Selecione o projeto android-support-v7-appcompat. Agora apague o arquivo android-support-v4.jar da pasta lib do projeto, pois o projeto que acabamos de importar já tem esse arquivo.

Nossa Activity agora herdará ActionBarActivity (que herda de FragmentActivity).
import android.support.v7.app.ActionBarActivity;

public class MainActivity extends ActionBarActivity {
  // Implementação normal da Activity
}

Obrigatoriamente, nossa Activity tem que ter o estilo da R.style.Theme.AppCompat. Para tal, vá até o arquivo values/styles.xml e modifique o tema da aplicação conforme abaixo.

<style name="AppBaseTheme" 
  parent="@style/Theme.AppCompat">

Pronto! Agora é só usar a ActionBar como se estivesse no Android 3.0 ou superior :)

EDITADO em 05/08/2013

Para usar a SearchView nesse nova biblioteca, adicione o arquivo res/menu/main.xml.
<menu 
  xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:suaapp="http://schemas.android.com/apk/res-auto">

  <item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:showAsAction="always|withText"
    android:icon="@android:drawable/ic_menu_info_details"
    android:title="@string/action_settings"/>

  <item android:id="@+id/search"
    android:title="Search"
    android:icon="@android:drawable/ic_menu_search"
    suaapp:showAsAction="collapseActionView|ifRoom"
    suaapp:actionViewClass="android.support.v7.widget.SearchView" />
</menu>
Agora deixe o código da sua Activity como abaixo:
public class MainActivity extends ActionBarActivity 
  implements SearchView.OnQueryTextListener {

  private MenuItem mSearchItem;
  private SearchView mSearchView;
  private TextView mTextTeste;
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mTextTeste =
     (TextView)findViewById(R.id.textView1);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
  
    mSearchItem = menu.findItem(R.id.search); 
    mSearchView = (SearchView) 
      MenuItemCompat.getActionView(mSearchItem); 
    mSearchView.setOnQueryTextListener(this);
  
    return true;
  }

  @Override
  public boolean onQueryTextChange(String text) {
    mTextTeste.setText(text);
    return false;
  }

  @Override
  public boolean onQueryTextSubmit(String text) {
    mTextTeste.setText(text +" GO!");
    MenuItemCompat.collapseActionView(mSearchItem);
    return true;
  }
}


4br4ç05,
nglauber

segunda-feira, 15 de julho de 2013

ListView com seleção múltipla + ActionBar + ActionMode

Olá povo,

Depois de quase um mês sem postar, resolvi aproveitar o feriadão para colocar um post colaborativo e que me tirou um trauma. Senta que lá vem história...
Um dia desses, meu amigo André Melo (a.k.a. Deco Balaca) me perguntou como fazia uma ListView com seleção múltipla, e que os itens selecionados ficassem com o background diferente. Quatro anos mexendo com o danado do Android e me enrolei pra fazer isso.
A classe ListView tem uma propriedade android:listSelector que nos permite modificar o visual dos itens da lista de acordo com o seu estado (eu falei de selector nesse post aqui).
O problema é que apesar de haver a propriedade android:state_checked (usado também em componentes como Checkbox e ToggleButton), devemos usar a propriedade android:state_activated para indicar que um item da lista está checado (#tenso).
Muito bem! Tudo resolvido? Sim, se você não quiser dar suporte a versões anteriores à 3.0 (Honeycomb), caso contrário você terá que fazer as coisas manualmente.
Meu aluno do TECDAM, Carlos Eduardo Carneiro, me deu essa dica. Abaixo temos um adapter que verifica se a linha está checada, em caso positivo, ele muda o background da View da linha correspondente.
class MultiSelectAdapter extends ArrayAdapter<String>{

  public MultiSelectAdapter(
    Context context, 
    int textViewResourceId,
    List<String> objects) {

    super(context, textViewResourceId, objects);
  }

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

    View v = super.getView(
      position, convertView, parent);

    ListView listView = (ListView) parent;
    int color = listView.isItemChecked(position) ? 
      Color.argb(0xFF, 0x31, 0xB6, 0xE7) : 
      Color.TRANSPARENT;

    v.setBackgroundColor(color);

    return v;
  }
}
Estou usando um ArrayAdapter simples, mas essa abordagem funcionaria para um adapter customizado também, só que você setaria o background do layout que você carregou...
Resolvido esse problema, resolvi aproveitar esse post para mostrar como utilizar um recurso muito utilizado em aplicações Android: o Action Mode. Essa é uma característica da ActionBar do Android que permite exibir opções de menu de acordo com a necessidade.
Se tornou praticamente padrão, excluir múltiplos itens de uma lista dando um clique longo em um dos itens e depois selecionar outros (podemos ver isso no Gmail, galeria de mídia, etc.). No nosso exemplo, vou mostrar como permitir excluir múltiplos itens de uma ListView. Mas você pode estar se perguntando: ActionBar não é só pro Android 3.0 ou superior? Dê uma olhada nesse link e conheça o Sherlock, pois vamos usá-lo aqui.
O exemplo consta apenas de uma Activity mostrada (uma parte) abaixo:
public class MainActivity 
  extends SherlockActivity 
  implements 
    OnItemClickListener, 
    OnItemLongClickListener, 
    ActionMode.Callback {

  private ListView listView;
  private List<String> nomes;
  private ActionMode actionMode;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setTheme(R.style.Theme_Sherlock_Light_DarkActionBar);

    nomes = new ArrayList<String>();
    nomes.add("nglauber");
    nomes.add("CESAR.edu");
    nomes.add("CESAR");
    nomes.add("Unibratec");

    listView = new ListView(this);
    listView.setOnItemClickListener(this);
    listView.setOnItemLongClickListener(this);
    listView.setAdapter(new MultiSelectAdapter(this,
      android.R.layout.simple_list_item_1, nomes));
      setContentView(listView);
  }

  @Override
  public void onItemClick(
    AdapterView<?> adapterView, View view,

    int position, long id) {
    if (actionMode == null) {
      // Faça algo ao clicar no item normalmente
    } else {
      int checkedCount =  
        atualizarItensMarcados(listView, position);

      if (checkedCount == 0) {
        actionMode.finish();
      }
    }
  }

  @Override
  public boolean onItemLongClick(
    AdapterView<?> adapterView, View view,
    int position, long id) {

    boolean consumed = (actionMode == null);

    if (consumed) {
      actionMode = startActionMode(this);
      listView.setChoiceMode(
        ListView.CHOICE_MODE_MULTIPLE);

      listView.setItemChecked(position, true);
      atualizarItensMarcados(listView, position);
    }
    return consumed;
  }
A nossa classe implementa três interfaces, onde as duas primeiras são bem conhecidas. A última é que vamos detalhar mais no próximo trecho de código. O atributo actionMode é que vai exibir a opção de excluir e mostrar quantos itens estão selecionados. Esse atributo é inicializado no método onItemLongClick através da chamada do método startActionMode. Nesse momento, habilitamos a seleção múltipla na ListView e já checamos o item da posição onde clicamos.
Sendo assim, no método onItemClick, nós verificamos se actionMode é igual a null, nesse caso, não estamos com o ActionMode ativo na ActionBar e devemos processar o clique normalmente. Caso contrário, atualizamos a lista com novo item que foi clicado. Mas se não houver mais itens selecionados, desativamos o ActionMode chamando o método finish.

Vamos agora ver o código da interface ActionMode.Callback e o método atualizarItensMarcados.
  @Override
  public boolean onCreateActionMode(
    ActionMode mode, Menu menu) {

    getSupportMenuInflater().inflate(
      R.menu.menu_delete_list, menu);

    return true;
  }

  @Override
  public boolean onPrepareActionMode(
    ActionMode mode, Menu menu) {

    return false;
  }

  @Override
  public boolean onActionItemClicked(
    ActionMode mode, MenuItem item) {

    if (item.getItemId() == R.id.action_delete) {
      SparseBooleanArray checked = 
        listView.getCheckedItemPositions();

      for (int i = checked.size()-1; i >= 0; i--) {
        if (checked.valueAt(i)) {
          nomes.remove(checked.keyAt(i));
        }
      }
      actionMode.finish();
      return true;
    }
    return false;
  }

  @Override
  public void onDestroyActionMode(ActionMode mode) {
    actionMode = null;
    listView.clearChoices();
    ((BaseAdapter) listView.getAdapter())
      .notifyDataSetChanged();

    listView.setChoiceMode(ListView.CHOICE_MODE_NONE);
  }

  private int atualizarItensMarcados(
    ListView l, int position) {

    SparseBooleanArray checked = 
      l.getCheckedItemPositions();

    l.setItemChecked(position, 
      l.isItemChecked(position));

    int checkedCount = 0;
    for (int i = 0; i < checked.size(); i++) {
      if (checked.valueAt(i)) {
        checkedCount++;
      }
    }

    actionMode.setTitle(
      checkedCount + " selecionados");

    return checkedCount;
  }
}
O método onCreateActionMode permite carregar um arquivo de menu para actionMode, note que ele retorna true para informar que o actionMode pode ser criado. Já o método onPrepareActionMode é usado para quando queremos atualizar o actionMode após sua criação, retornamos falso para indicar que ele não foi atualizado. Quando uma opção de menu do ActionMode é selecionada, o método onActionItemClicked é chamado. Nesse método, checamos se a opção selecionada foi a de excluir, em caso positivo, obtemos a lista das posições da lista que estão marcadas. Removemos essas posições da lista e depois finalizamos o ActionMode.
Ao chamar o método finish do ActionMode, o método onDestroyActionMode é chamado. Nesse momento, setamos o atributo actionMode para null, desmarcamos os itens (caso haja algum), chamamos o notifyDatasetChanged para que a ListView seja redesenhada, e por fim, voltamos o tipo de seleção da lista como nenhum.
O método atualizarItensMarcados apenas retorna a quantidade de itens que estão checados e seta o título da actionMode.

O arquivo de menu utilizado no método onCreateActionMode é mostrado abaixo:
<menu 
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/action_delete"
    android:icon="@android:drawable/ic_menu_delete"
    android:orderInCategory="100"
    android:showAsAction="ifRoom"/>
</menu>

E o resultado, podemos ver na figura a seguir:

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

quarta-feira, 19 de junho de 2013

SlidingPaneLayout: um menu lateral estilo Facebook

Olá povo,

Uma das coisas boas de mexer a muito tempo com uma tecnologia, é que as pessoas sempre perguntam a você, mas obviamente, nem sempre você sabe a resposta. Meu amigo Rodrigo Jardim (a.k.a. Praieiro), me perguntou se eu conhecia o SlidingPaneLayout, e eu nunca tinha visto o dito cujo. Mas ele permite implementarmos um padrão de interface gráfica amplamente utilizada nas aplicações Android: menus laterais. Abaixo, coloquei um screenshot de duas "pequenas" aplicações que usam essa abordagem.


Como podemos notar, o Facebook e o GMail são dois bons exemplos de grandes aplicações que usam essa abordagem. Nesse post vou mostrar como dar os primeiros passos para construir um menu desse tipo. Vamos começar pelo arquivo de layout da aplicação, mostrado abaixo.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SlidingPaneLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/sliding_pane_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent" >

  <!-- Menu Lateral -->
  <ListView
    android:id="@+id/left_pane"
    android:layout_width="280dp"
    android:layout_height="match_parent"
    android:layout_gravity="left" />
    
  <!-- Conteúdo da tela -->
  <RelativeLayout
    android:id="@+id/rightPane"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff333333" >

    <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentLeft="true"
      android:layout_alignParentTop="true"
      android:text="MENU" 
      android:onClick="abrirMenu"/>

    <ImageView
      android:id="@+id/imageView1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:src="@drawable/ic_launcher" />

  </RelativeLayout>

</android.support.v4.widget.SlidingPaneLayout>
No SlidingPanelLayout temos apenas duas partes, a primeira (uma ListView) será o menu da aplicação. Enquanto que a segunda, será o conteúdo da tela em si. Abaixo temos o código da Activity.
public class MainActivity extends FragmentActivity 
  implements OnItemClickListener, PanelSlideListener {

  private SlidingPaneLayout mSlidingLayout;
  private ListView mList;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Colocando a Activity em tela cheia (opcional)
    requestWindowFeature(Window.FEATURE_NO_TITLE);

    setContentView(R.layout.activity_main);
  

    mSlidingLayout = (SlidingPaneLayout) 
      findViewById(R.id.sliding_pane_layout);
    mSlidingLayout.setPanelSlideListener(this);
  
    String[] opcoes = new String[] { 
      "Opção 1", "Opção 2", "Opção 3",
      "Opção 4", "Opção 5" };

    mList = (ListView) findViewById(R.id.left_pane);
    mList.setAdapter(new ArrayAdapter<String>(
      this, 
      android.R.layout.simple_list_item_1, 
      opcoes));
    mList.setOnItemClickListener(this);
  }

  // Evento de clique do botão
  public void abrirMenu(View v){
    // Se estive aberto, feche. Senão abra.
    if (mSlidingLayout.isOpen()){
      mSlidingLayout.closePane();
    } else {
      mSlidingLayout.openPane();
    }
  }

  @Override
  public void onItemClick(AdapterView<?> adapterView, 
    View view, int position, long id) {
    // TODO Tratar opções de Menu (ListView) aqui!
  }

  @Override
  public void onPanelClosed(View arg0) {
    // TODO Ao fechar o painel
  }

  @Override
  public void onPanelOpened(View arg0) {
    // TODO Ao abrir o painel
  }

  @Override
  public void onPanelSlide(View arg0, float arg1) {
    // TODO Enquanto o painel desliza
  }
}
O código acima é bem simples e está comentado.
O mais legal desse componente é que ao deslizar o dedo sobre a tela da esquerda para direita, o menu exibido (da direita para esquerda, ele fecha). Ou seja, o botão acima é opcional, mas indicado, como vemos nas aplicações em geral (como a do Facebook e Gmail) para facilitar a visualização do usuário.
Abaixo podemos ver nossa aplicações em execução com o menu lateral aberto.

É isso pessoal! Temos um menu no padrão de aplicações profissionais. Vale salientar que esse componente funciona em todas as versões do Android.

EDITADO em 29/11/2013

Várias pessoas me perguntaram (por email.... deixem os comentários aqui povo!) o que fazer com o clique do item da lista. O mais legal aqui é usar Fragments e sua stack. Ou seja, criar uma pilha de Fragments como o Android faz com as Activities. Ou seja, ao invés de irmos chamando Activities, chamamos Fragments e vamos empilhando-os no layout da direita.
Vamos ao exemplo... Crie a classe MeuFragment conforme abaixo:
public class MeuFragment extends Fragment {

  public static MeuFragment newInstance(String s){
    Bundle args = new Bundle();
    args.putString("texto", s);
  
    MeuFragment f = new MeuFragment();
    f.setArguments(args);
    return f;
  }
 
  @Override
  public View onCreateView(LayoutInflater inflater, 
    ViewGroup container, Bundle savedInstanceState) {

    View layout = inflater.inflate(
      R.layout.meu_fragment, container, false);

    TextView txt = (TextView)
      layout.findViewById(R.id.textView1);

    txt.setText(getArguments().getString("texto"));
    return layout;
  }
}
O arquivo de layout do Fragment acima, só tem um RelativeLayout com um TextView centralizado (nada de mais, vocês conseguem :)
Agora, no clique de cada um dos itens, instanciamos esse fragment passando o texto da opção clicada.
@Override
public void onItemClick(AdapterView<?> adapterView, 
  View view, int position, long id) {

  String opcao = (String)
    mList.getAdapter().getItem(position);
  
  MeuFragment f = MeuFragment.newInstance(opcao);
  
  FragmentManager fm = getSupportFragmentManager();
  // Opcional: isso removerá o fragment anterior 
  // da pilha.
  fm.popBackStack(); 
  
  fm.beginTransaction()
    .replace(R.id.rightPane, f, "frag1")
    .addToBackStack(null)
    .commit();  
}
O método addToBackStack vai adicionar o Fragment a uma pilha, dessa forma, ao clicar no botão back do aparelho, o fragment será removido automaticamente e anterior será exibido.

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Fonte: http://androidtrainningcenter.blogspot.com.br/2013/06/slidingpanelayout-android-making.html

quarta-feira, 22 de maio de 2013

Android: Dicas 9

Olá povo,

Segue mais um post da série "Dicas de Android". Aproveitem!

Dica 1 - Driver ADB universal para Windows

Essa dica foi dada pelo Pedro Borba, meu aluno da Unibratec. Muitas vezes quando conectamos alguns devices menos populares e eles não são reconhecidos pelo Windows, e às vezes é até complicado achar esses drivers na internet. O site abaixo disponibiliza uma versão do driver ADB, que funciona em muitos desses aparelhos. Vale a pena conferir.

http://adbdriver.com/

Dica 2 - Imagem de background repetida
Como nas velhas páginas HTML, às vezes é interessante colocar uma imagem de background repetida lado a lado, dando a impressão que é uma imagem maior. A solução é criar um arquivo XML (meu_bg.xml por exemplo) na pasta drawable com o seguinte conteúdo.
<bitmap 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:src="@drawable/minha_imagem_que_repete"
  android:tileMode="repeat" />
Depois é só colocar @drawable/meu_bg como sua imagem de background.

Dica 3 - Vários núcleos do processador para o Emulador
Essa dica foi dada por Daniel Sant'Ana, meu aluno do TECDAM. Quando executamos o emulador,  apenas 1 núcleo do processador da máquina é ativado. Para permitir que o emulador utilize os outros núcleos do processador, abra o gerenciador de tarefas do windows, clique em processos, e encontre o processo referente ao emulador. Em seguida, clique com o botão direito nele, e escolha a opção afinidade, então marque todos os núcleos. Se quiser, você ainda pode definir a prioridade do processo do emulador como alta. Feito isso, é possível ganhar um pouco de desempenho no emulador.

Outra opção, em fase experimental, pode ser vista aqui, na seção "Configuring Virtual Machine Acceleration". Ou aqui, no post escrito pelo meu colega Eric Cavalcanti.

Dica 4 - HttpURLConnection ou HTTPClient
A maioria das aplicações Android utiliza HTTP para enviar e receber dados. O Android tem duas APIs para essa tarefa: HTTPClient da Apache e HttpURLConnection do próprio Java.
Conforme podemos ver aqui e aqui, o pessoal da Google está recomendando utilizar o HttpURLConnection para aplicações voltadas para Android 2.3 ou superior. Nas versões 2.2 e inferiores, essa API tinha uma série de bugs que foram corrigidos a partir da versão seguinte. Além disso, alguns recursos como compressão e cache.

Dica 5 - DumbleDroid e WebCachedImageView
Meu amigo Leocádio Tiné, um dos caras que mais conhece de Android que eu conheço, acabou de disponibilizar para a comunidade essas duas bibliotecas interessantíssimas. A primeira faz o download de arquivos XML e JSON e autoMAGICAmente cria as classes Java que representam essas estruturas.
Perguntei ao Leocádio qual a diferença entre essa biblioteca e a GSON (da Google) e o Simple XML. E a resposta foi:

"A diferença básica do Dumbledroid pra essas 2 libraries é que o Dumbledroid faz caching automático em memória e em disco, e roda código específico pra Android. Por exemplo: ele usa as classes de JSON incluídas no Android SDK, e não as do Java SDK, como o GSON. As diferenças específicas: GSON: Usando GSON, você tem que carregar o JSON manualmente. Usando Dumbledroid, basta passar a URL que ele faz o carregamento, parsing e caching. É mais simples. SimpleXML: Usando SimpleXML, além de ter que carregar o XML manualmente, você tem que escrever annotations nas classes pra mapear os campos aos nós do XML. No Dumbledroid, isso não é preciso."

Além disso o DumbleDroid já tem um plugin para Eclipse que facilita ainda mais o seu uso.
Já o WebCachedImageView é bem similar ao ImageView nativo, com o benefício de passarmos apenas a URL da imagem que desejamos e ainda fazer o cache da mesma.

Segue os links para download das libs:
https://github.com/leocadiotine/Dumbledroid
https://github.com/leocadiotine/WebCachedImageView

Vou tentar fazer um post só pra essas duas libs em breve.

Dica 6 - Detectando JavaScript da WebView na Activity
Um recurso que pode trazer grandes possibilidades é conseguirmos capturar funções Java Script que são executadas dentro de uma WebView. Criem o arquivo meu.html dentro da pasta assets do projeto e deixe-o conforme abaixo.
<html>
<header>
<script type="text/javascript">
function showAndroidToast(s, t) {
  window.nglauber.showToast(s, t);
} 
</script>
</header>
<body>
  <H1>Formulario em HTML</h1>
  <form name="meuForm">
    Nome: 
    <input type="text" name="txtNome"/><br>
    Idade: 
    <input type="text" name="txtIdade"/><br>
    <input type="button" 
      onclick="showAndroidToast(txtNome.value, txtIdade.value);" 
      value="Enviar">
  </form>
</body>
</html>
É possível interceptar a função showAndroidToast e chamar o método showToast dentro da nossa Activity. Dessa forma, quando o usuário pressionar o botão do HTML, o código da Activity será executado.
public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    WebView wv = (WebView)findViewById(R.id.webView1);
    WebSettings settings = wv.getSettings();
    settings.setJavaScriptEnabled(true);
    wv.addJavascriptInterface(this, "nglauber");
    wv.loadUrl("file:///android_asset/meu.html");
  }

  @JavascriptInterface
  public void showToast(String s, String t) {
    Toast.makeText(this, 
      "Nome:"+ s + " Idade:"+ t, 
      Toast.LENGTH_SHORT).show();
  }
}
Apesar de não ser algo que não encorajo, essa solução pode ser útil para alguns tipos de tela. Disponibilizamos a interface "nglauber" para o código JavaScript chamar. Notem que no JavaScript ficou window.nglauber.showToast. Outro detalhe aqui é que existe um bug do Android 2.3 que impede que esse código funcione nessa versão. Outro detalhe é a Annotation @JavascriptInterface que só é necessária a partir do Android 4.2, em versões anteriores, basta o método ser público.

Dica 7 - Definindo uma orientação fixa via código
É possível definir uma orientação fixa para um Activity através do arquivo AndroidManifest.xml através da propriedade screenOrientation.
<activity name=".MinhaActivity"   
  android:screenOrientation="landscape"/>
Mas e se quisermos que essa configuração seja feita dependendo de alguma condição? Podemos usar o código abaixo.
setRequestedOrientation(
  ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE)

Dica 8 - Versão do Android do Aparelho
Obtendo a versão do Android que está rodando no aparelho.
int apiLevel = Build.VERSION.SDK_INT;
if (apiLevel < Build.VERSION_CODES.HONEYCOMB){
  // Usando Android 2.3 ou inferior
} else if (apiLevel < 
  Build.VERSION_CODES.ICE_CREAM_SANDWICH){
  // Android 3.x
} else {
  // ICS ou superior
}

4br4ç05,
nglauber

domingo, 5 de maio de 2013

Deploy/Debug via Wi-Fi no Android

Olá povo,

Recebi essa semana uma dúvida muito interessante do meu colega Kennedy Ximenes me perguntando se era possível fazer deploy de aplicações Android, em um dispositivo real, sem a necessidade do cabo USB. Fui pequisar e achei a solução aqui. O procedimento é bem simples e vou mostrar para vocês aqui.

Parto do pressuposto que você já consegue depurar a aplicação via USB, então você já deve possuir Google USB Driver e estar com a depuração USB habilitada nas configurações do aparelho. Feito isso, abra o terminal e vá até o diretório ANDROID_SDK/platform-tools (onde ANDROID_SDK é o diretório onde está instalado o SDK do Android). Conecte seu dispositivo via USB (é, você vai precisar do cabo nessa etapa). Depois é só digitar:

./adb tcpip 5555

Estamos habilitando o ADB para aceitar conexão via TCP através da porta 5555. O resultado deve ser como abaixo.

* daemon not running. starting it now on port 5037 *
* daemon started successfully *
restarting in TCP mode port: 5555

Depois é só conectar-se ao aparelho digitando o seguinte comando.

./adb connect 192.168.25.2:5555

Troque o endereço acima pelo IP do seu aparelho na rede Wi-Fi. Você pode checar o número IP do aparelho em Configurações > Sobre > Status. Se tudo sair bem, você receberá a mensagem abaixo:
connected to 192.168.25.2:5555

Para testar, digite:

./adb devices

Se estiver tudo ok, seu aparelho será listado como abaixo.

List of devices attached 
192.168.25.2:5555 device

Agora é só ir no Eclipse e mandar executar sua aplicação, que ela será executada magicamente no aparelho :) Obviamente também é possível fazer o debug (is on the table) da mesma.

Para voltar ao modo USB, use o comando:

./adb usb

E depois desconectamos usando o comando:

./adb disconnect 192.168.25.2:5555

4br4ç05,
nglauber

Fonte: Tech And Stuff
http://stuffandtech.blogspot.com.br/2012/03/android-quick-tip-adb-over-wifi.html


quarta-feira, 1 de maio de 2013

AsyncTaskLoader

Olá povo,

Uma das coisas mais comuns em aplicações móveis é o acesso a servidores web através do protocolo HTTP. O Android obviamente nos permite esse tipo de comunicação de várias formas. Mas uma forma interessante foi introduzida na versão 3 da plataforma: os Loaders. Esse tipo de abordagem permite isolar a Activity da classe que está fazendo o download dos dados.
Um exemplo típico dessa abordagem é a utilização da classe AsyncTask - que eu sempre usei, e ainda uso - jutamente com um ProgressDialog. Normalmente o ProgressDialog era um atributo da AsyncTask  e no onPreExecute ele era exibido, sendo ocultado no onPostExecute. O problema dessa abordagem é que ao rotacionar a tela do aparelho, a Activity é recriada. Dessa forma, quando a AsyncTask terminava seu trabalho, a instância do Dialog armazenada ficava apontando para a instância da Activity que o tinha criado, gerando uma exceção em tempo de execução.

Com a chegada dos Fragments, é possível reter a instância do mesmo e ter um controle melhor sobre a rotação da tela (e outras mudanças de configuração). Mas a abordagem que eu achei interessante é a utilização da classe AsyncTaskLoader em conjunto com o LoadManager e a interface LoaderCallbacks. Vejamos o exemplo abaixo:
public class MainActivity 
  extends FragmentActivity 
  implements LoaderCallbacks<String> {

  ProgressDialog dialog;
  String json;
 
  private static final int MEU_LOADER = 0;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Recuperando o estado da Activity
    if (savedInstanceState != null) {
      json = savedInstanceState.getString("valores");
      atualizaTela();
    }

    // Essa classe gerencia todos os Loaders
    LoaderManager lm = getSupportLoaderManager();

    // Se o JSON ainda não foi baixado
    if (json == null) {
      // Exibe o dialog
      dialog = ProgressDialog.show(
        this, "Aguarde...", "Baixando tweets");

      // E inicializa o Loader (se ele já foi 
      // inicializado, ele apenas continuará)
      lm.initLoader(MEU_LOADER, null, this);
    }
  }

  @Override
  protected void onDestroy() {
    super.onDestroy();
    // Se estiver exibindo o progress, remova-o 
    if (dialog != null && dialog.isShowing()) 
      dialog.dismiss();
  } 

  @Override
  protected void onSaveInstanceState(Bundle outState){
    super.onSaveInstanceState(outState);
    // Salvando o estado da Activity
    outState.putString("valores", json);
  }

  // Métodos da interface LoaderCallbacks -----------
  @Override
  public Loader<String> onCreateLoader(
    int id, Bundle args) {
    // Instancia e retorna a AsyncTaskLoader
    return new MinhaAsyncTask(this);
  }

  @Override
  public void onLoadFinished(Loader<String> loader, 
    String dados) {
    // Chamado quando o Loader termina seu trabalho
    // Aqui, atribuímos o resultado ao 
    // atributo json e ocultamos o dialog
    json = dados;
    atualizaTela();
    dialog.dismiss();
  }

  @Override
  public void onLoaderReset(Loader<String> loader) {
     // Chamado se o Loader for resetado
     Log.d("NGVL", "onLoaderReset");
  }

  // AsyncTaskLoader
  public static class MinhaAsyncTask 
    extends AsyncTaskLoader<String> {

    // O JSON baixado será armazenado aqui para ser 
    // repassado para Activity
    String data;

    public MinhaAsyncTask(Context context) {
      super(context);
    }

    @Override
    protected void onStartLoading() {
      // Se não baixou os dados, faça agora!
      if (data == null) {
        forceLoad();

      // Se já baixou, apenas entregue o resultado 
      } else {
        deliverResult(data);
      }
    }

    @Override
    public String loadInBackground() {
      // Nesse método será feito o download do JSON
      return downloadJSON();
    }
  }
}
O código acima está todo comentado. Então vou focar nos detalhes que devem ser observados.
O primeiro ponto é utilizar as classes do pacote android.support.v4.* pois o conceito de Loaders só surgiu no Honeycomb, então utilizei aqui a API de compatibilidade para que esse código execute sem problemas nas versões anteriores ao Android 3. O segundo ponto interessante é que, com essa abordagem o download não é reiniciado quando a Activity é recriada.
Outro detalhe é que, caso você queira chamar o loader novamente, você deve usar o método restartLoader e não o initLoader. E se quiser passar parâmetros para o Loader, pode usar um objeto Bundle e passá-lo como o segundo argumento desses métodos.
getSupportLoaderManager().restartLoader(
  MEU_LOADER, null, this);
Os métodos downloadJSON() e atualizaTela() devem ser implementados por você :) para baixar o JSON desejado e atualizar a tela da maneira apropriada.
Abaixo eu coloquei um exemplo desses dois métodos que baixa o JSON de uma busca no Twitter e exibe os textos dos Tweets em uma ListView.
private void atualizaLista() {
  if (json == null) return;
  try {
    JSONObject jsonObj = new JSONObject(json);
    JSONArray jsonResults = 
      jsonObj.getJSONArray("results");
   
    List<String> texts = new ArrayList<String>();
    for (int i = 0; i < jsonResults.length(); i++) {
      JSONObject result = jsonResults.getJSONObject(i);
      texts.add(result.getString("text"));
    }
   
    ListView list = (ListView)
      findViewById(R.id.ListView1);

    list.setAdapter(new ArrayAdapter<String>(this, 
      android.R.layout.simple_list_item_1, texts));
   
  } catch (JSONException e) {
    e.printStackTrace();
  }
}
 
private static String downloadJSON() {
  try {
    URL url = new URL(
      "http://search.twitter.com/search.json?q=jctransito");
    HttpURLConnection conexao = (HttpURLConnection)
      url.openConnection();
    conexao.connect();
   
    InputStream is = conexao.getInputStream();
    BufferedReader reader = new BufferedReader(
      new InputStreamReader(is));

    String s = reader.readLine();
    return s;
   
  } catch (Exception e) {
    e.printStackTrace();
  }
  return null;
}
Não esqueça de adicionar a permissão de INTERNET no AndroidManifest.xml.

Com abordagem acima, mesmo ao girar o aparelho, o download continuará, e caso não tenha terminado quando a Activity carregar, o ProgressDialog será exibido novamente.

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Referências:
http://developer.android.com/reference/android/app/LoaderManager.html
http://developer.android.com/reference/android/app/LoaderManager.LoaderCallbacks.html
http://developer.android.com/reference/android/content/AsyncTaskLoader.html

sexta-feira, 12 de abril de 2013

Drag and Drop no Android

Olá povo,

Desde a versão 3 (API Level 11) o Android conta com uma API de Drag and Drop que facilita para o desenvolvedor a implementação da famosa ação de "arrastar e soltar". Nesse post, que foi baseado no texto orginal de Lars Vogel, vou mostrar um exemplo simples de como usar esse recurso na sua aplicação.

Para começar, crie um novo projeto Android e certifique-se de estar usando a API Level 11 ou superior. O projeto constará basicamente de uma tela com 4 LinearLayouts com uma ImageView em cada um deles. A idéia é que a ImageView de cada LinearLayout possa ser arrastada para outro LinearLayout.

Vamos começar criando a pasta res/drawable, onde vamos adicionar dois XMLs: o primeiro servirá de background normal dos LinearLayouts citados anteriormente, enquanto que o segundo será usado de background para quando estivermos arrastando a ImageView por sobre o LinearLayout.

O primeiro arquivo será o bg.xml
<shape 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >

  <stroke
    android:width="2dp"
    android:color="#FFFFFFFF" />

  <gradient
    android:angle="225"
    android:endColor="#DD2ECCFA"
    android:startColor="#DD000000" />

  <corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp" />
</shape> 
O arquivo bg_over.xml é idêntico ao primeiro, a única mudança é a propriedade stroke color. Ela faz com que a cor da borda fique vermelha.
<shape 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >

  <stroke
    android:width="2dp"
    android:color="##FFFF0000" />

  <gradient
    android:angle="225"
    android:endColor="#DD2ECCFA"
    android:startColor="#DD000000" />

  <corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp" />
</shape> 
O arquivo de layout da aplicação ficará como abaixo:
<TableLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layoutRoot"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" >
  <TableRow>
    <LinearLayout
      android:id="@+id/topleft"
      android:layout_width="0dp"
      android:layout_height="200dp"
      android:layout_weight="1"
      android:background="@drawable/bg" >
      <ImageView
        android:id="@+id/myimage1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    </LinearLayout>
    <LinearLayout
      android:id="@+id/topright"
      android:layout_width="0dp"
      android:layout_height="200dp"
      android:layout_weight="1"
      android:background="@drawable/bg" >
      <ImageView
        android:id="@+id/myimage2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    </LinearLayout>
  </TableRow>
  <TableRow>
    <LinearLayout
      android:id="@+id/bottomleft"
      android:layout_width="0dp"
      android:layout_height="200dp"
      android:layout_weight="1"
      android:background="@drawable/bg" >
      <ImageView
        android:id="@+id/myimage3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    </LinearLayout>
    <LinearLayout
      android:id="@+id/bottomright"
      android:layout_width="0dp"
      android:layout_height="200dp"
      android:layout_weight="1"
      android:background="@drawable/bg" >

      <ImageView
        android:id="@+id/myimage4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />
    </LinearLayout>
  </TableRow>
</TableLayout>
O Layout não tem nada de especial. Os LinearLayouts topleft, topright, bottomleft e bottomright servirão de containers onde poderemos arrastar e soltar as ImageViews myimage1, myimage2, myimage3 e myimage4. Vamos agora para o código da Activity.
public class MainActivity extends Activity 
  implements OnTouchListener, OnDragListener {
 
  Drawable enterShape;
  Drawable normalShape;
 
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
  
    enterShape = getResources().
      getDrawable(R.drawable.bg_over);
    normalShape = getResources().
      getDrawable(R.drawable.bg);
  
    findViewById(R.id.myimage1).
      setOnTouchListener(this);
    findViewById(R.id.myimage2).
      setOnTouchListener(this);
    findViewById(R.id.myimage3).
      setOnTouchListener(this);
    findViewById(R.id.myimage4).
      setOnTouchListener(this);
  
    findViewById(R.id.topleft).
      setOnDragListener(this);
    findViewById(R.id.topright).
      setOnDragListener(this);
    findViewById(R.id.bottomleft).
      setOnDragListener(this);
    findViewById(R.id.bottomright).
      setOnDragListener(this);
  }

  public boolean onTouch(View view, MotionEvent me) {
    int action = me.getAction(); 
    if (action == MotionEvent.ACTION_DOWN) {
      ClipData data = ClipData.newPlainText("", "");
      DragShadowBuilder shadowBuilder = 
        new View.DragShadowBuilder(view);

      view.startDrag(data, shadowBuilder, view, 0);
      view.setVisibility(View.INVISIBLE);
      return true;
    }
    return false;
  }

  @Override
  public boolean onDrag(View v, DragEvent event) {
    switch (event.getAction()) {
    case DragEvent.ACTION_DRAG_ENTERED:
      // Ao entrar na área que pode fazer o drop
      v.setBackgroundDrawable(enterShape);
      break;
    case DragEvent.ACTION_DRAG_EXITED:
      // Ao sair da área que pode fazer o drop
      v.setBackgroundDrawable(normalShape);
      break;
    case DragEvent.ACTION_DROP:
      // Ao fazer o drop
      View view = (View) event.getLocalState();
      ViewGroup owner = (ViewGroup) view.getParent();
      owner.removeView(view);
      LinearLayout container = (LinearLayout) v;
      container.addView(view);
      view.setVisibility(View.VISIBLE);
      break;
    case DragEvent.ACTION_DRAG_ENDED:
      // Ao terminar de arrastar
      v.setBackgroundDrawable(normalShape);
      View view2 = (View) event.getLocalState();
      view2.setVisibility(View.VISIBLE);
    default:
      break;
    }
    return true;
  }
}
O código é relativamente simples e vou dar atenção aos principais pontos do drag and drop. Nossa Activity implementa duas interfaces: OnTouchListener e OnDragListener. A primeira tem a implementação no método onTouch e a segunda no onDrag. No onCreate, chamamos setOnTouchListener para as quatro ImageViews declaradas no arquivo de Layout, e logo em seguida chamamos o setOnDragListener para os LinearLayouts que servirão de container para soltarmos a ImageView dentro.

No método onTouch é onde começará o processo de drag (arrastar), nesse momento verificamos se a ação de touch é ACTION_DOWN, o que quer dizer que o dedo está pressionado sobre a ImageView.  Em caso positivo, criamos um objeto ClipData que permite transportar alguma informação junto com o objeto que está sendo arrastado. Já o objeto DragShadowBuilder serve para criar uma cópia da ImageView que será arrastada com o efeito de transparência. Para definitivamente iniciarmos o processo de arrastar, chamamos o método startDrag passando os objetos citados anteriormente juntamente com a View que disparou o evento, que no nosso caso, é uma ImageView. Por fim, deixamos a View invisível.

Já a ação de drop (soltar) é feita no método onDrag que é chamado algumas vezes com ações diferentes. Esse método é chamado enquanto a ImageView está sendo arrastada (e ao ser solta) por sobre o LinearLayout. Ao entrar na área que podemos soltar o ImageView, esse método é chamado com a ação será ACTION_DRAG_ENTERED, nesse caso, apenas mudamos o background do LinearLayout. Fazemos o inverso ao sair da área onde não podemos mais soltar a ImageView, onde a ação será ACTION_DRAG_EXITED. Já o ato de soltar propriamente dito é feito quando a ação é igual a ACTION_DROP, nesse momento realizamos as seguintes tarefas: obtemos a ImageView real que estamos arrastando através do método getLocalState(); pegamos o LinearLayout onde ela está contida com o método getParent(); removemos a ImageView do LinearLayout anterior; adicionamos no novo LinearLayout (o parâmetro v, indica o LinearLayout onde estamos soltando a ImageView); e deixamos a ImageView visível. A ação ACTION_DRAG_ENDED acontece quando todo o processo de Drag&Drop termina, nesse momento redefinimos o background e tornamos a ImageView visível novamente.
Abaixo podemos ver a aplicação em execução.
Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

quarta-feira, 3 de abril de 2013

Jornada Acadêmica Unibratec 2013.1

Olá povo,

Nos últimos dias 2 e 3 de Abril aconteceu mais uma Jornada Acadêmica da Unibratec. Como já é de costume, ministrei uma palestra, dessa vez com o título "Android e iOS: o que eles tem de diferente... ou não" em dois dias de sala lotada. Aproveito para agradecer a presença de todos.
Na oportunidade, falei sobre as diferenças e semelhanças das plataformas do Google e da Apple. Ao final da palestra, desenvolvemos uma aplicação simples em ambas as plataformas.

Os slides da apresentação estão disponíveis abaixo.


4br4ç05,
nglauber