TabLayout and SmartTabLayout in android with api 18 and 17

Question

I use the smarttablayout library, which helps me display fragments inside tabs. even their demo does not work correctly when I test it on api 18 or 17, it just fills half the screen, then I decide to use TabLayout as a replacement, but it shows the same behavior.

By the way: I have a problem with the RTL layout, and LTR works well! please help me!

EDIT: this is the code I'm using:

<com.ogaclejapan.smarttablayout.SmartTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@color/tab_background"
        app:stl_indicatorAlwaysInCenter="false"
        app:stl_indicatorWithoutPadding="false"
        app:stl_indicatorInFront="false"
        app:stl_indicatorInterpolation="smart"
        app:stl_indicatorGravity="bottom"
        app:stl_indicatorColor="@color/tab_indicator"
        app:stl_indicatorThickness="4dp"
        app:stl_indicatorCornerRadius="2dp"
        app:stl_overlineColor="#4D000000"
        app:stl_overlineThickness="0dp"
        app:stl_underlineColor="#4D000000"
        app:stl_underlineThickness="0dp"
        app:stl_dividerColor="#4D000000"
        app:stl_dividerThickness="0.5dp"
        app:stl_defaultTabBackground="?attr/selectableItemBackground"
        app:stl_defaultTabTextAllCaps="true"
        app:stl_defaultTabTextColor="#FC000000"
        app:stl_defaultTabTextSize="12sp"
        app:stl_defaultTabTextHorizontalPadding="16dp"
        app:stl_defaultTabTextMinWidth="0dp"
        app:stl_distributeEvenly="true"
        app:stl_titleOffset="auto_center"
        app:stl_clickable="true" />

and I get this result in api 17 and 18  

instead of this