Minha apresentação no TDC2012 na trilha de Android.

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