✨ Barra navegação inferior + Botão de pesquisa

.editorconfig

@@ -25,7 +25,7 @@ indent_style = space
 indent_size = 4
 
 #Op��es de "nova linha"
-csharp_new_line_before_open_brace = methods, types
+csharp_new_line_before_open_brace = all
 insert_final_newline = true
 end_of_line = "lf"
 

Xamarin.Community.BR/Xamarin.Community.BR.Android/Resources/values/styles.xml

@@ -3,25 +3,17 @@
 
   <style name="MainTheme" parent="MainTheme.Base">
   </style>
-  <!-- Base theme applied no matter what API -->
+
   <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
-    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
     <item name="windowNoTitle">true</item>
-    <!--We will be using the toolbar so no need to show ActionBar-->
     <item name="windowActionBar">false</item>
-    <!-- Set theme colors from https://aka.ms/material-colors -->
-    <!-- colorPrimary is used for the default action bar background -->
-    <item name="colorPrimary">#2196F3</item>
-    <!-- colorPrimaryDark is used for the status bar -->
-    <item name="colorPrimaryDark">#1976D2</item>
-    <!-- colorAccent is used as the default value for colorControlActivated
-         which is used to tint widgets -->
+    <item name="colorPrimary">#000000</item>
+    <item name="colorPrimaryDark">#f5f5f5</item>
     <item name="colorAccent">#FF4081</item>
-    <!-- You can also set colorControlNormal, colorControlActivated
-         colorControlHighlight and colorSwitchThumbNormal. -->
     <item name="windowActionModeOverlay">true</item>
 
     <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
+    <item name="android:windowLightStatusBar">true</item>
   </style>
 
   <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">

Xamarin.Community.BR/Xamarin.Community.BR/MainPage.xaml

@@ -1,61 +1,43 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
              xmlns:controles="clr-namespace:Xamarin.Community.BR.Views.Controles"
              mc:Ignorable="d"
-             xmlns:local="clr-namespace:Xamarin.Community.BR"
+             BackgroundColor="#f5f5f5"
              x:Class="Xamarin.Community.BR.MainPage">
-    <controles:Xamarino x:Name="xamarino" Posicao="Esquerda">
-        <VisualStateManager.VisualStateGroups>
-            <VisualStateGroup Name="Posicoes">
-
-                <VisualState Name="Frente">
-                    <VisualState.Setters>
-                        <Setter Property="OlhoDireitoAberto"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_DIREITO_ABERTO}" />
-
-                        <Setter Property="OlhoDireitoPiscando"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_DIREITO_PISCANDO}" />
-
-                        <Setter Property="OlhoDireitoFechado"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_DIREITO_FECHADO}" />
-
-                        <Setter Property="OlhoEsquerdoAberto"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_ESQUERDO_ABERTO}" />
-
-                        <Setter Property="OlhoEsquerdoPiscando"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_ESQUERDO_PISCANDO}" />
-
-                        <Setter Property="OlhoEsquerdoFechado"
-                            Value="{x:Static local:SVG.XAMARINO_OLHO_ESQUERDO_FECHADO}" />
-                    </VisualState.Setters>
-                </VisualState>
-
-                <VisualState Name="Esquerda">
-                    <VisualState.Setters>
-                        <Setter Property="OlhoDireitoAberto"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_DIREITO_ABERTO}" />
-
-                        <Setter Property="OlhoDireitoPiscando"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_DIREITO_PISCANDO}" />
-
-                        <Setter Property="OlhoDireitoFechado"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_DIREITO_FECHADO}" />
-
-                        <Setter Property="OlhoEsquerdoAberto"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_ESQUERDO_ABERTO}" />
-
-                        <Setter Property="OlhoEsquerdoPiscando"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_ESQUERDO_PISCANDO}" />
-
-                        <Setter Property="OlhoEsquerdoFechado"
-                            Value="{x:Static local:SVG.XAMARINO_ESQUERDA_OLHO_ESQUERDO_FECHADO}" />
-                    </VisualState.Setters>
-                </VisualState>
-
-            </VisualStateGroup>
-        </VisualStateManager.VisualStateGroups>
-    </controles:Xamarino>
+    <Grid RowDefinitions="10*,10*,68*,9.5*,2.5*"
+          Padding="0,5">
+
+        <Label Text="Olá"
+               VerticalOptions="CenterAndExpand"
+               HorizontalOptions="CenterAndExpand"
+               FontSize="Title"
+               FontAttributes="Bold"/>
+
+        <Frame Grid.Row="1"
+               Margin="20,10"
+               Padding="0"
+               HasShadow="True"
+               CornerRadius="30" >
+            <Frame.Background>
+                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                    <GradientStop Offset="0" Color="#f7f7f7"/>
+                    <GradientStop Offset="1" Color="#f2f2f2"/>
+                </LinearGradientBrush>
+            </Frame.Background>
+
+            <Label FontSize="Medium"
+                   VerticalOptions="CenterAndExpand"
+                   HorizontalOptions="CenterAndExpand"
+                   Text="Descubra mais 140 devs pelo Brasil!!"/>
+        </Frame>
+
+        <controles:BarraNavegacao x:Name="navegacao"
+                                  PesquisaCommand="{Binding PesquisaCommand}"
+                                  Grid.Row="3"
+                                  Padding="2"
+                                  Grid.RowSpan="2"/>
+    </Grid>
 </ContentPage>

