materialdesign_principles_metaphor

Xamarin.Forms & Material Design

O maior medo dos desenvolvedores quando o assunto é o Xamarin.Forms é a dúvida sobre a existência de limitações com o design, vamos começar falando sobre o Material Design no Android utilizando o Xamarin.Forms O Material Design é uma nova atribuição de Layout criada pela Google para o Android, e possui muitas configurações e controles legais para utilizarmos. Na nossa solução Xamarin.Forms PCL, vamos acessar o projeto *.Droid.

No Android temos uma estrutura que devemos criar para que o Material Designe seja utilizado, mas o mesmo só está disponível no Android L então temos que manter o funcionamento nas versões anteriores também, então temos que criar uma estrutura que ira fazer isso.

Na pasta Resources vamos criar duas pastas, uma chamada “values” e outra “values-v21”. Dentro de cada uma dessas pastas devemos criar um arquivo xml chamado “styles.xml”.

No arquivo “styles.xml” da pasta “values” vamos programar da seguinte forma:

<resources>
  
  <!-- Base theme applied no matter what API -->
  <style name="MeuTema" parent="android:Theme.Holo.Light">
    
  </style>
</resources>

E No arquivo “styles.xml” da pasta “values-v21” vamos programar da seguinte forma:

<resources>
  <!--
        Base application theme for API 21+. This theme replaces
        MyTheme from resources/values/styles.xml on API 21+ devices.
    -->
  <style name="MeuTema" parent="android:Theme.Material.Light">
    
  </style>
</resources>

Agora devemos acessar a classe “MainActivity”

Essa classe possui o Atributo [Activity] e esse atributo possui algumas propriedades que já estão preenchidas. Vamos adicionar uma nova propriedade chamada Theme colocando nosso tema para ser usado, teremos o Atributo da seguinte forma

[Activity(Theme="@style/MeuTema",
        Label = "MeuTema", Icon = "@drawable/icon", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]

Agora basta executar o aplicativo e vera a aplicação do Material Design. Algumas novidades que você ira ver são: Cores separadas, novos efeitos ao clicar e/ou segurar botões e formato dos componentes.

A Esquerda temos uma tela utilizando o tema “Holo.Light” definido para o Android 4.4.x ou anterior e a Direita temos uma tela utilizando o tema “Material.Light” definido para o Android 5.x ou superior. Podemos ver que houveram alterações na cor de Fundo da tela, formatação de texto do botão, a cor de texto e do botão, efeitos de sombra e formato dos componentes.

Screenshot_2015-07-14-12-44-20Screenshot_2015-07-14-12-45-04

Várias outras coisas podem ser feitas, como trabalhar os níveis de cores, para sombras, barra superior, background, botões, texto e outros efeitos.

Para começar a entender sobre o Material Design vale a leitura do Material Oficial da Google e Material do Developers Android e o Material sobre os Temas.

Confira a parte 2 onde mostramos mais coisas que você pode fazer com o Material Design. Por hoje é isso turma.

Git-> HowMaterialDesign

Xamarin.Forms & Material Design 5.00/5 (100.00%) 1 voto

Rafael Moura

Desenvolvedor .NET, mais de 5 anos de experiência, apaixonado por tecnologia, Xamarin Student Partner Regional Lead Central/South America, Xamarin Comunity Speaker, Xamarin Certified Mobile Developer e Windows Phone Developer.

Um comentário em “Xamarin.Forms & Material Design

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

%d blogueiros gostam disto: