Quer trabalhar com Mobile na Concrete Solutions?

Olá pessoal da Internet!

Como alguns de vocês já devem saber (ou ter percebido), atualmente estou trabalhando na Concrete Solutions, em São Paulo. Ela é uma empresa de produtos digitais muito bacana, com grande expertise em mobile / web, com práticas ágeis e muitas outras coisas legais.

E se você, meu leitor de cada dia que frequenta o meu blog mesmo sem muito conteúdo novo (desculpem…), já pensou em trabalhar lá também? Atualmente a Concrete está com muitas vagas abertas, em diferentes áreas, e para diferentes níveis!

Nossa, Rafael!!!! Mas como eu faço pra me candidatar a uma vaga nessa empresa ultra-mega-boga-bacana?????

Calma meu amigo leitor!!! Parece difícil, mas não é! Primeiramente, você vai bolar um currículo (pode ser basicão mesmo), colocando sua formação e experiências. Nada muito complexo não. Depois disso, você pode entrar lá na seção de Vagas do site da Concrete (ou pode me enviar um e-mail maroto – tem lá na página Sobre). Após isso, você vai mostrar seus conhecimentos ultra-mega-boga-incríveis através do Desafio Concrete! Apesar do nome intimidador, é simplesmente um projeto bem tranquilo que exige alguns conhecimentos básicos. É mais pra gente saber do que você é capaz, para depois batermos um papo :)

Os desafios que temos atualmente para mobile são Android, iOS e Windows Phone. Temos também vagas para o time web, para Java, .NET, Frontend, além de outras! Só dar uma olhada lá no link de vagas do site da Concrete. Ah é, e tem vagas pra você que é do Rio de Janeiro também!

Então corre lá e manda ver! Quem sabe a gente ainda não trabalha juntos qualquer dia desses?

Sundar Pichai, vice-presidente de Produtos do Google. Fonte: Android Central

O que rolou no Google I/O 2015?

Nos últimos dias 28 e 29 de maio, aconteceu em São Francisco o evento mais esperado pelos amantes do Google e do Android do ano: o Google I/O. É nesta conferência, anual e voltada para desenvolvedores, que o Google anuncia suas principais novidades e o que ela está pensando para os próximos tempos. Para facilitar a sua vida, fizemos um resumo de tudo o que foi falado por lá. Vem comigo:

Continue lendo O que rolou no Google I/O 2015?

Instalando a Allegro 5 no Mac OS (OSX Mavericks)

Olá pessoal!

Essa semana precisei instalar a Allegro 5 no Mac devido a um treinamento que estou ministrando e, putz, suei um pouco para fazer tudo funcionar da forma correta! Então vou aqui passar o caminho das pedras pro pessoal que precisa ou quer fazer o mesmo :)

O primeiro passo é instalar algum gerenciador de pacotes, como o Homebrew ou o MacPorts. Após instalados, vamos baixar as dependências para a compilação da biblioteca.

sudo port install cmake zlib freetype jpeg libogg physfs libpng flac libtheora +universal

ou

brew install cmake zlib freetype jpeg libogg physfs libpng flac libtheora

Após a obtenção dos pacotes, entra um ajustezinho para que, durante a compilação, o cmake encontre corretamente a biblioteca FreeType (que, por algum motivo é instalada em um local não-padrão). Precisei rodar um comando para criar um link no diretório padrão para ela:

sudo ln -s /usr/local/opt/freetype/include/freetype2 /usr/local/include/freetype

Depois disso, é só baixarmos o código-fonte da Allegro (pode ser a versão 5.0 ou 5.1) e descompactar. Abra o terminal, navegue até a pasta onde ele foi descompactado e digite os seguintes comandos:

mkdir build

cd build

cmake ..

make

sudo make install

E pronto! Ah, uma dica a mais é que, no Mac, precisei sempre adicionar a opção de linker -lallegro_main. Caso contrário, ocorre um erro parecido com o seguinte:

Undefined symbols for architecture x86_64:
  "_main", referenced from:
     implicit entry/start for main executable
ld: symbol(s) not found for architecture x86_64

Valeu pessoal, até a próxima :)

Captura de tela 2014-08-21 23.51.09

Exportando Assets de um PSD para Apps (para não-designers como eu)

E aí pessoal, beleza?

Bom, hoje fugindo um pouco de programação, vamos para um assunto de muitíssima utilidade: você pegou aquele PSD maneiro com o design do seu app, mas o designer esqueceu ou não pode te gerar os assets no momento… e agora José? Foi esse o meu caso recentemente e, como um ser rústico em se tratando de arte gráfica digital, cuja maior proeza é redimensionar uma imagem usando o Paint (sim, todas as imagens do blog são editadas no PAINT!), bate aquele desespero.

Bom, no meu caso, precisei pesquisar um bocado e, no final, até que o Photoshop faz algumas mágicas pra gente. Aqui estou usando a versão CC 14.2 do Photoshop… se não me engano, essa funcionalidade que vou mostrar apareceu na versão 14.1 (não faço ideia de como funciona em outras versões… se um designer leitor souber, fique a vontade pra entrar em contato que atualizamos o post :)).

Tendo em mãos o seu PSD, você vai abrir e, antes de mexer qualquer coisa, vai em Arquivo -> Gerar -> Recursos de imagem e certifique-se que a opção está marcada!

Captura de tela 2014-08-06 20.18.47

Feito isso, é só alegria. Agora, você pode ir até as suas camadas (ou layers) e renomeá-las, por exemplo, para imagem.png ou imagem.jpg. Existem uns padrões aí nessa nomenclatura para gerar assets de diferentes tamanhos automaticamente (por exemplo retina e normal, no caso do iOS). Um post mais detalhado sobre o assunto pode ser encontrado aqui.

Uma dica que eu, totalmente leigo não sabia, era como mesclar duas camadas pra exportá-las numa mesma imagem. É só segurar o Ctrl para selecionar as camadas que você deseja agrupar, clicar com o botão direito e selecionar a opção Grupo a partir de camadas. Depois, é só dar o nome do recurso a esse grupo que ele criou.

Complementando aqui a dica, recentemente eu descobri um conversor de resources de iOS para Android. Não sei vocês, mas a maioria dos designers que já trabalhei estão acostumados a gerar os resources para iOS, com a nomenclatura @2x para imagens retina e uma outra versão da imagem (por exemplo menu@2x.png menu.png). Para simplificar o nosso trabalho e o trabalho dos designers, achei no Github um projeto chamado ios2android, que nada mais é um script que, usando o ImageMagick, converte esses recursos para Android, redimensionando-os na proporção correta e criando as pastas drawable-hdpidrawable-mdpidrawable-ldpi, etc. Se tiver a versão pra iPad da imagem, ele converte pras dimensões de tablets Android também. Uma maravilha. O link do projeto é este.

As minhas impressões sobre esse script: como ele usa shell script, no Windows você precisa instalar o Cygwin (lembrando de adicionar o pacote do ImageMagick). No Mac, via Homebrew (conforme especificado na própria descrição do repositório), é bem simples (ele foi pensado pra rodar no Mac mesmo). Já no Linux, que tecnicamente seria de boa também, tive o problema de que as imagens ficaram com metade do tamanho que deveriam ficar. Eu não manjo quase nada de shell script… caso alguém saiba e consiga investigar o motivo disso acontecer no nosso amigo Linux, faça um pull request lá no projeto e contribua com o Open Source! :)

Bom pessoal, é isso! Fica a dica! 😀

Utilizando o Maps v2 no Android

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

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!