Estou tentando combinar um design como este ..
Observe que a "tonalidade da cor da guia selecionada" é azul, mas o ícone da guia central deve sempre ser o círculo verde com o relógio branco no meio.
Eu tentei várias coisas. Primeiro, tente fazê-lo programaticamente usando um recurso XML de lista de camadas que tinha o recurso PNG de círculo e relógio verde, que não funcionou. Depois, pedi ao designer que me desse o ícone completo (relógio e círculo verde), mas agora estou enfrentando esse problema.
(Não selecionado)
(Selecionado)
Não consigo encontrar os termos corretos para pesquisar no Google para corrigir isso.
No final, preciso que a cor da guia selecionada seja azul, mas preciso que o ícone da guia central seja sempre o ícone real, sem cores adicionais (essencialmente, ele precisa se parecer exatamente com o .png).
PS: Estou usando o Xamarin.Forms, FreshMvvm e o FreshTabbedFONavigationContainer. No entanto, através do Renderer, tenho acesso direto ao BottomNavigationView e a todos os outros componentes nativos do Android. Portanto, a solução não precisa ser uma solução Xamarin. Uma solução java / kotlin também funcionaria e eu posso convertê-la para o Xamarin.
======================
EDITADO:
======================
Então, eu fui muito além usando o código de Andrés Castro abaixo, mas ainda estou tendo o mesmo problema de antes. Usando o código de Andres abaixo, voltei a usar o FontAwesome para os ícones (o que funciona muito bem), mas ao fazer isso, eu precisava usar a LayerDrawable
para criar o ícone da guia central do círculo / ícone.
Então é isso que eu tenho até agora ..
Ícone central não selecionado
Ícone do centro selecionado
Como você pode ver, o ícone central ainda fica cinza quando não selecionado e azul quando selecionado (as cores selecionadas / não selecionadas apropriadas dos outros 4 ícones).
Aqui está o código que tenho até agora referente ao ícone central.
UpdateTabbedIcons
private void UpdateTabbedIcons()
{
for (var i = 0; i < Element.Children.Count; i++) {
var tab = _bottomNavigationView.Menu.GetItem(i);
var element = Element.Children[i];
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
UpdateTabIcon(tab, element);
}
}
UpdateTabIcon
public void UpdateTabIcon(IMenuItem menuItem, Page page)
{
var icon = page?.Icon;
if (icon == null) return;
var drawable = new IconDrawable(Context, icon, "fa-regular-pro-400.ttf");
var element = Element.CurrentPage;
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
if (page is DoNowTabPage) { //Page for center icon
drawable.Color(Helpers.Resources.White.ToAndroid());
var finalDrawable = GetCombinedDrawable(drawable);
menuItem.SetIcon(finalDrawable);
return;
} else if (element == page) {
drawable.Color(BarSelectedItemColor.ToAndroid());
} else {
drawable.Color(BarItemColor.ToAndroid());
}
menuItem.SetIcon(drawable);
}
GetCombinedDrawable
private Drawable GetCombinedDrawable(IconDrawable iconDrawable)
{
var displayMetrics = Resources.DisplayMetrics;
GradientDrawable circleDrawable = new GradientDrawable();
circleDrawable.SetColor(Helpers.Resources.Green.ToAndroid());
circleDrawable.SetShape(ShapeType.Oval);
circleDrawable.SetSize((int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics), (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics));
circleDrawable.Alpha = 1;
var inset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 140, displayMetrics);
var bottomInset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 40, displayMetrics);
LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] { circleDrawable, iconDrawable });
finalDrawable.SetLayerHeight(1, iconDrawable.IntrinsicHeight);
finalDrawable.SetLayerWidth(1, iconDrawable.IntrinsicWidth);
finalDrawable.SetLayerInset(1, inset, inset, inset, inset + bottomInset);
finalDrawable.SetLayerInsetBottom(0, bottomInset);
finalDrawable.ClearColorFilter();
return finalDrawable;
}
Como você pode ver no GradientDrawable
que eu estou criando para o círculo, estou configurando a cor para a minha cor verde (eu tenho uma classe personalizada chamada Resources Resources
.. que não é a classe Android ).
Então é aí que eu estou preso. Estou definindo o círculo que pode ser desenhado para ter uma cor verde, mas uma vez no BottomNavigationView, a cor sempre corresponde às cores não selecionadas / selecionadas dos outros ícones.
Esperando superar esta edição final. Obrigado por qualquer ajuda.
_bottomNavigationView.ItemIconTintList = null;