TDC2012 Android - Deixando Sua Interface mais Bonita com Shapes

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

Globalcode – Open4education

Dúvidas?

Obrigada!

@SuelenGC

www.suelengc.com.br

[email protected]