• After 15+ years, we've made a big change: Android Forums is now Early Bird Club. Learn more here.

Problem with Fragments and AppbarLayout

D

danmacleod

Newbie
I'm having an issue with Fragments and my Appbar. I have an Activity that uses fragments. When the Activity is first loaded, I use the FragmentManager to load the initial Fragment. When the user selects an option, I use the FragmentManager to 'replace' the current fragment with the new Fragment. When the new Fragment's UI is displayed, the toolbar title is not shown correctly. If I give focus to the EditText field the soft keyboard is opened and the title will re-display correctly. The best I can tell is when I give focus to the EditText field it forces the toolbar to re-paint. I've tried to 'invalidate' the toolbar but that didn't work. Any idea's?

LOADING THE FRAGMENTS:
Code: 
private void loadFragment( Fragment fragment, String tag ) {
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.replace( R.id.content_frame, fragment, tag ).addToBackStack( tag ).commit();
}

FRAGMENT LAYOUT SNIPPET
Code: 
<?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:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".activities.NitroxActivity">

    <!-- include the Toolbar -->
    <include layout="@layout/appbar_content" />

    <!-- scrolling page content -->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/main_nested_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:fillViewport="true"
        app:layout_behavior="[USER=696546]@String[/USER]/appbar_scrolling_view_behavior">

        <android.support.constraint.ConstraintLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/constraint_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="[USER=696546]@String[/USER]/appbar_scrolling_view_behavior">

            <!-- screen title -->
            <TextView
                android:id="@+id/title_txt"
                style="[USER=19691]@Style[/USER]/Headers"
                android:layout_width="314dp"
                android:layout_height="32dp"
                android:layout_marginEnd="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="[USER=696546]@String[/USER]/partial_pressure_of_oxygen"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.492"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

AppBar
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="[USER=19691]@Style[/USER]/AppTheme.AppBarOverlay"
    app:expanded="false"
    android:fitsSystemWindows="true">

    <!-- android:layout_height="?attr/actionBarSize" -->

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/expanded_image"
            android:layout_width="wrap_content"
            android:layout_height="200dp"
            android:src="@drawable/toolbar_image"
            android:contentDescription="[USER=696546]@String[/USER]/dive_flag"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimaryDark"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="[USER=19691]@Style[/USER]/AppTheme.PopupOverlay" />

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

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

sbIssue.jpg sbIssue2.jpg
 
I had the same problem. There are two ways:
1. You can wrap top level Coordinator Layout with FrameLayout for both Activity and Fragment. This FrameLayout is container for fragments.
2. You can play with "android:fitsSystemWindows =true/false" settings.
Both methods work, but first is simplier.

If you can't cope with this problem, please provide link on the whole project.
 
v777779 said:
I had the same problem. There are two ways:
1. You can wrap top level Coordinator Layout with FrameLayout for both Activity and Fragment. This FrameLayout is container for fragments.
2. You can play with "android:fitsSystemWindows =true/false" settings.
Both methods work, but first is simplier.

If you can't cope with this problem, please provide link on the whole project.
Click to expand...


I believe I understand the fix. I load my fragments using the DrawerLayout below. At runtime I load the fragment into the FrameLayout. However, my fragments layout's all have the CoordinatorLayout as the root. However, in the code below I already have the FrameLayout inside a CoordinatorLayout. So I should be able to remove the CoordinatorLayout in the code below?


<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/draw_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- Layout to contain contents of main body of screen -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>

<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<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:menu="@menu/drawer_menu"
app:headerLayout="@layout/drawer_header" />

</android.support.v4.widget.DrawerLayout>
 
I mean FrameLayout should be a parent of Coordinator Layout. Not child.
That's the sense, FrameLayout does not insert errors when you switch between activity and fragment, you just replace one Coordinator Layoyt by another,
In your example FrameLayout is a child of Coordinator, that's why you have problems.
 
v777779 said:
I mean FrameLayout should be a parent of Coordinator Layout. Not child.
That's the sense, FrameLayout does not insert errors when you switch between activity and fragment, you just replace one Coordinator Layoyt by another,
In your example FrameLayout is a child of Coordinator, that's why you have problems.
Click to expand...

I made the FrameLayout the parent of the CoordinatorLayout and the fragments and appbar display correct, thanks. I still see the issue when I click the device's back button. When I click the devices back button I first see an empty screen, I select the back button again and the previous fragment is displayed but the appbar has the same issue as before.
 
It's hard to advice without code. Could you please provide link on project or demo project that demonstrates issue.
 
What's happening is when I click the device's back button my appbar's title is cut off, (see images at beginning of thread). The appbar is displayed correctly when the fragment is loaded, I only see the issue when I use the phones back button.

1 I use a DrawerLayout as my parent Layout
<?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"
android:id="@+id/draw_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />

<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:menu="@menu/drawer_menu"
app:headerLayout="@layout/drawer_header" />

</android.support.v4.widget.DrawerLayout>

2 I load a fragment into the Drawers FrameLayout (fragment layout snippet)
<?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:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.NitroxActivity">

<!-- include the Toolbar -->
<include layout="@layout/appbar_content" />

<!-- scrolling page content -->
<android.support.v4.widget.NestedScrollView
android:id="@+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:fillViewport="true"
app:layout_behavior="@String/appbar_scrolling_view_behavior">

<android.support.constraint.ConstraintLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/constraint_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@String/appbar_scrolling_view_behavior">
(ImageButtons and other Views).....

3 At this point the fragment and appbar display correctly.
4 If I click the device's back button my appbar title is not displayed properly, see images in beginning of thread
 
Please use [code][/code] tags with code or XML content.
 
I've send you email in private message. This is copy.
You can send link on project to me, by email temp201709@mail.ru
You don't need post whole original project, just make small demo that provides the same error on back button.
Or provide link on the original project.
Your XML files are useless without code.
 
v777779 said:
I've send you email in private message. This is copy.
You can send link on project to me, by email temp201709@mail.ru
You don't need post whole original project, just make small demo that provides the same error on back button.
Or provide link on the original project.
Your XML files are useless without code.
Click to expand...

I was able to fix the issue. I updated my DrawerLayout to contain the FrameLayout as a child of the CoordinatorLayout and updated my fragments to use the ConstraintLayout as the parent. Thanks for your input and pointing me in the right direction.

Code: 
<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Layout to contain contents of main body of screen -->
    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <!-- include the toolbar -->
        <include layout="@layout/appbar_content" />

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/nested_scroll_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:clipToPadding="false"
            android:fillViewport="true"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            >
        <!-- Layout to contain contents of main body of screen -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        </android.support.v4.widget.NestedScrollView>

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

    <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
    <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:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_header" />

</android.support.v4.widget.DrawerLayout>

Fragment xml snippet
Code: 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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/constraint_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <ImageButton
        android:id="@+id/mod_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="71dp"
        android:layout_marginTop="32dp"
        android:contentDescription="@string/max_op_depth"
        android:padding="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/mod"
        tools:paddingHorizontal="0dp" />
....
 
You must log in or register to reply here.
Back
Top Bottom