Change TabLayout tabs placement

Question

I am using TabLayout with a ViewPager in order to display my tabs names like below.

But as you can see my title is covering my tabs. I wish to have my tabs close to the top of my screen like below.

Here is my view_pager.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="stellar.kade_c.com.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

How can that be achieved?

Answer 1

Change your app:tabMode="fixed" to app:tabMode="scrollable"

FIXED

Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs. The maximum number of tabs is limited by the view’s width. Fixed tabs have equal width, based on the widest tab label.

SCROLLABLE

Scrollable tabs display a subset of tabs at any given moment, and can contain longer tablabels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels.