Android Shapes
Autor: Suelen GC | Publicado: 2012-07-10T21:53:00-07:00


Depois de apresentar sobre Shapes no TDC resolvi escrever um post aqui no blog.&nbsp;



Para começarmos a falar sobre shapes, precisamos entender primeiro o que são App&nbsp;Resources e Drawable Resources no Android.










O que são App&nbsp;Resources (Recursos de Aplicação) no Android?

App Resources são arquivos estáticos, imagens, definições de layout, xml's e outros que são usados no nosso código. Por exemplo, o strings.xml é um resource do tipo value.










O que são os Drawable Resources (Recursos Gráficos)?

Drawable Resource&nbsp;é um dos muitos App Resources&nbsp;e é todo recurso que pode ser desenhado (renderizado) na tela, ou melhor dizendo, activity. Pode ser um arquivo do tipo xml ou uma imagem (png, jpg, etc).










O que é o Shape?&nbsp;

Shape é um dos Drawable Resource e é usado para preencher/criar background's variados com bordas arredondadas, fundos gradientes, bordas coloridas, etc. Veremos em detalhes durante este texto.



Fisicamente, o shape é um arquivo xml e é usado para preencher/substituir backrounds de elementos gráficos. Usamos o shape no atributo android:background, ou seja, todo elemento gráfico que contiver este atributo, pode receber um shape. Segue um exemplo de utilização de shape:


Arquivo res/layout/main.xml


&lt;LinearLayout

&nbsp;&nbsp;&nbsp;&nbsp; android:layout_height=“fill_parent”

&nbsp;&nbsp;&nbsp;&nbsp; android:layout_width=“fill_parent”&gt;

&nbsp;&nbsp;&nbsp; …

&nbsp;&nbsp;&nbsp;&nbsp; &lt;TextView 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:background="@drawable/myshape" 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_height="wrap_content“

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:layout_width="wrap_content" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp; …

&lt;/LinearLayout&gt;



Repare no exemplo acima que estamos acessando o shape com a seguinte sintaxe&nbsp;@drawable/myshape. O símbolo @ indica que será acessado um recurso, a palavra drawable é o tipo do recurso e ao mesmo tempo o nome da pasta onde encontra-se nosso shape, e myshape é o nome do shape (myshape.xml) sem a extensão. Segue um código que poderia representar myshape.xml:

Arquivo res/drawable/myshape.xml


&lt;shape&nbsp;
&nbsp; &nbsp;&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"

&nbsp;&nbsp;&nbsp; android:shape="rectangle"&gt;





&nbsp;&nbsp; &nbsp;&lt;size android:height="45dp“ /&gt;

&nbsp;&nbsp;&nbsp; 

&nbsp; &nbsp;&nbsp;&lt;corners&nbsp;android:radius="10dp" /&gt;

&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp; &nbsp;&lt;solid android:color="@color/White" /&gt;

&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp; &lt;stroke 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:width="1dp"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; android:color="@color/Violet“ /&gt;

shape&gt;









Onde fica localizado o shape no projeto Android?

O shape deve ficar localizado em uma pasta chamada drawable dentro da pasta res&nbsp;do projeto.&nbsp;



Normalmente quando criamos um novo projeto Android no Eclipse, ele já nos trás quatro pastas que seus nomes iniciam com a palavra "drawable", seus nomes são: drawable-ldpi,&nbsp;drawable-mdpi,&nbsp;drawable-hdpi e&nbsp;drawable-xhdpi, Essas pastas armazenam recursos gráficos de acordo com a configuração da resolução do dispositivo.&nbsp;




Em runtime, o Android irá verificar esta configuração do device que está sendo executada a aplicação e de acordo com ela, ele irá buscar o recurso na pasta mais apropriada, apenas caso ele não encontre o recurso em alguma dessas pastas de configuração específica, ele irá buscar na pasta padrão, ou seja, a pasta drawable, que não especifica nenhuma configuração de hardware. Como o shape não é criado para uma resolução em especial, deve-se colocá-lo na pasta drawable.










