TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes

Globalcode – Open4education

Trilha Android – Deixando sua interface mais bonita com SHAPES

Suelen Goularte Carvalho


Quem sou eu...

@SuelenGC


Objetivos:

1. Entender o que são shapes2. Saber usar shapes3. Saber escrever shapes4. Quick Hands On


App Resource

Arquivos adicionais Conteúdo estático Imagens Definições de layout Strings etc...


Animation Color State List Drawable Layout Menu

String Style E muitos outros...

Existem muitos tipos de App Resources:

App Resource


Drawable Resource

App Resource

Imagem XML


Drawable Resource

BitmapDrawable NinePatchDrawable LayerDrawable StateListDrawable LevelListDrawable

TransitionDrawable InsetDrawable ClipDrawable ScaleDrawable ShapeDrawable

Existem muitos tipos de Drawable Resources:


Shape

Drawable Resource

App 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>

Shape Resource

myshape.xml


Shape Resource

MyProject/ src/ MyActivity.java res/ drawable/ icon.png myshape.xml layout/ main.xml values/ strings.xml ...


bShape Resource pelo Eclipse


Mas afinal... O que raios é um SHAPE???


Objetivos:

1. Entender o que são shapes

2. Saber usar shapes3. Saber escrever shapes4. Quick Hands On


<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


Usamos SHAPES para preencher backgrounds


Objetivos:

1. Entender o que são shapes2. Saber usar shapes

3. Saber escrever shapes4. Quick Hands On


<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


<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


<shape xmlns:android=“http://schemas.android.com/apk/res/android” android:shape=“line”>

<stroke android:width=“3dp" android:color=“@color/Pink" /> </shape>

Shape Linear


<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


<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


Curvas (<corners>) Gradiente (<gradient>) Padding (<padding>) Tamanho (<size>) Cor (<solid>) Borda (<stroke>)

Podemos definir...


Objetivos:

1. Entender o que são shapes2. Saber usar shapes3. Saber escrever shapes

4. Quick Hands On


Sem shapes Com shapes


<?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


<?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


<?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


https://github.com/SuelenGC/TDC2012-Shapes

https://github.com/SuelenGC/TDC2012-Shapes


Outros exemplos...


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




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



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




http://developer.android.com/reference/android/graphics/drawable/ShapeDrawable.html




http://escomic.net/217


Dúvidas?

Obrigada!

@SuelenGC

www.suelengc.com.br

[email protected]

TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes

Technology

Transcript of TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes