1.
Trilha Android – Deixando sua
interface mais bonita com SHAPES
Suelen Goularte Carvalho
Globalcode – Open4education

2.
Quem sou eu...
@SuelenGC
Globalcode – Open4education

3.
Objetivos:
1. Entender o que são shapes
2. Saber usar shapes
3. Saber escrever shapes
4. Quick Hands On
Globalcode – Open4education

4.
App Resource
 Arquivos adicionais
 Conteúdo estático
 Imagens
 Definições de layout
 Strings
 etc...
Globalcode – Open4education

5.
App Resource
Existem muitos tipos de App Resources:
 Animation  String
 Color State List  Style
 Drawable  E muitos outros...
 Layout
 Menu
Globalcode – Open4education

6.
App Resource
Drawable Resource
 Imagem
 XML
Globalcode – Open4education

7.
Drawable Resource
Existem muitos tipos de Drawable Resources:
 BitmapDrawable  TransitionDrawable
 NinePatchDrawable  InsetDrawable
 LayerDrawable  ClipDrawable
 StateListDrawable  ScaleDrawable
 LevelListDrawable  ShapeDrawable
Globalcode – Open4education

8.
App Resource
Drawable Resource
Shape
Globalcode – Open4education

9.
Shape Resource
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape="rectangle">
<gradient
android:startColor="#FFFF0000"
android:endColor=“#80FF00FF"
android:angle="45” />
<padding
android:left="7dp"
android:top="7dp"
android:right=“7dp"
android:bottom=“8dp" />
<corners android:radius="8dp" />
</shape>
Globalcode – Open4education

10.
Shape Resource
MyProject/
src/
MyActivity.java
res/
drawable/
icon.png
myshape.xml
layout/
main.xml
values/
strings.xml
...
Globalcode – Open4education

11.
Shape Resource pelo Eclipse b
Globalcode – Open4education

12.
Shape Resource pelo Eclipse b
Globalcode – Open4education

13.
Mas afinal... O que raios é um
SHAPE???
Globalcode – Open4education

14.
Objetivos:
1. Entender o que são shapes
2. Saber usar shapes
3. Saber escrever shapes
4. Quick Hands On
Globalcode – Open4education

15.
<LinearLayout
android:layout_height=“fill_parent”
android:layout_width=“fill_parent”>
…
<TextView
android:background="@drawable/myshape"
android:layout_height="wrap_content“
android:layout_width="wrap_content" />
…
</LinearLayout>
Globalcode – Open4education

16.
Usamos SHAPES para
preencher backgrounds
Globalcode – Open4education

17.
Objetivos:
1. Entender o que são shapes
2. Saber usar shapes
3. Saber escrever shapes
4. Quick Hands On
Globalcode – Open4education

18.
Shape Retangular
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape=“rectangle”>
<gradient
android:startColor=“@color/Yellow"
android:endColor=“@color/White"
android:angle="270“ />
<corners android:radius="0dp" />
</shape>
Globalcode – Open4education

19.
Shape Retangular Radial
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape=“rectangle”>
<gradient
android:type="radial"
android:startColor=“@color/Red"
android:endColor=“@color/Yellow"
android:gradientRadius="300"
android:centerX="0.5"
android:centerY="0.7” />
</shape>
Globalcode – Open4education

20.
Shape Linear
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape=“line”>
<stroke
android:width=“3dp"
android:color=“@color/Pink" />
</shape>
Globalcode – Open4education

21.
Shape Ovalado
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape=“oval”>
<solid android:color=“@color/Black“ />
<stroke
android:width="4dp"
android:color=“@color/Blue"
android:dashWidth="4dp"
android:dashGap="2dp" />
<padding
android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
</shape>
Globalcode – Open4education

22.
Shape Anelado
<shape
xmlns:android=“http://schemas.android.com/apk/res/android”
android:shape=“ring”
android:innerRadiusRatio="3"
android:thicknessRatio="8"
android:useLevel="false">
<size
android:width="48dip"
android:height="48dip" />
<gradient
android:type="sweep"
android:useLevel="false"
android:startColor="#737373"
android:endColor="#ffd300"
android:centerColor="#737373"
android:centerY="0.50“ />
</shape>
Globalcode – Open4education

23.
Podemos definir...
 Curvas (<corners>)
 Gradiente (<gradient>)
 Padding (<padding>)
 Tamanho (<size>)
 Cor (<solid>)
 Borda (<stroke>)
Globalcode – Open4education

24.
Objetivos:
1. Entender o que são shapes
2. Saber usar shapes
3. Saber escrever shapes
4. Quick Hands On
Globalcode – Open4education

25.
Sem shapes Com shapes
Globalcode – Open4education

26.
shape_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
android:width="100dp"
android:height="45dp” />
<corners android:radius="10dp" />
<solid android:color="@color/Violet" />
<stroke
android:width="2dp"
android:color="@color/White” />
</shape>
Globalcode – Open4education

27.
shape_fields.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size android:height="45dp“ />
<corners android:radius="10dp" />
<solid android:color="@color/White" />
<stroke
android:width="1dp"
android:color="@color/Violet“ />
</shape>
Globalcode – Open4education

28.
shape_0_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color=“@color/White" />
<stroke android:width="0dp"/>
</shape>
Globalcode – Open4education

29.
https://github.com/SuelenGC/TDC2012-Shapes
Globalcode – Open4education

30.
Outros exemplos...
Globalcode – Open4education

31.
Bibliografia
• Resource
http://developer.android.com/guide/topics/resources/index.html
• Drawable Resource
http://developer.android.com/guide/topics/resources/drawable-resource.html
• Shape
http://developer.android.com/guide/topics/resources/drawable-
resource.html#Shape
• Shape Drawable
http://developer.android.com/reference/android/graphics/drawable/ShapeDra
wable.html
• Exemplos de shapes
http://escomic.net/217
Globalcode – Open4education

32.
Dúvidas?
Obrigada!
@SuelenGC
www.suelengc.com.br
suelengcarvalho@gmail.com
Globalcode – Open4education