Diseño para la barra de herramientas de superposición de fragmentos
Estoy reemplazando / colocando mis Fragmentos en un FrameLayout dentro de un DrawerLayout con este código:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <include layout="@layout/app_bar_base" android:layout_width="match_parent" android:layout_height="match_parent" /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> <!--drawer items--> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/nav_header_base" app:menu="@menu/activity_base_drawer" /> </android.support.v4.widget.DrawerLayout>
app_bar_base.xml
contiene una barra de herramientas y una FAB:
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".BaseActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:id="@+id/appBar" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <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/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <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" /> </android.support.design.widget.CoordinatorLayout>
Cuando ejecuto mi aplicación, este es el resultado:
Como puede ver, el diseño del fragmento se superpone a la barra de herramientas. ¿Cómo puedo solucionar esto?
He intentado colocar la barra de herramientas y FrameLayout dentro de un LinearLayout como este:
<LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/app_bar_base" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
Pero entonces el FrameLayout se oculta.
No olvide añadir la aplicación: layout_behavior = "@ string / appbar_scrolling_view_behavior" a su diseño de contenido
<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: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:layout_width="match_parent" android:layout_height="wrap_content" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </android.support.design.widget.CoordinatorLayout>
Intenta agregar android:layout_marginTop="?attr/actionBarSize"
al FrameLayout
que usas para poner los Fragments
en.
<FrameLayout android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize"/>
Trabajado para mi
Utilizar debajo del código
<LinearLayout android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <include layout="@layout/app_bar_base" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
También puede utilizar RelativeLayout
lugar de LinearLayout
con el atributo android:weight
. Es bueno para el rendimiento
<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include layout="@layout/app_bar_base" android:layout_width="match_parent" android:layout_height="wrap_content" /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/app_bar_base" /> </RelativeLayout>
Finalmente me di cuenta de la solución
Supongamos que tiene FragmentOne de dos fragmentos y FragmentTwo
que está reemplazando en su actividad principal y uno de ellos se superpone a la barra de herramientas / barra de herramientas
En su activity_main.xml cree un FrameLayout que va a utilizar para reemplazar como un fragmento activity_main.xml
<?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: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/AppTheme.AppBarOverlay"> <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/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <!--We will use this framelayout to be replace with fragment so that the above toolbar does not get overlap--> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container"></FrameLayout> </LinearLayout>
Ahora en MainActivity.java
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Set your toolbar in your MainActivity Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); FragmentManager fragmentManager=getFragmentManager(); FragmentTransaction transaction=fragmentManager.beginTransaction(); if(yourOwnConditionToReplaceFragment()){ FragmentOne fragmentOne=new FragmentOne(); //Notice the id passed in replace function it will make sure that FrameLayout is replaced so fragment will occupy only that portion of screen that is taken by FrameLayout in activity_main.xml transaction.replace(R.id.fragment_container,fragmentOne); }else{ FragmentTwo fragmentTwo=new FragmentTwo(); transaction.replace(R.id.fragment_container,fragmentTwo); } transaction.commit(); }
FragmentOne y FragmentTwo son clases que se extienden Fragmento en ella. Si todavía hay un problema, házmelo saber
Esto es muy sencillo y fácil. Sólo sigue lo que traté de decir a continuación.
Para reemplazar cualquier vista, utilice:
**
getFragmentManager().beginTransaction() .replace(R.id.blankFragment, new SettingsFragment()) .commit();
** // Aquí, blackFragment es id de FrameLayout View. Se reemplaza FrameLayout View con diseño de fragmento. Nota: Debe ser Layout de FrameLayout o Layout de derivados de FrameLayout.
Mi código completo es:
1) SettingsActivity.java
**
public class SettingsActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_fragment); Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2); mToolbar.setTitle("Settings"); //// remove the left margin from the logo mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab mToolbar.setContentInsetsAbsolute(0, 0); setSupportActionBar(mToolbar); // Display the fragment as the main content getFragmentManager().beginTransaction() .replace(R.id.blankFragment, new SettingsFragment()) .commit(); } }
**
2) activity_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:fitsSystemWindows="true" android:orientation="horizontal"> <!--scroll|snap--> <android.support.v7.widget.Toolbar android:id="@+id/toolbar2" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/statusbar" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> <FrameLayout android:id="@+id/blankFragment" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="?attr/actionBarSize" android:layout_gravity="top" android:fitsSystemWindows="true" android:orientation="horizontal" /> </FrameLayout>
** Puedes ver mi pantalla después de haber reemplazado la vista de FrameLayout con la vista de fragmentos