CODEWITHSUNDEEP
androidandroid-viewpagerandroid-tablayout
user5448913
user5448913

Reputation:

Change TabLayout tabs placement

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

enter image description here

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.

enter image description here

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?

Upvotes: 1

Views: 481

Answers (1)

Linh
Linh

Reputation: 60913

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.

Upvotes: 2

Related Questions