Xamarin.Community.BR/Xamarin.Community.BR/MainPage.xaml.cs

@@ -1,4 +1,6 @@
 using System.ComponentModel;
+using System.Threading.Tasks;
+using Xamarin.Community.BR.Views.Controles;
 using Xamarin.Forms;
 
 namespace Xamarin.Community.BR
@@ -14,7 +16,7 @@ public MainPage()
         protected override void OnAppearing()
         {
             base.OnAppearing();
-            xamarino.IniciarAnimacao();
+            navegacao.IniciarAnimacao();
         }
     }
 }

Xamarin.Community.BR/Xamarin.Community.BR/Views/Controles/BarraNavegacao.xaml

@@ -0,0 +1,100 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Xamarin.Community.BR.Views.Controles.BarraNavegacao"
+             xmlns:controles="clr-namespace:Xamarin.Community.BR.Views.Controles">
+  <ContentView.Content>
+        <Grid ColumnSpacing="0"
+              ColumnDefinitions="17.5*,65*,17.5*"
+              RowDefinitions="10*,60*,30*" 
+              HorizontalOptions="FillAndExpand">
+
+            <!--Sombra escura do fundo-->
+            <Path Aspect="Uniform"
+                  Grid.ColumnSpan="3"
+                  Grid.Row="1"
+                  Grid.RowSpan="2"
+                  TranslationX="2"
+                  TranslationY="2"
+                  Opacity=".3"
+                  Data="M174.619,53.6v-.018c-.01-.378-.433-13.056-12.81-13.585H20A20,20,0,0,1,20,0H354a20,20,0,1,1,0,40H212.192c-12.564.537-12.811,13.6-12.811,13.6a12.381,12.381,0,0,1-24.762,0Z">
+                <Path.Fill>
+                    <RadialGradientBrush Center=".5,.5" Radius=".8" >
+                        <GradientStop Color="#313639" Offset="0.1"/>
+                        <GradientStop Color="Transparent" Offset=".99"/>
+                    </RadialGradientBrush>
+                </Path.Fill>
+            </Path>
+
+            <!--Sombra clara do fundo-->
+            <Path Aspect="Uniform"
+                  Grid.ColumnSpan="3"
+                  Grid.RowSpan="2"
+                  Grid.Row="1"
+                  TranslationX="-2"
+                  TranslationY="-2"
+                  Fill="#FFFFFF"
+                  Data="M174.619,53.6v-.018c-.01-.378-.433-13.056-12.81-13.585H20A20,20,0,0,1,20,0H354a20,20,0,1,1,0,40H212.192c-12.564.537-12.811,13.6-12.811,13.6a12.381,12.381,0,0,1-24.762,0Z"/>
+
+            <!--Fundo-->
+            <Path Aspect="Uniform"
+                  Grid.RowSpan="2"
+                  Grid.Row="1"
+                  Grid.ColumnSpan="3"
+                  Data="M174.619,53.6v-.018c-.01-.378-.433-13.056-12.81-13.585H20A20,20,0,0,1,20,0H354a20,20,0,1,1,0,40H212.192c-12.564.537-12.811,13.6-12.811,13.6a12.381,12.381,0,0,1-24.762,0Z">
+                <Path.Fill>
+                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                        <GradientStop Offset="0" Color="#f7f7f7"/>
+                        <GradientStop Offset="1" Color="#f2f2f2"/>
+                    </LinearGradientBrush>
+                </Path.Fill>
+            </Path>
+
+            <!--Botão de pesquisa-->
+            <Path Data="M17.8133072,16.3990936 L22.4105339,20.9963203 C22.8010582,21.3868446 22.8010582,22.0200096 22.4105339,22.4105339 C22.0200096,22.8010582 21.3868446,22.8010582 20.9963203,22.4105339 L16.3990936,17.8133072 C14.8594228,19.044935 12.9064215,19.7814078 10.7814078,19.7814078 C5.81084508,19.7814078 1.78140783,15.7519706 1.78140783,10.7814078 C1.78140783,5.81084508 5.81084508,1.78140783 10.7814078,1.78140783 C15.7519706,1.78140783 19.7814078,5.81084508 19.7814078,10.7814078 C19.7814078,12.9064215 19.044935,14.8594228 17.8133072,16.3990936 L17.8133072,16.3990936 Z M10.7814078,17.7814078 C14.6474011,17.7814078 17.7814078,14.6474011 17.7814078,10.7814078 C17.7814078,6.91541458 14.6474011,3.78140783 10.7814078,3.78140783 C6.91541458,3.78140783 3.78140783,6.91541458 3.78140783,10.7814078 C3.78140783,14.6474011 6.91541458,17.7814078 10.7814078,17.7814078 Z"
+                  AutomationProperties.HelpText="Botão de pesquisa"
+                  AutomationProperties.IsInAccessibleTree ="True"
+                  AutomationProperties.Name="Pesquisa"
+                  VerticalOptions="Center"
+                  Margin="40,0,0,0"
+                  Fill="#000000"
+                  Grid.Row="1">
+                <Path.GestureRecognizers>
+                    <TapGestureRecognizer Tapped="PesquisaTapped"/>
+                </Path.GestureRecognizers>
+            </Path>
+
+            <!--Botão globo-->
+            <Path x:Name="globo"
+                  Data="M17.6576022,18.9997833 C17.3103565,18.9954804 16.9667789,18.9271401 16.6441588,18.7980921 C15.1965878,18.2190637 14.4924949,16.5761803 15.0715233,15.1286093 C15.1104069,15.0314002 15.1303846,14.9276644 15.1303846,14.822967 C15.1303846,14.3684549 14.7619297,14 14.3074176,14 L14,14 C11.790861,14 10,12.209139 10,10 L10,9 C10,6.23857625 12.2385763,4 15,4 L16.1272021,4 C14.8909629,3.3609308 13.4876314,3 12,3 C9.32828163,3 6.92846863,4.16416524 5.28015801,6.0128987 C6.80570515,6.15412392 8.00010914,7.43757796 8.00010914,9 L8.00010914,9.19722436 C8.00010914,10.657852 7.27012498,12.0218399 6.05480934,12.8320503 C5.90857732,12.9295383 5.8690625,13.1271124 5.96655051,13.2733444 C5.98471201,13.3005867 6.00696894,13.324863 6.03253546,13.3453162 L7.12480419,14.2191312 C8.11910822,15.0145744 8.28031676,16.4654512 7.48487353,17.4597553 C7.09740095,17.944096 6.53112003,18.2518865 5.91393949,18.3136045 L5.6155836,18.3434401 C6.17844229,18.9099119 6.81617997,19.4018938 7.5127086,19.8032979 C8.61932294,18.1872694 10.7545148,17.539371 12.6085017,18.3633652 C13.5898627,18.7995256 14.353836,19.5949216 14.7554957,20.5703487 C15.8237495,20.2271598 16.8049717,19.6897846 17.6576022,18.9997833 Z M19.484451,17 C20.4417283,15.569902 21,13.8501466 21,12 C21,9.69493669 20.1334393,7.59226948 18.7083195,6 L15,6 C13.3431458,6 12,7.34314575 12,9 L12,10 C12,11.1045695 12.8954305,12 14,12 L14.3074176,12 C15.8664992,12 17.1303846,13.2638854 17.1303846,14.822967 C17.1303846,15.1821033 17.0618565,15.537941 16.9284767,15.8713907 C16.7596751,16.2933946 16.9649362,16.7723371 17.3869401,16.9411387 C17.4841492,16.9800223 17.587885,17 17.6925824,17 L19.484451,17 Z M4.19020732,16.4760026 L5.71493205,16.3235301 C5.79673012,16.3153503 5.8717822,16.2745573 5.92313591,16.2103652 C6.02856004,16.078585 6.00719426,15.8862929 5.87541409,15.7808688 L4.78314536,14.9070538 C4.59689517,14.7580537 4.43475514,14.5812027 4.30244992,14.3827448 C3.59225699,13.3174554 3.88011955,11.8781426 4.94540895,11.1679497 C5.60432725,10.7286708 6.00010914,9.9891456 6.00010914,9.19722436 L6.00010914,9 C6.00010914,8.44771525 5.55239389,8 5.00010914,8 L3.93551965,8 C3.3367061,9.20495897 3,10.5631585 3,12 C3,13.6293961 3.43299873,15.1576599 4.19020732,16.4760026 Z M9.42098847,20.6250384 C10.2379847,20.8689767 11.1036913,21 12,21 C12.2409995,21 12.4797866,20.9905275 12.7160093,20.9719344 C12.4935728,20.6333001 12.1764635,20.3599832 11.7962248,20.1909883 C10.9671723,19.8225205 10.0293483,20.0233879 9.42098847,20.6250384 Z M12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 Z"
+                  Grid.Column="2"
+                  Grid.Row="1"
+                  Margin="0,0,40,0"
+                  VerticalOptions="Center"
+                  HorizontalOptions="End"
+                  Fill="#000000"/>
+
+            <!--Entry de pesquisa-->
+            <Entry x:Name="pesquisaEntry"
+                   Opacity="0"
+                   Grid.Row="1"
+                   Margin="0,0,18,0"
+                   ReturnType="Search"
+                   IsEnabled="False"
+                   Grid.Column="1"/>
+
+            <!--Xamarino-->
+            <controles:Xamarino x:Name="xamarino"
+                                Grid.RowSpan="2"
+                                Grid.Column="1"
+                                Padding="0,0,0,5"
+                                HorizontalOptions="Center"
+                                Posicao="Frente">
+                <controles:Xamarino.GestureRecognizers>
+                    <TapGestureRecognizer Tapped="XamarinoTapped"/>
+                </controles:Xamarino.GestureRecognizers>
+            </controles:Xamarino>
+
+        </Grid>
+    </ContentView.Content>
+</ContentView>

