web-dev-qa-db-fra.com

Comment définir Android TabLayout au bas de l'écran?

Ma question est de savoir comment définir le nouveau design de matériau Android TabLayout en bas de l'écran, un peu comme la barre d'outils inférieure d'Instagram. 

Si vous n'avez jamais vu l'interface utilisateur d'Instagram, voici une capture d'écran:

If you have never seen Instagram's UI here is a screenshot of it. S'il existe une meilleure façon de procéder, n'hésitez pas à la poster ici (avec un exemple de code si possible), je l'apprécierai beaucoup.

Voici mon code: activity_main.xml 

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</Android.support.design.widget.AppBarLayout>

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

J'ai essayé de nombreuses méthodes et solutions proposées par la communauté Stack Overflow, mais aucune ne semble fonctionner avec cette nouvelle implémentation des onglets dans Android. Je sais que cette conception de l'interface utilisateur ne respecte pas les consignes de conception d'Android. Ne faites donc pas de commentaires à ce sujet. Cette conception d'interface utilisateur est vitale pour l'UX de mon application et j'apprécierais d'obtenir une réponse à ce sujet. Je vous remercie!

androidandroid-layoutandroid-tablayout
23
user562

Je crois que j'ai le meilleur correctif simple. Utilisez LinearLayout et définissez la hauteur du viewpager sur 0dp avec un layout_weight = "1". Assurez-vous que le LinearLayout a une orientation verticale et que le viewpager précède le TabLayout. Voici à quoi ressemblent les mines:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context=".MainActivity"
    Android:orientation="vertical">

    <include layout="@layout/toolbar" Android:id="@+id/main_toolbar"/>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1"
        Android:background="@color/white"/>

    <Android.support.design.widget.TabLayout
        Android:id="@+id/sliding_tabs"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:background="@color/blue"
        />

</LinearLayout>

Et en prime, vous ne devez créer votre barre d’outils qu’une seule fois en tant que toolbar.xml. Ainsi, tout ce que vous avez à faire est d’utiliser la balise include. Rend votre mise en page plus propre. Prendre plaisir!

toolbar.xml 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.Toolbar xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:background="?attr/colorPrimary"
    Android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Mise à jour 11.2.2016: Pour ceux d'entre vous qui ne savent pas comment gonfler la barre d'outils, voici comment. Assurez-vous que votre activité étend AppCompatActivity afin que vous puissiez appeler setSupportActionBar () et getSupportActionBar (). 

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
63
ChallengeAccepted

Mieux séparer AppBarLayout et tabLayout comme mon code ci-dessous. De cette façon, vous pouvez modifier la barre d'onglets et afficher les propriétés du pager indépendamment. 

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <Android.support.design.widget.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                Android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </Android.support.design.widget.AppBarLayout>

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                Android:layout_above="@+id/tabs"/>

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:tabMode="fixed"
                app:tabGravity="fill"
                Android:layout_alignParentBottom="true"/>
        </RelativeLayout>
    </Android.support.design.widget.CoordinatorLayout>
2
Surendra Kumar

J'ai eu le même problème sur Android Studio 2.2. C'est ce que j'ai fait,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:orientation="vertical"
    Android:layout_height="match_parent">


    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:subtitleTextColor="@color/color_white"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="@string/call_log"
        app:titleTextColor="@color/color_white"
        />

    <RelativeLayout
        Android:id="@+id/content_frame"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" >

        <Android.support.v4.view.ViewPager
            Android:id="@+id/viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_above="@+id/tabLayout" />

        <Android.support.design.widget.TabLayout
            Android:layout_alignParentBottom="true"
            Android:id="@+id/tabLayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:minHeight="?attr/actionBarSize"/>
    </RelativeLayout>

</LinearLayout>
1
kakopappa
Android:layout_alignParentBottom="true"

Ajouter ce paramètre dans

Android.support.design.widget.TabLayout
1
ali

Haut de la page Paramètres LinearLayout et définissez Android:gravity="bottom". C'est tout. Voici le code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:minWidth="25px"
    Android:minHeight="25px"
    Android:gravity="bottom"> //Thats it.
    <Android.support.design.widget.TabLayout
        Android:layout_width="match_parent"
        Android:layout_height="45dp"
        Android:id="@+id/tabLayout1">
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/home"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem1" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/mypage"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem2" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/friends"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem3" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/messages"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem4" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/settings"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem5" />
    </Android.support.design.widget.TabLayout>
</LinearLayout>
0
Hasan Tuna Oruç