01 Dez, 2011 16:01

Dicas de layout para aplicativos Android

Imagens .9.png

Como aplicativos Android podem ser instalados em vários smartphones que possuem telas diferentes, a gente acaba tendo que fazer várias imagens de tamanhos diferentes. Mas em alguns casos, nós podemos utilizar as imagens .9.png.

Mas o que é esse formato? Simples, ele permite que as imagens sejam esticadas, sem perder qualidade, vertical e horizontalmente (conforme determinado por você), dependendo da tela do aparelho. E como fazer? Basta utilizar um programinha disponibilizado pela Google quando você baixa o Android SDK chamado draw9patch. Para saber mais, clique aqui.

Abaixo, um exemplo de imagem .9.png:

Imagem .9.png

O exemplo acima poderia gerar os seguintes resultados sem nenhum esforço:

Botão 1 Botão 2

Aqui na empresa nós utilizamos muito esse artifício para botões que possuem o mesmo background, economizando o trabalho do designer e também o tamanho do aplicativo.

Gradiente (Degradê)

Quando queremos utilizar algum tipo de gradiente nos nossos layouts, podemos criar um arquivo xml em drawable da seguinte maneira:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#7F9BA4" android:endColor="#59707D"
    android:angle="270" />
</shape>

O que ele faz nada mais é que determinar o formato do gradiente, no nosso caso é retangular, e as cores de início e fim. É bem simples e o resultado é igual ao de uma imagem feita do mesmo jeito. O mais legal é que você também economizará o trabalho do designer e o tamanho do aplicativo.

Borda arredondada

Abaixo, outra dica: implementar bordas arredondadas.

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#00FFFF" /> 
    <padding android:left="4dp" android:top="4dp" 
        android:right="4dp" android:bottom="4dp" /> 
    <corners android:radius="4dp" /> 
</shape>

Basta você colocar na pasta drawable e chamá-lo no background de um LinearLayout, por exemplo. Os cantos ficarão arredondados!

Diferentes estados de botão

Quando temos um botão em nosso layout, é importante exibir os seus diferentes estados para o usuário saber o que está acontecendo. Para isso, precisamos criar um arquivo xml em drawable com o seguinte conteúdo, por exemplo:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"  android:drawable="@drawable/botao_selecionado" />    
    <item android:state_focused="true" android:drawable="@drawable/botao_com_foco" /> 
    <item android:drawable="@drawable/botao_normal" />
</selector>

Para usá-lo, basta chamá-lo no background do botão em questão.

Espero que essas dicas ajudem a vocês como me ajudaram. E se tiver outra, deixe seu comentário! Até breve :)

Ao navegar neste site, você consente o uso de cookies nossos e de terceiros, que coletam informações anônimas e são essenciais para melhorar sua experiência em nosso site.