Criando um Novo Projeto e Criando um Emulador no Android Studio – Tutorial Android 2

Padrão

Olá pessoal! No último post sobre Android, vimos como configurar o ambiente para programarmos, utilizando o Android Studio. Neste post, vamos ver como criar um projeto no famoso estilo Hello World, e um dispositivo virtual para a executarmos o aplicativo. Assim, você não precisa necessariamente de um celular com Android para começar a desenvolver para a plataforma, apesar de ser bastante recomendado 🙂

Ao abrir o Android Studio, vamos selecionar a opção Start a new Android Studio project. O guia que será aberto em seguida, nos auxiliará a criar um projeto sem muito esforço. Logo na primeira tela, vamos informar alguns dados básicos, como o nome do aplicativo (que utilizaremos Hello World) e o Company Domain, que nada mais é que um domínio que você tenha. Isso ajudará a criar um identificador único para seu aplicativo. No meu caso, vou colocar rafaeltoledo.net, mas você pode, por exemplo, utilizar seu nome no Github e criar o seu próprio domínio (por exemplo, rafaeltoledo.github.io). Para este projeto, não selecionaremos o suporte a C++. Vamos guardar isso para um tutorial mais avançado 🙂

Na tela seguinte, vamos configurar os módulos que nosso projeto terá, além das versões suportadas do Android. No momento que escrevo este tutorial, a minha recomendação é utilizar a API 16 como Minimum SDK. Assim, nosso aplicativo executará em mais de 97% dos dispositivos Android atualmente ativos. Você pode acompanhar a evolução das versões neste site, atualizado mensalmente.

Neste primeiro momento, vamos selecionar apenas a opção Phone and Tablet. Também vamos deixar os outros módulos, como Wear, TV e Auto para outras oportunidades e tutoriais futuros.

Na tela seguinte, vamos selecionar a opção Basic Activity. Você perceberá que muita coisa será gerada e criada, mas não se preocupe, vamos entender o que é cada coisa ao seu tempo. Avance utilizando a opção Next.

Por fim, vamos manter o nome da Activity como MainActivity, deixando as opções padrão como estão. Clique em Finish para finalizarmos o wizard.

Aguarde alguns momentos até que as dependências do projeto sejam iniciadas e a primeira compilação seja realizada.

Para executarmos este projeto, vamos criar um emulador, conhecido como AVD (Android Virtual Device). Para isso, clique no botão AVD Manager na barra de ferramentas do Android Studio.

Na janela que aparecer, selecione a opção Create Virtual Device…, que iniciará o wizard para a criação de um novo emulador.

Na tela seguinte, será exibida uma série de modelos de celular e tablet, que servirá como base para o nosso emulador. Escolha qualquer um que desejar, como por exemplo o Nexus 5. Clique em Next para avançar.

Na tela seguinte, escolheremos a imagem que utilizaremos em nosso dispositivo. A imagem contém o sistema operacional em si. A minha recomendação é escolher uma versão mais recente, e, caso seu processador e sistema operacional seja 64 bits (provavelmente é), escolha a opção x86_64 e com as APIs do Google (with Google APIs). Para este caso, estou selecionando a versão 7.1.1. Caso a imagem ainda não tenha sido baixada, clique na opção Download.

Na última tela, temos algumas opções do dispositivo, como câmera, memória e armazenamento. Por enquanto, mantenha as opções padrão e finalize.

Feche a janela do AVD Manager e clique para executar o projeto, no botão com o formato de um play na barra de ferramentas do Android Studio.

Feito isso, aguarde alguns instantes até que o emulador seja carregado e o aplicativo compilado, e então você verá seu primeiro aplicativo Android sendo executado! 🙂

E é isso pessoal! No próximo post vamos entender melhor a estrutura de um projeto Android e começar, de fato, a colocar a mão na massa! Até lá!

 

Desenvolvendo para Android com Kotlin: Como Começar?

Padrão

Olá pessoal!

Acredito que alguns de vocês já tenham ouvido falar no Kotlin. Pra quem não conhece, o Kotlin é uma linguagem que vem sendo desenvolvida pela Jetbrains (a empresa responsável pelo Android Studio, IntelliJ IDEA e uma porção de IDEs muito boas), focada na JVM, Android e web. A princípio, ela pode ser vista como um Java menos (muito) verboso. Por alguns, ela é chamada o Swift do Android! 🙂

Apesar de ainda estar em desenvolvimento, já é possível criar aplicativos completos utilizando essa linguagem, e é exatamente esse o propósito desse post: mostrar como configurar a sua IDE e criar o primeiro projeto usando Kotlin.

