TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes

  • 1,121 views
Uploaded on

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

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

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,121
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
30
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Trilha Android – Deixando suainterface 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 ResourceDrawable 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 ResourceDrawable 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 parapreencher 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