CODEWITHSUNDEEP
androidnavigation-drawerandroid-databinding
Jan Slominski
Jan Slominski

Reputation: 2978

Android Two-Way Data Binding in NavigationDrawer

I'm implementing new app using Data Binding library. Unfortunately I can't find any examples of Two-Way binding in navigation drawer (using android.support.v4.widget.DrawerLayout). The drawer layout contains some mutable text and two toggle swtiches (using android.support.v7.widget.SwitchCompat).

Does it make sense to use data binding in this scenario? Any ideas on how to implement this? Does anyone have/found some example code for this kind of implementation?

Upvotes: 2

Views: 6557

Answers (2)

findusl
findusl

Reputation: 2644

I also want to use databinding for a drawerlayout and these are my findings. I use the androidx.drawerlayout.widget.DrawerLayout. I assume by now you also use this.

Now I have two cases:

  • if you want to bind to the header of your drawerlayout you can do this. The easiest way I found is to inflate the header layout myself in the MainActivity and set the databindings as usually and then set it on the drawer layout as a header.

  • however if you want to databind the items in the drawer these are inflated from a menu and data bindings do not support menus. See this question (at least in my case I use menu, you really don't provide much information)

Upvotes: 0

Alex Kuzmin
Alex Kuzmin

Reputation: 725

Does it make sense to use data binding in this scenario?

It really depends on the architecture. Data binding is often used together with the MVVM architecture (see this example if you're not familiar with it). But anyway, if you prefer to write your code consistently you wouldn't want to mix the data binding with conventional findViewById() and you'd like to have the data binding everywhere.

The implementation is not much different from any other data binding case. Layout (named R.layout.act_main in this example) should have a two-way binding:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">

<data>

    <import type="android.view.View"/>

    <variable
        name="VM"
        type="your.package.name.MainActivityVM"/>
</data>

<android.support.v4.widget.DrawerLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- Put your main activity content here-->

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:orientation="vertical">

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{VM.mutableText}"
                tools:text="Sample text" />

        <android.support.v7.widget.SwitchCompat
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="@={VM.optionEnabled}"
            android:text="Option"/>

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

View model should have the corresponding getter:

public class MainActivityVM {

    private ObservableField<String> mMutableText = new ObservableField<>();
    private ObservableBoolean mOptionEnabled = new ObservableBoolean(false);

    public MainActivityVM() {
        //Your stuff here. E.g., you can add a listener to track the switch toggle:
        mOptionEnabled.addOnPropertyChangedCallback(new Observable.OnPropertyChangedCallback() {
            @Override
            public void onPropertyChanged(Observable sender, int propertyId) {
                if (mOptionEnabled.get()) {
                    //Do some stuff if the user turned the switch on
                }
            }
        });
        mMutableText.set("Hello world!");
    }

    public ObservableField<String> getMutableText() {
        return mMutableText;
    }

    public void setOptionEnabled(ObservableBoolean optionEnabled) {
        this.mOptionEnabled = optionEnabled;
    }

    public ObservableBoolean isOptionEnabled() {
        return mOptionEnabled;
    }
}

View model should be bound in the activity like this:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        ActMainBinding binding = DataBindingUtil.setContentView(this, R.layout.act_main);

        MainActivityVM viewModel = new MainActivityVM();
        binding.setVM(viewModel);
    }
}

Upvotes: 3

Related Questions