[flisol] embelezando o android – 2013
DESCRIPTION
Palestra ministrada no FLISOL Campinas 2013TRANSCRIPT
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
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