Xamarin.Community.BR/Xamarin.Community.BR/Views/Controles/BarraNavegacao.xaml.cs

@@ -0,0 +1,97 @@
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Xamarin.Forms;
+using Xamarin.Forms.Xaml;
+
+namespace Xamarin.Community.BR.Views.Controles
+{
+    [XamlCompilation(XamlCompilationOptions.Compile)]
+    public partial class BarraNavegacao : ContentView
+    {
+        public static readonly BindableProperty PesquisaCommandProperty =
+            BindableProperty.Create(nameof(PesquisaCommand), typeof(ICommand), typeof(BarraNavegacao), defaultValue: default(ICommand), defaultBindingMode: BindingMode.OneTime);
+
+        public static readonly BindableProperty PesquisaTextoProperty =
+            BindableProperty.Create(nameof(PesquisaTexto), typeof(string), typeof(BarraNavegacao), defaultValue: string.Empty, defaultBindingMode: BindingMode.TwoWay, propertyChanged: AlterarTexto);
+
+        private bool PesquisaHabilitada { get; set; }
+
+        public ICommand PesquisaCommand
+        {
+            get => (ICommand)GetValue(PesquisaCommandProperty);
+            set => SetValue(PesquisaCommandProperty, value);
+        }
+
+        public string PesquisaTexto
+        {
+            get => (string)GetValue(PesquisaTextoProperty);
+            set => SetValue(PesquisaTextoProperty, value);
+        }
+
+        public BarraNavegacao()
+        {
+            InitializeComponent();
+            pesquisaEntry.TextChanged += PesquisaEntryTextoAlterado;
+        }
+
+        public void IniciarAnimacao() =>
+            xamarino.IniciarAnimacao();
+
+        private void PesquisaEntryTextoAlterado(object sender, TextChangedEventArgs e)
+        {
+            PesquisaTexto = e.NewTextValue;
+        }
+
+        private async void XamarinoTapped(object sender, System.EventArgs e)
+        {
+            if (!PesquisaHabilitada)
+                return;
+
+            await Task.WhenAll(
+                    globo.FadeTo(1),
+                    pesquisaEntry.FadeTo(0),
+                    xamarino.TranslateTo(0, 0, easing: Easing.SinOut));
+
+            PesquisaHabilitada = pesquisaEntry.IsEnabled = false;
+            PesquisaTexto = string.Empty;
+            xamarino.Posicao = XamarinoPosicao.Frente;
+        }
+
+        private async void PesquisaTapped(object sender, System.EventArgs e)
+        {
+            if (PesquisaHabilitada)
+            {
+                if (PesquisaCommand == null)
+                    return;
+
+                if (PesquisaCommand.CanExecute(this))
+                    PesquisaCommand.Execute(this);
+            }
+            else
+            {
+                var posicaoX = (globo.X - xamarino.X - (xamarino.Width / 2));
+                PesquisaHabilitada = pesquisaEntry.IsEnabled = true;
+
+                await Task.WhenAll(
+                    globo.FadeTo(0),
+                    pesquisaEntry.FadeTo(1),
+                    xamarino.TranslateTo(posicaoX, 0, easing: Easing.SinOut));
+
+                xamarino.Posicao = XamarinoPosicao.Esquerda;
+            }
+        }
+
+        private static void AlterarTexto(BindableObject bindable, object valorAtual, object novoValor)
+        {
+            if (bindable is BarraNavegacao navegacao)
+            {
+                var pesquisaEntry = navegacao.pesquisaEntry;
+                var novoTexto = (string)novoValor;
+                if (pesquisaEntry.Text == novoTexto)
+                    return;
+
+                navegacao.pesquisaEntry.Text = (string)novoValor;
+            }
+        }
+    }
+}

