webentwicklung-frage-antwort-db.com.de

Wie kann ich Android TabLayout am unteren Bildschirmrand einstellen?

Meine Frage ist, wie ich das neue Android-Materialdesign TabLayout so einstellen kann, dass es sich im unteren Bereich des Bildschirms befindet, ähnlich wie die untere Symbolleiste von Instagram. 

Wenn Sie die Benutzeroberfläche von Instagram noch nie gesehen haben, finden Sie hier einen Screenshot:

If you have never seen Instagram's UI here is a screenshot of it. Wenn es eine bessere Vorgehensweise gibt, können Sie es hier posten (wenn möglich mit einem Codebeispiel). Ich werde es sehr schätzen.

Hier ist mein 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"  />

Ich habe viele Methoden und Problemumgehungen ausprobiert, die von der Stack Overflow-Community vorgeschlagen wurden, aber mit dieser neuen Implementierung von Registerkarten in Android scheint keine zu funktionieren. Ich weiß, dass dieses UI-Design nicht den Android-Designrichtlinien folgt. Bitte kommentieren Sie es nicht. Dieses UI-Design ist für die UX meiner Anwendung von entscheidender Bedeutung, und ich würde mich freuen, eine Antwort darauf zu erhalten. Vielen Dank!

androidandroid-layoutandroid-tablayout
23
user562

Ich glaube, ich habe die beste einfache Lösung. Verwenden Sie ein LinearLayout und legen Sie die Höhe des Viewpagers auf 0dp mit einem layout_weight = "1" fest. Stellen Sie sicher, dass das LinearLayout vertikal ausgerichtet ist und der Viewpager vor dem TabLayout angezeigt wird. So sieht Minen aus:

<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>

Und als Bonus sollten Sie Ihre Toolbar nur einmal als toolbar.xml erstellen. Auf diese Weise müssen Sie nur das Include-Tag verwenden. Macht Ihr Layout sauberer. Genießen!

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" />

Update 11.2.2016: Für diejenigen von Ihnen, die nicht wissen, wie man die Symbolleiste aufbläst, ist hier die Anleitung. Stellen Sie sicher, dass Ihre Aktivität AppCompatActivity erweitert, sodass Sie setSupportActionBar () und getSupportActionBar () aufrufen können. 

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

Trennen Sie AppBarLayout und tabLayout wie in meinem Code unten besser voneinander. Auf diese Weise können Sie die Registerkartenleiste ändern und die Pager-Eigenschaften unabhängig voneinander anzeigen. 

<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

Ich hatte ein ähnliches Problem in Android Studio 2.2. Das habe ich getan,

<?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"

Fügen Sie diese Einstellung hinzu

Android.support.design.widget.TabLayout
1
ali

Anfang der Seite LinearLayout-Einstellungen und Android:gravity="bottom". Das ist es. Hier ist der 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ç