Apresentação feita para o evento #devfestsp15

1. ANDROID
com estilo
—Nathalie Lima

2. _Nathalie Lima
+NathalieLima
nathaliepl@gmail.com

3. É um assunto pouco explorado em palestras de Android;
Muitos desenvolvedores Android foram e/ou são programadores
backend;
As telas são a apresentação do app para os usuários.
Motivações

4. A “moda" no Android
Customização de views: a evolução
Customizando o tema do app
#styles: benefícios a longo prazo
Batalha de ViewGroups
Reutilizando layouts
#WTF: padding, margin e weight
5 dicas para montar sua tela
Agenda

5. 2009 2011 2011 2014
A “moda” no Android

6. Na época do Holo Design (IceCream Sanduich) o
Android Asset Studio era o nosso herói…
http://romannurik.github.io/AndroidAssetStudio/
cc
Customização de views: a evolução

7. … e a ActionBar Sherlock ajudava dando suporte para a
ActionBar nas versões 2.x
http://actionbarsherlock.com/
Customização de views: a evolução

8. A mágica fica por conta das libs
AppCompat + Android Design Support Library
Customização de views: a evolução
dependencies {
compile "com.android.support:appcompat-v7:23.0.0"
compile "com.android.support:design:23.0.0"
}

9. Android Design Support Library
Tab Layout
Floating Action Button & Snackbar
Navigation View
Floating labels fot editing text
http://android-developers.blogspot.com.br/2015/05/android-design-support-library.html
Customização de views: a evolução

10. Customizando o tema do app
@android:style/Theme.Material (dark version)
@android:style/Theme.Material.Light (light version)
@android:style/Theme.Material.Light.DarkActionBar
Fonte: http://developer.android.com/training/material/theme.html

11. Customizando o tema do app
<resources>
<style name="AppTheme" parent=“android:Theme.Material">
<item name=“android:colorPrimary">@color/primary</item>
<item name="android:colorPrimaryDark">@color/primary_dark</item>
<item name=“android:colorAccent">@color/accent</item>
</style>
</resources>
Obs.: Agora o estilo do tema pode ficar apenas na pasta values.

12. Material Palette - http://www.materialpalette.com/
Customizando o tema do app

13. Material Palette - http://www.materialpalette.com/
Customizando o tema do app

14. Customizando o tema do app
<resources>
<color name="primary">#607D8B</color>
<color name="primary_dark">#455A64</color>
<color name="primary_light">#CFD8DC</color>
<color name="accent">#CDDC39</color>
<color name="primary_text">#212121</color>
<color name="secondary_text">#727272</color>
<color name="icons">#FFFFFF</color>
<color name=“divider">#B6B6B6</color>
</resources>

15. Belezura, mas e agora como faço
pra customizar as outras coisas?
#xatiado #cadeDocumentacaoGoogle #fuuu
EditTexts, Switch Buttons, Popup Menu, SearchView
Customizando o tema do app

16. <style name=“AppTheme" parent=“@style/Theme.AppCompat.Light.NoActionBar”>
<!— texto dos actionMenus da Toolbar —>
<item name=“actionMenuTextColor”>@color/xxx</item>
<!— cor padrão de todas as activities que usarem o tema —>
<item name=“android:windowBackground”>@color/xxx</item>
<!— cor padrão dos textos do app —>
<item name=“android:TextColorPrimary”>@color/xxx</item>
<!— drawable customizado com o botão back da toolbar —>
<item name=“homeAsUpIndicator”>@drawable/xxx</item>

17. <!— cor no estado normal das views de controle
(ex. editText, switchButton) —>
<item name=“colorControlNormal”>@color/xxx</item>
<!— cor no estado active das views de controle
(ex. editText, switchButton) —>
<item name=“colorControlActivated”>@color/xxx</item>
<!— cor no estado normal (desligado) para o SwitchButton —>
<item name=“colorSwitchThumbNormal”>@color/xxx</item>

