Navbar appear 2 times when use databinding

Question

Hi I am trying use the data-bitindng with the navbar for do it I have the next code:

MapActivity.java

public class MapActivity extends BaseActivity
        implements NavigationView.OnNavigationItemSelectedListener, OnMapReadyCallback, GoogleMap.OnMarkerClickListener{

    private static final float INITIAL_MAP_ZOOM_LEVEL = 17;
    private static final int INITIAL_REQUEST_CODE = 1;
    private GoogleMap mMap;
    private CameraUpdate cameraUpdate = null;
    private MapViewModel mapViewModel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMapBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_map);
        mapViewModel = ViewModelProviders.of(this).get(MapViewModel.class);
        binding.setMapViewModel(mapViewModel);
        binding.setLifecycleOwner(this);

        NavHeaderMapBinding headerBinding = NavHeaderMapBinding.inflate(getLayoutInflater());
        headerBinding.setMapViewModel(mapViewModel);
        binding.navView.addHeaderView(headerBinding.getRoot());

        setDrawerLayout();
        setNavigationView();
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
        setMap();
        setButtonEvents();

    }
...

map_layout.xml

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

        <variable
            name="mapViewModel"
            type="com.emtmadrid.cardiomadapp.map.MapViewModel" />
    </data>
    <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_map"
            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:headerLayout="@layout/nav_header_map"
            app:menu="@menu/activity_map_drawer" />

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

app_nav_bar.xml

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

        <variable
            name="mapViewModel"
            type="com.emtmadrid.cardiomadapp.map.MapViewModel" />
    </data>
    <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=".map.MapActivity">

        <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="@color/white"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

        <include layout="@layout/content_map"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


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

When execute this code, I get the screen of the MapActivity but with 2 navbar, the first navbar databinding not work, and in the second navbar work perfectly.

How can solve this?

Any idea?

Thanks.

Answer 1

I'd like to challenge the accepted answer, because removing app:headerLayout appears counter-productive to me ...the data-binding is just missing the bind attribute on the include nodes:

<include
    layout="@layout/app_bar_map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    bind:mapViewModel="@{mapViewModel}"/>

The same would go for this include, which should be moved outside of app_nav_bar.xml:

<include layout="@layout/content_map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    bind:mapViewModel="@{mapViewModel}"/>

The result would be a working data-binding, where one only has to assign the MapViewModel once; the name-space for bind would be xmlns:bind="http://schemas.android.com/apk/res-auto".

When app_nav_bar.xml would only contain the AppBarLayout, it might be easier to handle; especially that include layout="@layout/content_map" appears quite confusing, in a file which is called app_nav_bar.xml. inflating the NavHeaderMapBinding is not required when having it already assigned with app:headerLayout - but the bind attribute is required, in order to have it bound.

Data-Binding Expressions: Includes also explains the combination of include & bind - which is generally less effort than inflating & binding several views by code - because inflating & binding the view once only works, when data-binding the include nodes properly with the layout resource XML. it's the actual beauty of data-binding, not having to bind all the includes by code.

Answer 2

To solve the problem I dropped the following line in the app_nav_bar.xml

app:headerLayout="@layout/nav_header_map"