ViewPager con barra degli strumenti e TabLayout ha un'altezza errata

Ho un ViewPager sotto un AppBarLayout (con una barra degli strumenti e un TabLayout). Non riesco a capire perché l'altezza dei frammenti caricati sia maggiore dello spazio disponibile, anche se non ci sono elementi così grandi da rendere scorrevole la scheda.ViewPager con barra degli strumenti e TabLayout ha un'altezza errata

Questo è il layout principale xml:

<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:fitsSystemWindows="true"> 

    <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:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout>

Come si può vedere nel mio Frammento ho un pulsante con un layout_alignParentBottom ma immagino è che si estende all'altezza del viewpager troppo.

Qui il layout dal punto di vista di design:

fonte

2016-04-10 Enrichman

Puoi scattare la schermata della tua app? –

@ NguyễnTrungHiếu Sì, certo. Aggiunto uno schermo – Enrichman

@Enrichman hai trovato la soluzione al tuo problema? Chiedendo perché sto affrontando lo stesso identico problema. :( – Droidwala

devi tenere la TabLayout al di fuori del AppBarLayout.

Qualcosa di simile.

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

<android.support.design.widget.TabLayout 
     android:id="@+id/home_tab_layout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#ffffff" 
     app:tabGravity="fill" 
     app:tabIndicatorColor="@color/primary_blue_dark" 
     app:tabMode="fixed" 
     app:tabSelectedTextColor="@color/primary_blue" 
     app:tabTextColor="@color/primary_blue_light" 
     app:tabTextAppearance="@style/tab_layout_font_style"/> 

<android.support.v4.view.ViewPager 
     android:id="@+id/home_viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="fill_horizontal"/>

Questo ha funzionato per me.

fonte

2016-04-11 05:36:59

Prova con questo.

Qui è necessario dichiarare android:fillViewport="false" proprietà in Tab Bar.

<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:fitsSystemWindows="true"> 

    <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:tabGravity="fill" 
      app:tabMode="fixed" /> 
    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 
</android.support.design.widget.CoordinatorLayout>

cambiano qui a Tab Bar.

<android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" />

EDIT 1:

Questo è quello che lavora per me, vedere questo.

<?xml version="1.0" encoding="utf-8"?> 

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     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:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:layout_scrollFlags="scroll|enterAlways|snap" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

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


</android.support.design.widget.CoordinatorLayout>

fonte

2016-04-11 05:44:45

Non funziona. :( – Enrichman

@Enrichman Ancora qual è il problema che potresti specificare? –

Sempre lo stesso: come si può vedere dallo screenshot, il pulsante di disconnessione dovrebbe essere in fondo, ma l'altezza del frammento è maggiore dello spazio disponibile, e quindi tutta la vista è scorrevole (ho aggiunto uno screenshot dal vista disegno) – Enrichman

si può provare ad aggiungere un LinearLayout tra AppBarLayout e ViewPager. Per me funziona. :)

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

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

</LinearLayout>

fonte

2016-06-07 08:04:58 claire

Questo avrà l'effetto collaterale della barra di azione appiccicosa, non si nasconderà sullo scorrimento. – Winster

Se avete bisogno di una barra degli strumenti fissa senza scrolling, allora è possibile rimuovere CoordinatorLayout e AppBarLayout dalla progettazione del layout e utilizzare RelativeLayout invece. È un bug della libreria di supporto e non ha soluzione fino a questa data. È sufficiente utilizzare il seguente codice di layout per ViewPager insieme a Toolbar e TabLayout. ViewPager in questo caso non verrà sovrascritto in quanto è stato indicato in questione.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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:layout_height="match_parent" 
    tools:context=".HomeActivity"> 

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

    <android.support.design.widget.TabLayout 
     android:id="@+id/tabs" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:tabIndicatorColor="@android:color/white" 
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
     android:background="?attr/colorPrimary" 
     android:layout_below="@id/toolbar"/> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/tabs"/> 

</RelativeLayout>

Spero che aiuti qualcuno!

fonte

2016-10-16 20:48:47 NightFury

Per me l'unica sollution che ha lavorato con un layout di coordinatore, in modo che Viewpager layout_height rimane entro limiti stava aggiungendo layout_behaviour alla barra degli strumenti, in questo modo:

<android.support.v7.widget.Toolbar 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="?attr/colorPrimary" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" 
     app:popupTheme="@style/AppTheme.AppBarOverlay">

Probabilmente troppo tardi per voi, ma forse aiuta qualcun altro.

Questo non mi ha disturbato quando ho avviato la mia app, ma più tardi, quando volevo aggiungere uno snack bar in un'altra scheda, lo snack bar era visibile solo se avessi fatto scorrere la pagina.

fonte

2016-12-21 13:22:57 r3dm4n

Ho usato il layout relativa all'interno di CoordinatorLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/main_content" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

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

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     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|snap" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" /> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tabs" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fillViewport="false" /> 

    </android.support.design.widget.AppBarLayout> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_below="@id/appbar" 
     /> 

</RelativeLayout> 
</android.support.design.widget.CoordinatorLayout>

fonte

2017-05-01 07:39:50

Aggiunta di un padding al ViewPager ha fatto il trucco per me:

<android.support.v4.view.ViewPager 
    android:id="@+id/viewpager" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingBottom="?attr/actionBarSize" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Nota che l'imbottitura ha la stessa dimensione esatta come le barre degli strumenti height.
Invece di ?attr/actionBarSize, ?actionBarSize è anche valido.

fonte

2017-09-25 19:39:13

ViewPager con barra degli strumenti e TabLayout ha un'altezza errata

risposta

Problemi correlati