O documento discute técnicas de estilização de interfaces no Android, incluindo:
1) A evolução das bibliotecas de customização como AppCompat e Design Support Library;
2) Como customizar o tema do aplicativo usando cores, fontes e outros recursos visuais;
3) Os benefícios de usar estilos para manter a consistência visual e facilitar manutenção.
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
Android L Preview - APIs e novidades da nova versão do AndroidWalmyr Carvalho
Slides da palestra que dei sobre algumas das novas APIs no Android L, que aconteceu na reunião do GDG Rio de Janeiro do que ocorreu em 04 de setembro de 2014.
--
Slides from the talk that I gave about some of the new APIs in Android L, that happened at the GDG Rio de Janeiro's meeting that occurred on September 4, 2014.
A construção de interfaces ricas na web podem ser menos traumáticas, essa é a premissa básica desse framework. Nessa palestra faleremos sobre a introdução ao uso do Angular JS e o seu funcionamento, explicando as abstrações e magias que tornam o framework mais produtivo.
Android L Preview - APIs e novidades da nova versão do AndroidWalmyr Carvalho
Slides da palestra que dei sobre algumas das novas APIs no Android L, que aconteceu na reunião do GDG Rio de Janeiro do que ocorreu em 04 de setembro de 2014.
--
Slides from the talk that I gave about some of the new APIs in Android L, that happened at the GDG Rio de Janeiro's meeting that occurred on September 4, 2014.
Material Design - Melhorando a experiência de seu Appalissin
O novo Guideline do Google!
Um pouquinho do que poderemos fazer para melhorar a experiência do usuário em nossos Apps com a nova versão da API do Android - Lollipop e o Material Design.
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3.
http://day.lambda3.com.br
Código do exemplo em:
https://github.com/Lambda3/lambdaday2013-backbonejs
Material Design - Melhorando a experiência de seu Appalissin
O novo Guideline do Google!
Um pouquinho do que poderemos fazer para melhorar a experiência do usuário em nossos Apps com a nova versão da API do Android - Lollipop e o Material Design.
Palestra que apresentei no FISL, para dúvidas, criticas ou sugestões enviem emails para FISL AT urubatan DOT com DOT br.
Todos os comentários são bem vindos.
Na palestra falo bastante sobre PhoneGap e um pouco sobre Titanium Mobile.
Palestra sobre Backbone.js ministrada no LambdaDay, evento da Lambda3.
http://day.lambda3.com.br
Código do exemplo em:
https://github.com/Lambda3/lambdaday2013-backbonejs
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
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>
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
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();
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