Geek Answers Handbook

Layout for toolbar overlapping fragments

Am replaces / puts my fragments in a FrameLayout inside DrawerLayout with this code:

<?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 contains the toolbar and 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>

When I run my application, this is the result:

enter image description here

As you can see, the layout for the fragment overlaps the toolbar. How can i fix this?

I tried putting both the toolbar and FrameLayout inside the LinearLayout as follows:

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

but then FrameLayout is hiding.

+6
source share
7 answers

Remember to add the app: layout_behavior = "@ string / appbar_scrolling_view_behavior" to the content layout

 <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>
+17
source

Try adding android:layout_marginTop="?attr/actionBarSize" to the FrameLayout that you use to enter Fragments .

 <FrameLayout android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="?attr/actionBarSize"/>

Worked for me :)

+16
source

Finally, I understood the solution

Suppose you have two fragment classes FragmentOne and FragmentTwo that you replace in your main action, and one of them overlaps the action bar / toolbar

In your activity_main.xml file, create a FrameLayout, which you will use as a replacement as a fragment of 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>

Now in your 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 And FragmentTwo are classes that are extended in it. If there is still a problem, let me know

+1
source

Use below code

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

You can also use RelativeLayout instead of LinearLayout with the android:weight attribute. Good for performance

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

I replaced CoordinateLayout with LinearLayout in the LinearLayout layout, this worked for me, but still it is not.

0
source

It is very simple and easy. Just follow what I tried to say below.

You replace any view using:

**

 getFragmentManager().beginTransaction() .replace(R.id.blankFragment, new SettingsFragment()) .commit();

** // Here blackFragment is the identifier of the FrameLayout View. You are replacing FrameLayout View with a Fragment Layout. Note. It should be FrameLayout or FrameLayout derived layouts.

All my code is:

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>

** You can see my screen after I replaced FrameLayout View with Fragment View

enter image description here

-1
source

More articles:


All Articles