18. <!— searchView na toolbar —>
<item name=“searchViewStyle”>@style/SearchViewStyle</item>
<style name=“SearchViewStyle” parent=“Widget.AppCompat.Light.SearchView”>
<item name=“android:textColorHint”>@color/xxx</item>
<item name=“android:autocompleteTextViewStyle”>@style/AutoComplete.AppTheme</item>
</style>
<style name=“AutoComplete.AppTheme”
parent=“Widget.AppCompat.Light.AutoCompleteTextView”>
<!— drawable resource selector com estados —>
<item name=“android:dropDownSelector”>@drawable/xxx</item>
</style>

19. <!— menus popup da toolbar ou menus contextuais —>
<item name=“popupMenuStyle”>@style/PopupMenu.AppTheme</item>
<style name=“PopupMenu.AppTheme”
parent=“Widget.AppCompat.Light.PopupMenu”>
<!— image resource —>
<item name=“android:popupBackground”>@drawable/xxx</item>
</style>

20. <!— customizar menus dropdown —>
<item name=“dropDownListViewStyle”>@style/DropDownListView.AppTheme</item>
<style name=“DropDownListView.AppTheme”
parent=“Widget.AppCompat.Light.ListView.Dropdown”>
<item name=“android:listSelector”>@drawable/xxx</item>
</style>

21. <!— customizar popup menu do overflow menu e do share button —>
<item name=“textAppearanceLargePopupMenu”>@style/
PopupMenuTextAppearance.Large</item>
<style name=“PopupMenuTextAppearance.AppTheme”
parent=“android:TextAppearance.Medium”>
<item name=“android:textColor”>@drawable/xxx</item>
</style>

22. Customizando o tema do app
Editor de tema - desde o Android Studio 1.4 Tools → Android → Theme Editor

