Add icons to TabLayout using MvvmCross

Question

I've been looking at the Playground project on MvvmCross (https://github.com/MvvmCross/MvvmCross/tree/develop/Projects/Playground)

The way to have a fragment loaded into the tabs is to set the attribute the following way:

[MvxTabLayoutPresentation(TabLayoutResourceId = Resource.Id.tabs, ViewPagerResourceId = Resource.Id.viewpager, Title = "Tab 1", ActivityHostViewModelType = typeof(TabsRootViewModel))]
[MvxTabLayoutPresentation(TabLayoutResourceId = Resource.Id.tabs, ViewPagerResourceId = Resource.Id.viewpager, Title = "Tab 1", FragmentHostViewType = typeof(TabsRootBView))]
[Register(nameof(Tab1View))]
public class Tab1View : MvxFragment<Tab1ViewModel>

My questions is, besides the title that can be specified on the MvxTabLayoutPresentation, how can I add and icon to each one of the tabs?

Answer 1

That is not provided out-of-the-box and it's more about TabLayout customization.

You can achieve it like this.

Create a CustomView for your tab layout item, myCustomTab.axml:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/txtTab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:textColor="#FFFFFF"
    android:textSize="12"
    android:textStyle="bold" />

Then in your view that has the TabLayout you configure it on the OnCreate / OnCreateView:

var tabLayout = view.FindViewById<TabLayout>(Resource.Id.tabs);
var customTab = inflater.Inflate(Resource.Layout.myCustomTab, null);
customTab.Text = "MyText";
// this sets the icon above the text
customTab.SetCompoundDrawablesWithIntrinsicBounds(0, Resource.Drawable.my_icon, 0, 0);
tabLayout.GetTabAt(0).SetCustomView(customTab);

Obviously you have to do this as many times as tab layout items you have.

Furthermore using this you can add any customization to your tab layout items.

Source (in java): https://mobikul.com/make-custom-tabs-icons-android/

HIH