Xamarin Android TabLayout Badge: Bind Text Mvvmcross

Question

I made a Custom Layout to add a badge to a tab on Android. This badge is a TextView. How do I bind this component? It's possible?

My custom badge layout:

 <LinearLayout
        android:id="@+id/badgeCotainer"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_marginStart="90dp"
        android:background="@drawable/notifications_background"
        android:gravity="center"
        android:layout_gravity="right"
        android:minWidth="16dp">

        <TextView
            android:id="@+id/badge"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAlignment="center"
            android:textColor="#011f7a"
            android:textSize="10sp" 
            android:text="0"
            app:MvxBind="Text ContMaterial"/>
</LinearLayout>

My Activity: use MvxViewPagerFragmentInfo

private void InitTabs()
        {
            var viewPager = FindViewById<ViewPager>(Resource.Id.materiais_viewpager);
            if (viewPager != null)
            {
                var fragments = new List<MvxViewPagerFragmentInfo>
                {
                    new MvxViewPagerFragmentInfo("Requisição",
                        typeof(CadastraRequisicaoFragment), ViewModel),
                    new MvxViewPagerFragmentInfo("Materiais",
                        typeof(ListaMateriaisFragment), ViewModel),
                };


                viewPager.Adapter = new MvxCachingFragmentStatePagerAdapter(this, SupportFragmentManager, fragments);
            }

            var tabLayout = FindViewById<TabLayout>(Resource.Id.requisicao_tabs);
            tabLayout.SetupWithViewPager(viewPager);
             tabLayout.GetTabAt(1).SetCustomView(Resource.Layout.tab_header_badge);

        }

On view Model I used raisedPropertyChanged() Badge appears normally, just don't change value. Tablayout

Answer 1

Out of the box there is nothing in mvvmcross to bind the content of a TabLayout when you provide a custom view. You could however try something custom using MvxFrameControl

Basically, replace your LinearLayout by the MvxFrameControl, then after

tabLayout.SetupWithViewPager(viewPager);

inflate your custom view using the BindingInflate method, and set a value to your MvxFrameControl's BindingContext, then set your custom tablayout view with the result that operation.

That might do the trick.

Another way to do it, is to listen to your ViewModel's "PropertyChanged" events in your Activity, and manually make changes to your tab layouts when it applies.