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!

Tutorial Windows Phone #5 – Transferindo Dados entre Páginas

Padrão

Olá pessoal!

No último tutorial sobre Windows Phone, criamos um sistema simples de navegação entre duas páginas. Hoje, veremos como passar dados entre as páginas. Para início de conversa, crie um novo projeto chamado NavegacaoComParametros (ou um outro nome qualquer que você queira). Após criar, adicione uma nova página, chamada Pagina2.xaml, da mesma forma como foi feito no último tutorial.

Nosso aplicativo será constituído de três Hyperlinks, que direcionarão para a segunda página, onde será exibida qual opção foi selecionada.

Continue lendo

Tutorial Android #25 – Fazendo Ligações (Chamadas)

Padrão

Olá pessoal! Tudo bem?

Sei que é triste a dor da partida, mas esse é o último tutorial dessa primeira série de tutoriais sobre Android. Mas como disse no último post, isso não significa que o tema não será mais abordado aqui no blog. Estou considerando seriamente a possibilidade de, em breve, voltar a falar de Android e as novidades que temos ao utilizar a versão 4.

Mas por enquanto, vamos fechar essa primeira série com chave de ouro. Como toda a série foi voltada para Android, um sistema utilizado massivamente em aparelhos celulares, vamos ver hoje como realizar chamadas.

Nesta última sessão de modificações em nosso aplicativo, vamos adicionar um campo chamado telefone aos nossos restaurantes e, a partir dele, vamos possibilitar que o usuário faça uma chamada diretamente do nosso aplicativo. Bacana, não?

Continue lendo!