How can I change the font on my tab view?

Question

I'm using the tab view in a fragment.
I want to change the font while I'm using calligraphy And here is the link: Calligraphy
I could change the font all over the app except the tab views.
The class's code is here, I really appreciate it if you can solve the problem,
I'm stucked here.
This is my code:

   public class AsliFragment extends Fragment {


    @SuppressLint("StaticFieldLeak")
    public static ViewPager viewPager;
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

    public AsliFragment() {
        // Required empty public constructor
    }


    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            getArguments().getString(ARG_PARAM1);
            getArguments().getString(ARG_PARAM2);
        }

    }

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view= inflater.inflate(R.layout.fragment_asli, container, false);

        //init tablayout & viewPager
        initViewPager(view);

    return view;
    }


    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        if (context instanceof OnFragmentInteractionListener) {
        } else {
           // Toast.makeText(context,"Remove Fregment Attached", Toast.LENGTH_SHORT).show();
        }
    }



    @Override
    public void onDetach() {
        super.onDetach();
    }


    interface OnFragmentInteractionListener {
    }

    private void initViewPager(View view){
        viewPager = view.findViewById(R.id.viewPager);
        TabLayout tabLayout = view.findViewById(R.id.tabLayout);
        //create adapter


        adabterViewPager adapter = new adabterViewPager(getChildFragmentManager());
        //get string tab name
        String tab_name_1 = getResources().getString(R.string.tab_name_1);
        String tab_name_2 = getResources().getString(R.string.tab_name_2);
        //add fragment to adapter
        adapter.addFragment(new FragmentOneAsli(), tab_name_1);
        adapter.addFragment(new FragmentTwoAsli(), tab_name_2);
        //set adapter to viewpager
        viewPager.setAdapter(adapter);
        //set tablayout with viewpager
        tabLayout.setupWithViewPager(viewPager);
    }
}

score 6 · Accepted Answer · answered Jan 15 '18 at 07:09

6

Add this in style.xml

 <style name="CustomViewAllTab" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textSize">20sp</item>
        <item name="android:fontFamily">@string/fontHelveticaMed</item>
    </style>

For your custom font

 <item name="android:fontFamily">fontname</item>

Apply the style on TabLayout

 <android.support.design.widget.TabLayout
        android:id="@+id/tabOrderType"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorViewAllTab"
        app:tabBackground="@color/colorViewAllTab"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMaxWidth="0dp"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/colorSelectedText"
        app:tabTextAppearance="@style/CustomViewAllTab"
        app:tabTextColor="@color/colorUnselectedTabColor" />

This property is used for changing text style in TabLayout

app:tabTextAppearance="@style/CustomViewAllTab"

answered Jan 15 '18 at 07:09

Lokesh Desai

2,607
16
28

I have a folder in assets, and there is another folder named fonts and inside that font named bm.ttf, how use that in font family ? – kali Jan 15 '18 at 14:13
@kali FontName.ttf try this.. – Lokesh Desai Jan 16 '18 at 04:20
It doesn't work :( – kali Jan 16 '18 at 07:40
Give full path where u have added font – Lokesh Desai Jan 16 '18 at 08:05
\src\main\assets\fonts\bm.ttf – kali Jan 16 '18 at 09:12
Please add your fonts in resource/font folder https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html follow this link – Lokesh Desai Jan 16 '18 at 10:34

score 1 · Answer 2 · answered Jan 15 '18 at 06:47

Do this-:

private void changeTabsFont() {

        ViewGroup vg = (ViewGroup) tabLayout.getChildAt(0);
        int tabsCount = vg.getChildCount();
        for (int j = 0; j < tabsCount; j++) {
            ViewGroup vgTab = (ViewGroup) vg.getChildAt(j);
            int tabChildsCount = vgTab.getChildCount();
            for (int i = 0; i < tabChildsCount; i++) {
                View tabViewChild = vgTab.getChildAt(i);
                if (tabViewChild instanceof TextView) {
                    ((TextView) tabViewChild).setTypeface(Font.getInstance().getTypeFace(), Typeface.NORMAL);
                }
            }
        }
    }

Thanks Shivam for your answer. How should I personalize this code depending on my classes? — kali, Jan 16 '18 at 07:42

score 0 · Answer 3 · answered Jan 15 '18 at 07:02

Try this with style

<style name="TabWidget" parent="TextAppearance.AppCompat.Medium">
        <item name="android:textSize">16sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:typeface">monospace</item>
</style>

Use this in xml in tablayout :

app:tabTextAppearance="@style/TabWidget"

Example

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorWhite"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorBlack"
        app:tabTextAppearance="@style/TabWidget"
        app:tabTextColor="@android:color/darker_gray" />

How can I change the font on my tab view?

3 Answers3