Bom, o primeiro passo é instalar os plugins do Kotlin no seu Android Studio ou IntelliJ. Para isso, abra as configurações da IDE e localize a opção Plugins. Ali, clique em Install JetBrains plugin… e localize os plugins Kotlin e Kotlin Extensions for Android.

Kotlin PluginsFeito isso, basta reiniciar a sua IDE para que a instalação esteja completa.

Com isso, já podemos criar o nosso projeto Android. A criação em nada difere de um projeto comum. Como ainda não temos um template, no início, temos que converter as classes manualmente. O que difere aqui são os arquivos de configuração do Gradle, que terão os plugins do Kotlin adicionados:

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.3.1'
        classpath 'org.jetbrains.kotlin:kotlin-gradle-plugin:0.12.1230'
        classpath 'org.jetbrains.kotlin:kotlin-android-extensions:0.12.1230'
    }
}

allprojects {
    repositories {
        jcenter()
    }
}

Aqui, adicionamos ao classpah os plugins do Kotlin (kotlin-gradle-plugin e kotlin-android-extensions – que não será utilizado ainda nesse primeiro tutorial).

No build.gradle do projeto, aplicamos o plugin e adicionamos a biblioteca padrão do kotlin:

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'

android {
    compileSdkVersion 23
    buildToolsVersion '23.0.1'

    defaultConfig {
        applicationId 'net.rafaeltoledo.hellokotlin'
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName '1.0'
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.0.1'
    compile 'org.jetbrains.kotlin:kotlin-stdlib:0.12.1230'
}

Caso tenha escolhido para que o Android Studio gere a primeira Activity, você pode convertê-la para Kotlin indo até o menu Code -> Convert Java File to Kotlin File. Aquela sua Activity marota em Java vai virar algo mais ou menos assim:

package net.rafaeltoledo.hellokotlin.activity

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import net.rafaeltoledo.hellokotlin.R

public class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main)
    }
}

Agora é só executar e é só alegria. Até a versão 0.11, era necessária uma pasta de sources específica para o Kotlin, mas com a 0.12+, já não é necessário (perceba que os arquivos .kt ficam na pasta java de sources).

É isso pessoal! Aguardem que logo logo eu trago mais novidades!

Utilizando o Maps v2 no Android

Padrão

Olá pessoal! Nesse post vamos ver rapidamente como é simples adicionar a (nem tão nova assim) API de mapas da Google no seu aplicativo Android. A princípio vamos simplesmente adicionar um mapa na tela (futuramente, pretendo fazer outros posts mostrando como realizar outras “façanhas” como adicionar marcadores, traçar rotas e outras coisas).

Bom, como já é de praxe, vamos criar um novo projeto no Android Studio. Para esse tutorial, estou utilizando a versão 0.8.1 da IDE, já em sua fase beta. Com o projeto criado, o primeiro passo é adicionar a biblioteca Google Play Services ao projeto. Nesse passo, é bom verificar se ela está instalada. Para isso, abra o seu SDK Manager, e verifique na categoria Extras se o Google Repository está instalado. Caso hajam atualizações, é sempre recomendado baixá-las.

Captura de tela 2014-06-30 21.56.47

Após certificar-se de que está instalado, temos duas possibilidades para adicioná-la ao projeto. Primeiramente, você pode ir até o menu File -> Project Structure…, selecionar o módulo que corresponde ao seu app (no meu caso, app mesmo), selecionar a aba Dependencies e adicionar o Google Play Services clicando no botão + e selecionando Library dependency. Procure por Google Play Services na lista que surgir.

Captura de tela 2014-06-30 22.00.33

Captura de tela 2014-06-30 22.00.55

Outra forma, é simplesmente adicionar a dependência no arquivo build.gradle do módulo do seu app, ficando assim:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.google.android.gms:play-services:+'
}

Nesse caso, a IDE te oferecerá para sincronizar o projeto para que as dependências sejam atualizadas.

O próximo passo é autorizarmos o nosso app a receber o maps. Acesse este link para ir até o console de APIs do Google. Faça login com a sua conta Google e, então, clique sobre o botão Create Project. Preencha o nome do projeto e escolha um ID (ou deixe como está) para que seja criado um projeto. Com o projeto criado, ele deverá aparecer na sua lista de projetos.

Captura de tela 2014-06-30 22.06.52

Clique sobre ele e selecione a opção Enable an API.

Captura de tela 2014-06-30 22.07.04

Procure na lista pela opção Google Maps Android API v2 e habilite-a.

Captura de tela 2014-06-30 22.07.32

