segunda-feira, 11 de dezembro de 2017

Android Material Themes é Facil com AppCompat - Continuação


Continuação da Primeira Mateira (Ver Link)

Text Fields


Use o TextInputLayout da biblioteca de suporte de design com @style /Widget.Design.TextInputLayout (padrão, se não definido), que define a cor do texto da etiqueta para colorAccent. Envolva isso em torno de um TextInputEditText da biblioteca de suporte de design com @ style / Widget.AppCompat.EditText (padrão, se não definido), que define as cores de controle para colorAccent quando ativado.

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Green Theme">

    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>

Radio Buttons


Use @style/Widget.AppCompat.CompoundButton.RadioButton (estilo padrão, se não definido), que define a cor do botão de opção para colorAccent quando ativado, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.

<RadioButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Green Theme"/>


Checkboxes


Use @style/Widget.AppCompat.CompoundButton.CheckBox (padrão, se não definido), que define a cor da caixa de seleção para colorAccent quando ativado, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Green Theme"/>

Switches


Use @style/Widget.AppCompat.CompoundButton.Switch (padrão, se não definido), que define a cor do switch para colorAccent quando ativado, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Green Theme"/>

Dropdown Spinners


Use @style/Widget.AppCompat.Spinner (padrão, se não definido) ou @style/Widget.AppCompat.Spinner.Underlined, que define a cor do sublinhado para colorAccent quando ativado, usando colorControlHighlight como uma sobreposição para estados focados e pressionados.

<Spinner
    style="@style/Widget.AppCompat.Spinner.Underlined"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:spinnerMode="dropdown"/>


Sliders


Use @style/Widget.AppCompat.SeekBar (padrão, se não definido), que define a cor do controle deslizante para colorAccent quando ativado, usando colorControlNormal para a área não definida e colorControlHighlight como uma sobreposição para estados focados e pressionados.

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>


Progress Indicators

Use @style/Widget.AppCompat.ProgressBar (padrão se não definido) ou Widget.AppCompat.ProgressBar.Horizontal, que define a cor do progresso para colorAccent.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminate="true"/>

    <ProgressBar
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"/>
</LinearLayout>


Icons


Configure o Android:tint para matizar o ícone com uma cor sólida. A coloração mais avançada é suportada usando DrawableCompat.setTint () no código.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        style="@style/ImageStyle.Colored"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"
        android:tint="?colorAccent"/>

    <ImageView
        style="@style/ImageStyle.Colored"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_palette"
        android:tint="?colorAccent"/>
</LinearLayout>


Dialogs

Defina dialogTheme e alertDialogTheme no tema aplicado, ou simplesmente passe o tema de diálogo no AlertDialog.Builder da biblioteca de suporte, que define a cor do texto do botão para colorAccent.



Snackbars

Use o Snackbar da biblioteca de suporte de design, que usa colorAccent do tema aplicado atual para definir a cor do texto do botão de ação ou use Snackbar.setActionTextColor () para alterar a cor.




Construa seu Próprio

Usando o que você aprendeu sobre estilos, temas e atributos, você pode criar seus próprios elementos personalizados que usam os atributos do tema para se colorizar e são compatíveis com versões anteriores. Um caso de uso comum é precisar mostrar estados pressionados em layouts arbitrários.


Selectable Items Customizado 


Use @style/ SeletableItemStyle.Rect em um ViewGroup para obter uma seleção pressionada retangular.

<LinearLayout
    style="@style/SelectableItemStyle.Rect"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="42dp"
        android:layout_height="42dp"
        android:adjustViewBounds="true"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Green Theme"/>
</LinearLayout>








Para obter uma versão retangular colorida, use @style/SeletableItemStyle.Rect.Colored.








Para obter uma versão retangular arredondada, use @style/SeletableItemStyle.RoundedRect.






Para obter uma versão retangular arredondada de cor, use @style/SeletableItemStyle.RoundedRect.Colored.









Conclusões
Fazer com que o design de material compatível com versões anteriores é muito mais fácil com o AppCompat, especialmente quando você entende como seus estilos e temas estão trabalhando juntos para matizar dinamicamente a interface do usuário. Com o AppCompat, você deve gastar menos tempo mexendo com recursos e compatibilidade com versões anteriores, e mais tempo focado na construção de sua aplicação.

Código fonte
O código fonte completo para o aplicativo de demonstração pode ser encontrado no GitHub. Sinta-se à vontade para fazer um fork e testar suas próprias variações de tema.

Para Facilita-lo nos do AndroidRio (Disponibilizamos o Zip direto para download)

Fonte Original da Materia (Link)

Nenhum comentário:

Postar um comentário