Xamarin.Community.BR/Xamarin.Community.BR/Views/Controles/Xamarino.xaml

@@ -1,12 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
+<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="Xamarin.Community.BR.Views.Controles.Xamarino"
-             xmlns:local="clr-namespace:Xamarin.Community.BR">
+             AutomationProperties.HelpText="Botão de home"
+             AutomationProperties.IsInAccessibleTree="True"
+             AutomationProperties.Name="Xamarino"
+             HorizontalOptions="Start"
+             VerticalOptions="Start">
   <ContentView.Content>
-        <Grid BackgroundColor="Transparent">
+        <Grid x:Name="grid">
             <!--Fundo-->
-            <Path Data="M128.675 53L101.175 5.09999C99.3749 2.09999 95.9749 0.1 92.4749 0H37.4749C33.9749 0 30.5749 1.99999 28.7749 5.09999L1.27494 53C-0.425061 56.1 -0.425061 60.1 1.27494 63.1L28.7749 111C30.5749 114 33.9749 116 37.4749 116.1H92.4749C95.9749 116.1 99.3749 114.1 101.175 111L128.675 63.1C130.375 60.1 130.375 56.1 128.675 53Z">
+            <Path x:Name="fundo">
                 <Path.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                         <GradientStop Color="#2287CA" Offset="0"/>