android - programacion - El botón de acción flotante no se muestra por completo dentro de un fragmento
pasar de un fragment a otro android studio (8)
Estoy usando el botón FAB junto con RecyclerView en un Fragmento. Este Fragmento es una instancia de un TabViewPager. Tengo un problema con el botón FAB. He colocado el botón RecyclerView y el fab dentro de FrameLayout, donde el botón FAB se encuentra en la parte inferior derecha. Ahora el problema que estoy enfrentando es que el botón FAB no es completamente visible. Su mitad de la porción está oculta como se muestra en la captura de pantalla a continuación. ¿Alguien puede ayudarme a resolver este problema? Gracias por adelantado.
Nota: El FAB se está alineando correctamente una vez que se desplaza. El problema surge solo si es ideal (antes de desplazarse).
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="10dp"
app:backgroundTint="@color/red"
android:src="@drawable/ic_done"/>
</FrameLayout>
tabviewpagerlayout.xml
<?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/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:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</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>
- Tuve el mismo problema que FloatingActionButton era completamente invisible, y estaba fuera de la pantalla en la parte inferior. Cuando me desplazo hacia abajo aparece.
- Además, las pestañas se ocultaban cuando se desplazaban hacia abajo, pero quería que fueran visibles siempre, así que lo solucioné al eliminar la
app:layout_scrollFlags="scroll|enterAlways". Créditos a JDev sobre cómo evitar ocultar las pestañas cuando se desplaza hacia abajo?
Esto resolvió el problema de FloatingActionButton también, ahora está visible.
Debes mover tu FAB dentro de CoordinatorLayout . Algo como esto:
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout>
<android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_gravity="end|bottom"/>
</android.support.design.widget.CoordinatorLayout>
Luego puede agregar RecyclerView dentro de viewPager de esta manera:
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new RecyclerViewFragment(), "Tab1");
viewPager.setAdapter(adapter);
donde el diseño de RecyclerViewFragment es:
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Esta solución funcionó para mí. Crea una nueva clase llamada CustomBehavior con el siguiente código:
public class CustomBehavior extends CoordinatorLayout.Behavior<ViewPager> {
private int mActionBarHeight;
public CustomBehavior(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
init(context);
}
public CustomBehavior(Context context) {
init(context);
}
private void init(Context context) {
TypedValue tv = new TypedValue();
if (context.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics());
}
}
@Override
public boolean layoutDependsOn(CoordinatorLayout parent, ViewPager child, View dependency) {
return dependency instanceof AppBarLayout;
}
public boolean onDependentViewChanged(CoordinatorLayout parent, ViewPager child, View dependency) {
offsetChildAsNeeded(parent, child, dependency);
return false;
}
private void offsetChildAsNeeded(CoordinatorLayout parent, View child, View dependency) {
if (child instanceof ViewPager) {
ViewPager viewPager = (ViewPager) child;
View list = viewPager.findViewById(R.id.recycler_view);
if (list != null) {
final CoordinatorLayout.Behavior behavior =
((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
if (behavior instanceof AppBarLayout.Behavior) {
final AppBarLayout.Behavior ablBehavior = (AppBarLayout.Behavior) behavior;
AppBarLayout appBarLayout = (AppBarLayout) dependency;
ViewCompat.setTranslationY(list, ablBehavior.getTopAndBottomOffset()
+ appBarLayout.getTotalScrollRange()
+ mActionBarHeight);
}
}
}
}
}
Ahora, asigne la clase de comportamiento personalizado al widget viewpager en el archivo xml
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="yourpackage.CustomBehavior"
/>
Estoy enfrentando los mismos problemas con el buscapersonas. El primer Fragmento de los botones FAB se muestra debajo de la pantalla y en el desplazamiento de su presentación. Pero después de algunos hallazgos, descubrí que he escrito
app:layout_behavior="@string/appbar_scrolling_view_behavior"
en ViewPager en CoordinatorLayout. Entonces, después de eliminar este comportamiento de desplazamiento, se resuelven los problemas de posición FAB.
Verifique que mi Implementación funcione correctamente:
<?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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/app_name"
android:textColor="@color/textPrimary"
android:textSize="18sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="@string/str_toolbar_subtittle"
android:textColor="@color/textPrimary"
android:textSize="14sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
app:tabGravity="fill"
app:tabIndicatorColor="@color/colorAccent"
app:tabSelectedTextColor="@color/errorColor"
app:tabTextColor="@color/white" />
</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/app_bar" />
</android.support.design.widget.CoordinatorLayout>
Hice lo que Gabriele sugirió al mover el FAB a la actividad que lo contiene. También necesitará actualizar el color / clickListener del FAB en onTabSelected:
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
...
setFloatingActionButtonForImagesTab();
}
...
@Override
public void onTabSelected(final TabLayout.Tab tab) {
switch (tab.getPosition()) {
case 0:
setFloatingActionButtonForImagesTab();
break;
case 1:
setFloatingActionButtonForMusicTab();
break;
case 2:
setFloatingActionButtonForVideoTab();
break;
}
}
...
}
y luego, en la función de configuración, simplemente configure el color y haga clic en el oyente:
private void setFloatingActionButtonForImagesTab() {
myViewPager.setCurrentItem(0);
floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));
floatingActionButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG)
.show();
}
});
}
Tome nota de la llamada a setCurrentItem arriba. Se requiere ahora que implemente TabLayout.OnTabSelectedListener .
Me encontré con el mismo problema. Desafortunadamente, no tengo una respuesta para ti, sino un punto adicional.
No es que el botón esté presionado, sino que se ha empujado hacia abajo todo el fragmento. No lo he probado hasta el momento, pero me imagino que si hay una manera que te permita ver el tamaño de la página del fragmento, verás que no termina en la parte inferior de la pantalla como debería ser.
para una posible solución, estoy pensando en agregar un relleno de tamaño "? attr / actionBarSize" en la parte inferior.
Voy a probar esto y publicar cuando termine
actualización: como usé un borde de 80 dp, obtengo una captura de pantalla (no tengo 10 reputación para publicar una captura de pantalla, wth)
solución:
<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/rootLayout"
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">
<include
layout="@layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/fragment_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/border"
android:layout_marginTop="?attr/actionBarSize"
>
<!--android:paddingBottom="?attr/actionBarSize"-->
<!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/border"></LinearLayout>
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="com.derek.hianthy.mydiary.ui.BaseFragment"
tools:layout="@layout/layout"
android:background="@drawable/border"
/>
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="@dimen/fab_margin_bottom"
android:layout_marginRight="@dimen/fab_margin_right"
android:src="@drawable/ic_action_add"
app:borderWidth="0dp"
app:fabSize="normal"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="false"
android:layout_alignParentLeft="false" />
</android.support.design.widget.CoordinatorLayout>
aplicación notic: layout_behavior = "@ string / appbar_scrolling_view_behavior" se ha eliminado. result
No es una solución aceptable tener que mostrar / ocultar el FAB sea cual sea la pestaña seleccionada. Probé todas las combinaciones de diseños, pero mover la FAB al diseño de la actividad fue la única solución que funcionó. Pero, ¿y si necesitas el botón solo en una pestaña? Es la única manera que funciona ahora, pero estoy esperando una actualización de la biblioteca de diseño ya que esta versión es demasiado defectuosa. De todos modos, la conclusión es que el FAB debe ser un descendiente directo de CoordinatorLayout, por lo que no se ve empujado hacia abajo por la barra de herramientas que se desploma ...
Puede ser un poco tarde, pero para mí la mejor opción parece ser crear otro fragmento que contenga el fragmento con su contenido y el botón flotante. Este código funciona muy bien en mi aplicación:
<FrameLayout 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="domain.ItemsFragment">
<fragment
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:name="com.lucyapp.client.ItemFragment"
android:id="@+id/fragment"
tools:layout="@layout/fragment_item_list" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/fab_margin"
android:src="@android:drawable/ic_dialog_email" />
</FrameLayout>