[flisol] embelezando o android – 2013

eee19.com

Embelezando o Android

Douglas Drumond!drumond.douglas@gmail.com

eee19.com

Importância de uma boa interface

eee19.com

eee19.com

eee19.com

Design

eee19.com

eee19.com

eee19.com

eee19.com

AVISO

eee19.com

AVISO"With great power comes great responsibility"

eee19.com

Aplicativo

eee19.com

Formas

eee19.com

XML

eee19.com

<shape>

eee19.com

android:shape=…

• oval!

• rectangle!

• line!

• ring

eee19.com

eee19.com

rectangle

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<solid android:color="#0064A0" />

!</shape>

eee19.com

eee19.com

rectangle

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<solid android:color="#0064A0" />

<corners android:radius="15dp" /> !</shape>

eee19.com

eee19.com

button

<selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <item android:drawable="@drawable/button_normal" /> </selector>

eee19.com

res/drawable

• button_focused!

• button_normal!

• button_pressed!

• button

eee19.com

activity_main.xml

<Button android:id="@+id/view3" android:layout_width="120dp" android:layout_height="80dp" android:layout_marginTop="64dp"

android:background="@drawable/button" android:text="@string/button_label"

/>

eee19.com

activity_main.xml

<Button android:id="@+id/view3" android:layout_width="120dp" android:layout_height="80dp" android:layout_marginTop="64dp"

android:background="@drawable/button" android:text="@string/button_label"

android:textColor="@drawable/button_caption" />

eee19.com

button_caption.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_pressed="true" android:color="#0FF" /> <item android:state_focused="true" android:color="#FFF" /> <item android:color="#FFF" /> </selector>

eee19.com

eee19.com

XML Bitmap<?xml version="1.0" encoding="utf-8"?> <bitmap     xmlns:android="http://schemas.android.com/apk/res/android"     android:src="@[package:]drawable/drawable_resource"     android:antialias=["true" | "false"]     android:dither=["true" | "false"]     android:filter=["true" | "false"]     android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |                       "fill_vertical" | "center_horizontal" | "fill_horizontal" |                       "center" | "fill" | "clip_vertical" | "clip_horizontal"]     android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

eee19.com

XML Bitmap

<?xml version="1.0" encoding="utf-8"?> <bitmap     xmlns:android="http://schemas.android.com/apk/res/android"     android:src="@[package:]drawable/drawable_resource"     android:antialias=["true" | "false"]     android:dither=["true" | "false"]     android:filter=["true" | "false"]     android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |                       "fill_vertical" | "center_horizontal" | "fill_horizontal" |                       "center" | "fill" | "clip_vertical" | "clip_horizontal"]

    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

eee19.com

XML Bitmap repeat

eee19.com

XML Bitmap mirror

eee19.com

Custom font

Typeface type = Typeface.createFromAsset(getAssets(), "fonts/Chalkboard.ttc");

eee19.com

Icon font

eee19.com

developer.android.com

eee19.com

developer.android.com

eee19.com

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

eee19.com

Agora um exemplo de componente

eee19.com

SlidingMenuhttps://github.com/jfeinstein10/slidingmenu

eee19.com

SlidingMenu

• Foursquare!

• Rdio!

• 9GAG!

• Wunderlist 2!

• Falcon Pro!

• …

eee19.com

eee19.com

SlidingMenupublic class SlidingExample extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setTitle(R.string.attach); // set the content view setContentView(R.layout.content); // configure the SlidingMenu SlidingMenu menu = new SlidingMenu(this); menu.setMode(SlidingMenu.LEFT); menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); menu.setShadowWidthRes(R.dimen.shadow_width); menu.setShadowDrawable(R.drawable.shadow); menu.setBehindOffsetRes(R.dimen.slidingmenu_offset); menu.setFadeDegree(0.35f); menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT); menu.setMenu(R.layout.menu); } }

eee19.com

SlidingMenu<com.slidingmenu.lib.SlidingMenu xmlns:sliding="http://schemas.android.com/apk/res-auto" android:id="@+id/slidingmenulayout" android:layout_width="fill_parent" android:layout_height="fill_parent" sliding:viewAbove="@layout/YOUR_ABOVE_VIEW" sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND" sliding:touchModeAbove="margin|fullscreen" sliding:behindOffset="@dimen/YOUR_OFFSET" sliding:behindWidth="@dimen/YOUR_WIDTH" sliding:behindScrollScale="@dimen/YOUR_SCALE" sliding:shadowDrawable="@drawable/YOUR_SHADOW" sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH" sliding:fadeEnabled="true|false" sliding:fadeDegree="float" sliding:selectorEnabled="true|false" sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/>

eee19.com

Referências

eee19.com

www.androidviews.net

eee19.com

appdevwiki.com

eee19.com

Mais um pouco• Google Fonts!

• Font Squirrel!

• Fontello!

• IcoMoon

eee19.com

Obrigado

• Twitter/ADN @douglasdrumond!

• www.eee19.com!

• gplus.to/douglasdrumond