Agora, clique sobre a opção Credentials no menu esquerdo e clique sobre a opção Create new key, selecionando a opção Android key logo em seguida. Por fim, clique sobre o botão Create. Você pode, nessa tela, limitar essa sua chave a uma determinada combinação de assinatura + identificador (pacote) do seu app. Como a API é gratuita somente até certo ponto, é extremamente recomendável criar esse controle quando seu aplicativo for publicado / distribuído. Com a chave criada, copie o valor da API key gerada.

Voltando ao seu app, vamos configurar nosso arquivo AndroidManifest.xml. Primeiramente, precisamos adicionar algumas permissões:

<permission
    android:name="net.rafaeltoledo.exemplomapa.permission.MAPS_RECEIVE"
    android:protectionLevel="signature" />

<uses-permission android:name="net.rafaeltoledo.exemplomapa.permission.MAPS_RECEIVE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!-- Opcionais, caso necessitar da localização do usuário -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Vale ficar atento nesse ponto de que criamos uma permissão específica ali que deve começar com o pacote do seu app (no meu caso, net.rafaeltoledo.exemplomapa). Em seguida, vamos adicionar uma restrição ao AndroidManifest, já que a nova API de mapas requer OpenGL ES 2 ou superior. Adicione a seguinte tag logo antes do nó application:

<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true" />

Por último, basta adicionar duas tags meta-data ao nó application (dentro dele):

<!-- Requerido pelo Google Maps -->
<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="SUA API KEY AQUI" />

<!-- Requerido pelo Google Play Services -->
<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />

E pronto. Agora, basta adicionar a tag com o mapa em seu XML de layout:

<fragment
    android:id="@+id/map"
    class="com.google.android.gms.maps.MapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Uma última dica: caso esteja suportando versões abaixo do Android 3.0, substitua MapFragment por SupportMapFragment. E é isso! Ao executar, já teremos nosso mapa na tela!

Captura de tela 2014-06-30 22.31.11

Por hoje é só pessoal!

Criando um Navigation Drawer customizado no Android

Padrão

Olá pessoal! Voltando a postar aqui no blog, hoje vamos ver como criar um Navigation Drawer customizado no Android. Navigation Drawer, pra quem não sabe, é aquele menuzinho deslizante no Android que vem do lado esquerdo do app, sinalizado pelos três traços horizontais ao lado do ícone do aplicativo na Action Bar.

Captura de tela 2014-06-24 20.06.17

Nas últimas versões do Android Studio, nós já temos um modelo de Activity que cria um Navigation Drawer pra gente, um modelo simplezinho com uma lista de opções. Nesse post, vamos ver como criar um Navigation Drawer com uma View customizada e fazer aquele visual bacana pro seu app.

Pra início de conversa, crie um projeto no seu Android Studio (estou utilizando para esse post a versão 0.6.1) e utilize o modelo de Activity com o Navigation Drawer.

Captura de tela 2014-06-24 20.12.13

Ao criar uma Activity com esse modelo, uma porção de código é gerada (classes e XMLs de layout). Vamos analisar alguns pontos principais.

  • Activity: Simplificadamente, possui como layout um DrawerLayout (para o efeito de deslize do Navigation Drawer), tendo como filhos o Fragment do Navigation Drawer e um FrameLayout onde o conteúdo das telas será colocado. Já no código, o ponto mais importante é o método onNavigationDrawerItemSelected(), método de callback chamado toda vez que um elemento do drawer é selecionado.
  • NavigationDrawerFragment: a classe que representa o nosso drawer. No wizard é gerada uma tonelada de código, mas podemos destacar o método onCreateView() no qual criamos o layout do drawer e o método selectItem(), responsável por notificar o que foi selecionado nele.

Nesse código gerado, temos um fragment chamado PlaceholderFragment, utilizado apenas para criar o efeito de mudança nas opções. Além disso, o layout do drawer é simplesmente uma lista semi-transparente.

Captura de tela 2014-06-24 21.12.45

Para este exemplo, então, vamos criar um Navigation Drawer mais interessante, com um cabeçalho para um resumo de um perfil de usuário (fictício), vamos deixar essas três opções de navegação que já estão ali (ou mesmo podemos adicionar mais algumas) e um rodapé para créditos de desenvolvimento. Além disso, vamos fazer com que o Navigation Drawer mantenha destacada a página de navegação atual do usuário.

Vamos lá. O primeiro passo é modificarmos o arquivo de layout do Navigation Drawer, no caso, o arquivo fragment_navigation_drawer.xml. Adicionei um RelativeLayout ao redor da lista e a configurei para ficar entre o TextView de topo (perfil do usuário) e rodapé (créditos). Ficou assim:

