tdc2012 android - deixando sua interface mais bonita com shapes
DESCRIPTION
Minha apresentação no TDC2012 na trilha de Android.TRANSCRIPT
Globalcode – Open4education
Trilha Android – Deixando sua interface mais bonita com SHAPES
Suelen Goularte Carvalho
Globalcode – Open4education
Quem sou eu...
@SuelenGC
Globalcode – Open4education
Objetivos:
1. Entender o que são shapes2. Saber usar shapes3. Saber escrever shapes4. Quick Hands On
Globalcode – Open4education
App Resource
Arquivos adicionais Conteúdo estático Imagens Definições de layout Strings etc...
Globalcode – Open4education
Animation Color State List Drawable Layout Menu
String Style E muitos outros...
Existem muitos tipos de App Resources:
App Resource
Globalcode – Open4education
Drawable Resource
App Resource
Imagem XML
Globalcode – Open4education
Drawable Resource
BitmapDrawable NinePatchDrawable LayerDrawable StateListDrawable LevelListDrawable
TransitionDrawable InsetDrawable ClipDrawable ScaleDrawable ShapeDrawable
Existem muitos tipos de Drawable Resources:
Globalcode – Open4education
Shape
Drawable Resource
App Resource
Globalcode – Open4education
<?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>
Shape Resource
myshape.xml
Globalcode – Open4education
Shape Resource
MyProject/ src/ MyActivity.java res/ drawable/ icon.png myshape.xml layout/ main.xml values/ strings.xml ...
Globalcode – Open4education
bShape Resource pelo Eclipse
Globalcode – Open4education
bShape Resource pelo Eclipse
Globalcode – Open4education
Mas afinal... O que raios é um SHAPE???
Globalcode – Open4education
Objetivos:
1. Entender o que são shapes
2. Saber usar shapes3. Saber escrever shapes4. Quick Hands On
Globalcode – Open4education
<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>
main.xml
Globalcode – Open4education
Usamos SHAPES para preencher backgrounds
Globalcode – Open4education
Objetivos:
1. Entender o que são shapes2. Saber usar shapes
3. Saber escrever shapes4. Quick Hands On
Globalcode – Open4education
<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>
Shape Retangular
Globalcode – Open4education
<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>
Shape Retangular Radial
Globalcode – Open4education
<shape xmlns:android=“http://schemas.android.com/apk/res/android” android:shape=“line”>
<stroke android:width=“3dp" android:color=“@color/Pink" /> </shape>
Shape Linear
Globalcode – Open4education
<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>
Shape Ovalado
Globalcode – Open4education
<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>
Shape Anelado
Globalcode – Open4education
Curvas (<corners>) Gradiente (<gradient>) Padding (<padding>) Tamanho (<size>) Cor (<solid>) Borda (<stroke>)
Podemos definir...
Globalcode – Open4education
Objetivos:
1. Entender o que são shapes2. Saber usar shapes3. Saber escrever shapes
4. Quick Hands On
Globalcode – Open4education
Sem shapes Com shapes
Globalcode – Open4education
<?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>
shape_button.xml
Globalcode – Open4education
<?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>
shape_fields.xml
Globalcode – Open4education
<?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>
shape_0_border.xml
Globalcode – Open4education
https://github.com/SuelenGC/TDC2012-Shapes
Globalcode – Open4education
Outros exemplos...
Globalcode – Open4education
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/ShapeDrawable.html
• Exemplos de shapes http://escomic.net/217