Analisando o myshape.xml


Vamos analisar o arquivo myshape.xml mostrado acima. Primeiro temos a primeira tag (root element) da seguinte forma:


&lt;shape&nbsp;

&nbsp; &nbsp;&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"

&nbsp;&nbsp;&nbsp;&nbsp;android:shape="rectangle"&gt;




Todo shape deve ter como node raiz a tag&nbsp;shape. O atributo xmlns:android é obrigatório e define o namespace. O atributo android:shape&nbsp;não é obrigatório e define o tipo do shape, que podem ser 4: rectangle (retangular), line (linear), ring (anelado) e oval (ovalado). Caso não seja definido nada, o padrão é o retangular.


A seguir, temos no myshape.xml as tags e atributos abaixo:


&nbsp;&nbsp;&nbsp;&nbsp;&lt;size&nbsp;android:height="45dp“&nbsp;/&gt;

&nbsp;&nbsp;&nbsp;

&nbsp; &nbsp;&nbsp;&lt;corners&nbsp;android:radius="10dp"&nbsp;/&gt;

&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;solid&nbsp;android:color="@color/White"&nbsp;/&gt;

&nbsp;&nbsp;&nbsp;

&nbsp;&nbsp;&nbsp;&nbsp;&lt;stroke

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:width="1dp"

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:color="@color/Violet“&nbsp;/&gt;


As tags são bem auto-explicativas, size define o tamanho, corners define as bordas arredondadas, solid define a cor de fundo da forma e stroke (a menos auto-explicativa) define a borda. Segue abaixo uma lista de todas as tags que podemos definir em um shape:

&lt;corners /&gt;&nbsp;- define bordas arredondadas.
&lt;gradient /&gt;&nbsp;- define fundo gradiente.
&lt;padding /&gt;&nbsp;- define a distância da borda até o conteúdo.
&lt;size /&gt;&nbsp;- define o tamanho da forma.
&lt;solid /&gt;&nbsp;- define a cor da forma.
&lt;stroke /&gt;&nbsp;- define a cor e espessura da borda.




São muitos os atributos que podem ser definidos nas tags, principalmente na tag gradient. Neste texto não iremos detalhar cada atributo e sua utilização mas eles podem ser consultados nos links de referência deste texto. 










Melhorando o design de interface

Apesar de usarmos o shape para preencher o atributo android:background, o ideal é que isso não seja feito no xml de layout (main.xml) diretamente. O ideal seria criar um recurso de estilos (style.xml) e no elemento dentro do xml de layout aplicar o estilo. O código do myshape.xml continuaria o mesmo, abaixo segue o código do main.xml (xml de layout) e o do style.xml (estilo).




Arquivo res/layout/main.xml


&lt;LinearLayout

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_height=“fill_parent”

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_width=“fill_parent”&gt;

&nbsp;&nbsp;&nbsp;&nbsp;…

&nbsp;&nbsp;&nbsp;&nbsp; &lt;TextView

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:style="@style/field"&nbsp;/&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;…

&lt;/LinearLayout&gt;


Arquivo res/values/style.xml


&lt;resources&gt;

&nbsp; &nbsp;&nbsp;&lt;style&nbsp;android:name="field“&gt;&nbsp;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;item&nbsp;android:layout_height="wrap_content"&nbsp;/&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;item&nbsp;android:layout_width="fill_parent"&nbsp;/&gt; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;item&nbsp;android:background="@drawable/myshape"&nbsp;/&gt; 
&nbsp; &nbsp;&nbsp;&lt;/style&gt;

&lt;/resources&gt;














Links de referência:
App Resources:
http://developer.android.com/guide/topics/resources/index.html 

Drawable Resources:
http://developer.android.com/guide/topics/resources/drawable-resource.html 

Shapes Drawables:

http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape 

Câmbio desligo!