23. Por que utilizar estilos?
- ganho de produtividade
- deixa o XML mais enxuto e legível
- fácil manutenção das views comuns (botões, textos, etc.)
- consistência na aparência das views utilizadas em vários lugares do app
Mas nem tudo são flores :(
No preview de tela do Android Studio os estilos ainda não são renderizados
de forma eficaz.
#styles: benefícios a longo prazo

24. Criando um estilo e entendendo como funciona a herança de atributos
#styles: benefícios a longo prazo
<style name=“Text”>
<item name=“fontPath”>@string/RobotoRegular</item>
<item name=“android:layout_width”>wrap_content</item>
<item name=“android:layout_height”>wrap_content</item>
<item name=“android:textSize”>15sp</item>
<item name=“android:textColor”>#212121</item>
</style>
<style name=“Text.FontLight”>
<item name=“fontPath”>@string/RobotoLight</item>
</style>
<style name=“TextFontLight” parent=“Text”>
<item name=“fontPath”>@string/RobotoLight</item>
</style>
=

25. Quando que eu uso o “parent"?
#styles: benefícios a longo prazo
<style name=“Text”>
<item name=“fontPath”>@string/RobotoRegular</item>
<item name=“android:layout_width”>wrap_content</item>
<item name=“android:layout_height”>wrap_content</item>
<item name=“android:textSize”>15sp</item>
<item name=“android:textColor”>#212121</item>
</style>
<style name=“EditText” parent=“Text”>
<item name=“android:layout_width”>match_parent</item>
<item name=“android:textSize”>16sp</item>
<item name=“android:textColor”>#999999</item>
<item name=“android:textColorHint”>#80999999</item>
</style>

26. Não mesmo?! Vamos ver…
–Florentina de Jesus
“Estilo é balela!
Não preciso dele.”
Muitos devem pensar:
#styles: benefícios a longo prazo

27. Temos 3 estilos: TextView, EditText e um ViewGroup
#styles: benefícios a longo prazo
<style name=“LayoutMatchMatch”>
<item name=“android:layout_width”/>
<item name=“android:layout_height”/>
<item name=“android:orientation”/>
</style>
<style name=“Text”>
<item name=“fontPath”/>
<item name=“android:layout_width”/>
<item name=“android:layout_height”/>
<item name=“android:textSize”/>
<item name=“android:textColor”/>
</style>
<style name=“EditText” parent=“Text”>
<item name=“android:layout_width”/>
<item name=“android:textSize”/>
<item name=“android:textColor”/>
<item name=“android:textColorHint”/>
</style>
12 linhas de atributos

28. `
20 linhas
Uma tela com um LinearLayout, um TextView e uma EditText
#styles: benefícios a longo prazo
<LinearLayout xmlns:android=“http://schemas.android.com…”
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:textColor="#999"
app:fontPath="@string/RobotoRegular"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#212121"
android:textColorHint="#666"/>
</LinearLayout>
<LinearLayout xmlns:android=“http://schemas.android…”
style="@style/LayoutMatchMatch">
<TextView style="@style/Text" />
<EditText style="@style/EditText" />
</LinearLayout>
8 linhas

29. TableView: útil para dados tabulares assim como no HTML
LinearLayout: é a DIV do Android. O atributo orientation alinha as
views filhas uma embaixo da outra (vertical) ou uma ao lado da
outra (horizontal).
RelativeLayout: outra view com a ideia muito parecida com o
atributo "position: relative" do CSS.
Qual é a melhor? Nenhuma!
Batalha de ViewGroups

30. <RelativeLayout />
Batalha de ViewGroups
é a primeira view-filha que você colocou
é a última view-filha que você colocou
trata suas views filhas como camadas, empilhando uma em cima da outra
ou seja, os primeiros serão os últimos :(

31. <RelativeLayout />
Batalha de ViewGroups
Alguns atributos legais de usar nas views filhas:
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight=“true"
android:layout_centerInParent="true"
} Posição default das views

32. <RelativeLayout />
Batalha de ViewGroups
Alguns atributos legais de usar nas views filhas:
android:layout_above=“@+id/view_id“
android:layout_below=“@+id/view_id"
android:layout_to<Left,Right,Top,Right>Of=“@+id/view_id“
RelativeLayout
View c/ attr. toLeftOf

33. <include/>
Se você tem um layout pronto e precisa reutilizá-lo em outra parte do
app, você pode usar a tag include.
Reutilizando layouts
<LinearLayout xmlns:android=“http://schemas.android…”
style="@style/LayoutMatchMatch">
<include layout=“@layout/toolbar" />
<EditText style="@style/EditText" />
</LinearLayout>

34. <ViewStub/>
Você consegue alterar pelo código qual layout deve ser inflado.
Ela é invisível na tela até que o método inflate() seja chamado.
Reutilizando layouts
<ViewStub
android:id=“@+id/view_stub"
android:inflatedId=“@id/subTree"
android:layout=“@layout/mySubTree"
android:layout_width=“match_parent"
android:layout_height="wrap_content" />
ViewStub stub = (ViewStub) findViewById(R.id.view_stub);
View inflated = stub.inflate();

35. <include/> = estático <ViewStub/> = dinâmico
X
Reutilizando layouts

36. Tem diferença?
#WTF: layout_margin vs. padding
<LinearLayout xmlns:android=“http://schemas…”
style="@style/LayoutMatchMatch">
<TextView style=“@style/Text
android:background=“#ccc”
android:layout_margin=“50dp”
android:text=“Hello World! />
</LinearLayout>
<LinearLayout xmlns:android=“http://schemas…”
style="@style/LayoutMatchMatch">
<TextView style=“@style/Text
android:background=“#ccc”
android:padding=“50dp”
android:text=“Hello World! />
</LinearLayout>
Hello World!Hello World!

37. LinearLayout
weight=2weight=1 weight=1
Lembretes:
- funciona apenas com LinearLayout
- todas as views filhas devem possuir o atributo
android:layout_width (horizontal) ou
android:layout_height (vertical) como 0dp
#WTF2: weight

38. 1ª dica: não criemos pânico!
2ª dica: enxergue sua tela como uma tabela e
esquematize a tela no papel antes de programar;
3ª dica: analise qual view é a mais indicada e
mais fácil de usar para cada parte;
4ª dica: crie templates para as partes do layout
que se repetem em outras telas;
LinearLayout + RecyclerView
Toolbar
LinearLayout
LinearLayout
Horizontal
ImageView +
margin
RelativeLayout +
ImageButton
5 dicas para montar sua tela

39. 5ª dica: mãos à obra! Ops… ao XML! :D
5 dicas para montar sua tela

40. Obrigada :)
nathaliepl@gmail.com
Deixe um feedback: http://goo.gl/forms/iFgJKKs6Ng