<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"
    android:background="@android:color/white"
    tools:context="net.rafaeltoledo.hellospringapi.NavigationDrawerFragment">

    <TextView
        android:id="@+id/headerView"
        style="?android:attr/textAppearanceLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"        
        android:drawableLeft="@drawable/photo"
        android:gravity="center_vertical"
        android:padding="25dp"
        android:text="Rafael Toledo" />

    <TextView
        android:id="@+id/footerView"
        style="?android:attr/textAppearanceMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"        
        android:gravity="center"
        android:padding="20dp"
        android:text="Desenvolvido por Rafael Toledo"
        android:textStyle="bold" />

    <ListView
        android:id="@+id/navigationItems"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/footerView"
        android:layout_below="@+id/headerView"
        android:background="#cccc"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />

</RelativeLayout>

O próximo passo é modificarmos a forma como o NavigationDrawerFragment lida com seu layout (já que anteriormente ele o tratava apenas como uma lista). Vamos fazer uma leve modificação no método onCreateView() para que ele busque a lista no layout. Fica assim:

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

    mDrawerListView = (ListView) view.findViewById(R.id.navigationItems);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    });
    mDrawerListView.setAdapter(new ArrayAdapter<String>(
            getActionBar().getThemedContext(),
            android.R.layout.simple_list_item_activated_1,
            android.R.id.text1,
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
            }));
    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return view;
}

Veja que não modificamos muita coisa. Só fizemos alguns ajustes devido ao fato de que o elemento raiz do layout do drawer não é mais a lista e sim o RelativeLayout. Dessa forma, precisamos fazer o lookout nele pra buscar a lista. Se executarmos o app nesse ponto, teremos algo assim:

Captura de tela 2014-06-24 21.30.59

Percebam que o conteúdo está um pouco “espremido” no Navigation Drawer devido a sua largura. Segundo as boas práticas de design do Android, um Navigation Drawer pode ter entre 240dp 320dp. Vamos alterar a sua largura no arquivo values/dimens.xml para 300dp, alterando o valor de navigation_drawer_width.

Captura de tela 2014-06-24 21.35.23

Já ficou mais interessante, né? O negócio agora é fazermos as opções serem, de fato, selecionadas quando forem clicadas, ficando fácil pro usuário saber em qual tela ele está. Pra isso, basta fazermos uma pequena modificação no método onCreateView() do NavigationDrawerFragment, alterando o layout do adapter de simple_list_item_1 para simple_list_item_activated_1. Simples não?

Captura de tela 2014-06-24 22.06.59

E é isso minha gente! Ah, é bom ficar atento que esse último passo não funciona no Android 2.3! Se bem que, hoje, pra um app novo, já não compensa (na minha opinião) suportar o Gingerbread… Bola pra frente devs!

Até a próxima!

Android Studio – Visão Geral

Padrão

Olá pessoal!

Nos últimos tempos, temos várias novidades no que diz respeito ao mundo Android. Tivemos o KitKat (4.4), Nexus 5, SDK do Google Glass, etc. Além disso, tivemos uma novidade ainda em fase de cozimento desde o último evento Google I/O: o Android Studio.

android-studioBaseado na IDE IntelliJ (não tão popular assim no Brasil, mas muito forte lá fora), ela é bem mais leve que o nosso amigo Eclipse, mesmo estando ainda em versão experimental (enquanto escrevo esse post, ela o Android Studio encontra-se na versão 0.4).

O grande diferencial dela para o plugin ADT que tínhamos lá no Eclipse, é o uso do Gradle, um poderoso sistema de gestão de builds. Como pretendo mostrar em alguns posts daqui pra frente, com o Gradle, fica muito mais de boa fazer a gestão das versões do nosso app (por exemplo, uma versão gratuita, outra paga). Além disso, no Android Studio, as ferramentas se sentem muito mais em casa, com previews em tempo real dos layouts XML, integração com Git / Github, e mais um monte de coisa bacana. Tudo isso com um visual muito mais atraente que o nosso amigo Eclipse.

Pra instalar, não tem erro, basta ter a JDK instalada e baixar daqui o instalador do Android Studio, que já vem tudo no jeito. Ah, uma dica pro pessoal que usa Windows: evite instalar na pasta Arquivos de Programas pra não ter problemas de permissão (tive problemas nesse sentido que, só depois, fui descobrir o motivo).

Logo logo, farei alguns posts sobre como utilizar essa nova IDE. Por isso, fiquem de olho aqui no blog! Prometo não sumir esse ano! 🙂