Develop Reference

Binding event not firing on Adapter

I am following Android Archt. component to build a project. Following the guidelines I have created a custom Adapter named CataloguesAdapter extending DataBoundListAdapter as :
public class CataloguesAdapter extends DataBoundListAdapter<CatalogueEntity, CatalogueItemBinding> {
private final android.databinding.DataBindingComponent dataBindingComponent;
private final ContributorClickCallback callback;
private CatalogueItemBinding mBinding;
public CataloguesAdapter(DataBindingComponent dataBindingComponent,
ContributorClickCallback callback) {
this.dataBindingComponent = dataBindingComponent;
this.callback = callback;
}
#Override
protected CatalogueItemBinding createBinding(ViewGroup parent) {
mBinding = DataBindingUtil
.inflate(LayoutInflater.from(parent.getContext()),
R.layout.catalogue_item, parent, false,
dataBindingComponent);
//while this click event is working fine
mBinding.getRoot().setOnClickListener(v -> {
CatalogueEntity catalogueEntity = mBinding.getCatalogue();
if (catalogueEntity != null && callback != null) {
callback.onClick(catalogueEntity);
}
});
//todo:not working, this event is not firing
mBinding.deleteIcon.setOnClickListener(v-> callback.onItemDelete());
return mBinding;
}
}
I am implementing swipe to delete layout on Recycler view item. Below is the XML layout of list item:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="catalogue"
type="com.mindtree.igxbridge.traderapp.datasource.local.entity.CatalogueEntity" />
</data>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardUseCompatPadding="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/view_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorRed">
<ImageView
android:id="#+id/delete_icon"
android:layout_width="#dimen/dimen_30_dp"
android:layout_height="#dimen/dimen_30_dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/dimen_10_dp"
app:srcCompat="#drawable/ic_delete"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/dimen_10_dp"
android:layout_toStartOf="#id/delete_icon"
android:text="#string/text_delete"
android:textColor="#color/Material.87.white"
android:textSize="14sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/view_foreground"
android:layout_width="match_parent"
android:background="#FFFFFF"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/arrow_icon"
android:layout_width="#dimen/dimen_30_dp"
android:layout_height="#dimen/dimen_30_dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="#dimen/dimen_10_dp"
app:srcCompat="#drawable/ic_arrow_right" />
</RelativeLayout>
</FrameLayout>
</android.support.v7.widget.CardView>
</layout>
Another operation like swipe left/right is working fine but clicking on Delete button event is not getting called.
I tried checking findViewbyId and register click event by that, but no luck with that too.
While CatalogueItemBinding is registered correctly, I am not able to find any other source of error.
Thanks.

Correct me if I have misunderstood your code. You used a FrameLayout to host two relative layouts one top of each other (foreground and background). The delete button is in the background and foreground has match_parent in its width attribute. Therefore, I think the delete button is getting covered by the foreground, leading to "not firing of the event".
Possible Solution
Try incorporating the delete button in the foreground. It makes sense to put UI components in the front.

I think you forget to tell your adapter class to where your XML is set or not to adapter class. just create a variable in XML which will import your adapter class have look.
<variable
name="myAdapter"
type="import your adapter class">
</variable>
Now set this variable to your adapter.
#Override
protected CatalogueItemBinding createBinding(ViewGroup parent) {
mBinding = DataBindingUtil
.inflate(LayoutInflater.from(parent.getContext()),
R.layout.catalogue_item, parent, false,
dataBindingComponent);
mBinding .setmyAdapter(this);
return mBinding;
}
}
then your click will work. Hope it will help you.

Android - Conditional text value using Data Binding

I want to set the text of my TextView conditionally to either one or the other.
Android Data Binding documentation suggests that you can set the text conditionally if the text is a property of the view model. e.g.
android:text="#{user.displayName != null ? user.displayName : user.lastName}"
But is there any way to set the text from the strings.xml rather than adding it in my view model? I want something like this-
android:text="#{viewModel.expanded ? #string/collapse : #string/expand}"
The XML looks somewhat like this:
<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:bind="http://schemas.android.com/apk/res-auto">
<data class="TravellerInfoBinding">
<import type="android.view.View" />
<variable name="viewModel" type="com.myproject.viewmodel.TravellerInfoViewModel" />
</data>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/expandable_arrow_blue" />
<TextView style="#style/primary_pair_element_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#{viewModel.expanded ? #string/taxes_fees_detail : #string/hide_taxes_fees_detail}"
android:textSize="12sp" />
</LinearLayout>
</layout>
And this is my View Model-
package com.myproject.viewmodel;
imports...
public class TravellerInfoViewModel extends BaseObservable {
#Bindable
private final TaxDetailsViewModel taxDetailsViewModel;
#Bindable
private boolean expanded;
Constructor....
public boolean isExpanded() {
return expanded;
}
public void setExpanded(boolean expanded) {
this.expanded = expanded;
notifyPropertyChanged(BR.expanded);
}
public void toggleExpanded() {
setExpanded(!expanded);
}
}

Actually, this works fine for me
<TextView
android:id="#+id/btnEdit"
style="#style/Common.Toolbar.Action.Text"
android:onClickListener="#{onEditClick}"
android:text="#{vm.editMode ? #string/contacts_done : #string/contacts_edit}"
tools:text="#string/contacts_edit"/>
Where vm - it's a ViewModel and editMode - it's ObservableBoolean

Here's a fix/work-around :
define a duplicate Xml definition of the layout where you want a conditional value
for each block, set one of the condition values
set the visibility of each Xml definition according to the data binding boolean value
Not the ideal solution, not very pretty .. but functionally equivalent - and works in the interim until proper solution is found.
Here's how I solved it for android:textStyle, where I had a special case requirement for showing values in bold.
<variable
name="viewModel"
type="com.demo.app.SomeViewModel"/>
...
<TextView
style="#style/RowValue"
android:visibility="#{ ! viewModel.boldRow ? View.VISIBLE : View.GONE}"
android:text="#{viewModel.currentValue}"
/>
<TextView
style="#style/RowValue"
android:visibility="#{ viewModel.boldRow ? View.VISIBLE : View.GONE}"
android:text="#{viewModel.currentValue}"
android:textStyle="bold"
/>

Binding varargs using android databinding library

I am trying to write a custom setter for SwipeRefreshLayout's
setColorScheme(int... colors).
But it seems that its parameter is varargs.
I can only bind a single color now like the following:
#BindingAdapter("app:colorSchemeResources")
public static void bindRefreshColor(SwipeRefreshLayout swipeRefreshLayout, int colorResId) {
swipeRefreshLayout.setColorSchemeColors(colorResId);
}
xml:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:colorSchemeResources ="#{#color/primary}"
/>
My question is:
How can I write a custom setter for varargs?
How to bind varargs in the xml file?

Please try this:
Specify an integer array containing the colors you want in your colors.xml for example:
<integer-array name="color_scheme" >
<item>#color/first_color</item>
<item>#color/second_color</item>
</integer-array>
Change your bindingadapter like this:
#BindingAdapter("app:colorSchemeResources")
public static void bindRefreshColor(SwipeRefreshLayout swipeRefreshLayout, int[] colorResIds) {
swipeRefreshLayout.setColorSchemeColors(colorResIds);
}
And reference your array in your view:
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_width="match_parent"
app:colorSchemeResources ="#{#intArray/color_scheme}"
android:layout_height="wrap_content">

Mvvm cross binding data context

I am trying to implement a mvvm cross solution. I am facing an issue with bindings..
I am trying to implement the solution in xamarin.android.
Below is my Main Layout page - Main.axml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
local:MvxBind="Text Title/>
<Mvx.MvxListView
android:id="#+id/SRMTypeList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:fastScrollEnabled="true"
local:MvxItemTemplate="#layout/list_Item"
local:MvxBind="ItemsSource PersonCollection" />
</LinearLayout>
Below is my View Model:
public class MainViewModel :MvxViewModel
{
private string title;
public String Title
{
get{ return title;}
set
{
title = value;
RaisePropertyChanged (()=> Title);
}
}
List<Person> _personCollection;
List<Person> PersonCollection
{
get { return _personCollection; }
set
{
_personCollection = value;
RaisePropertyChanged (() => PersonCollection);
}
public MainViewModel()
{
_personCollection = new List<Person>();
PersonCollection.Add(new Person{Name="Steve", Salary=10000});
PersonCollection.Add(new Person{Name="Mary", Salary=20000});
}
}
MainView.cs
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);
SetContentView (Resource.Layout.Main);
}
The issue starts here in the item template for my list view in the main screen list_Item.axml is shown below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<CheckBox
android:id="#+id/checkbox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
local:MvxBind="?" />
<TextView
android:textColor="#fff"
android:textSize="16sp"
local:MvxBind="?"/>
</LinearLayout>
How to make the binding for TextView's Text and CheckBox to parent's view model (ie. in the Main View Model class)?.
Any pointer/ help to solve this will be highly appreciated.
I have gone through below links .. but being a newbie was not able to understand the implementation.
Binding button click in ListView template MvvMCross
MVVMCross changing ViewModel within a MvxBindableListView
I am not able to understand how to create the wrapper class and how to set the data context of the item template (list_Item.axml) to this wrapper class.
Is their any way in mvvm cross so that i can refer bindings in the item template directly to the parent view model in my case which is MainViewModel.
Can anyone kindly post a simpler example?
Thanks

I'm not sure if that's what you are asking, but to make a binding of the person's name to the listitem textview:
local:MvxBind="Text Name"
And instead of using a List you should use an ObservableCollection
ObservableCollection<Person> _personCollection;
ObservableCollection<Person> PersonCollection
{
get { return _personCollection; }
set
{
_personCollection = value;
RaisePropertyChanged (() => PersonCollection);
}
}
For the checkbox i would add a field to the Person class such as IsSelected and bind it to the checkbox:
local:MvxBind="Checked IsSelected"

MvxListView create binding for template layout from code

Lets say I have a simple Layout with a MvxListView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res/LiivControl.Client.Droid"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Mvx.MvxListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource AutoListItems; ItemClick AutoListItemClicked"
local:MvxItemTemplate="#layout/vbmvxautoviewlistitem" />
</LinearLayout>
My item template layout is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res/LiivControl.Client.Droid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="10dip"
android:paddingBottom="10dip"
android:paddingLeft="15dip">
<TextView
android:id="#+id/list_complex_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/list_complex_caption"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
I would like to specify the bindings for the two textview elements in my itemtemplate from code behind. I am not sure how best to go about it. I'm guess I could do something "OnViewModelSet" in the view code behind of the MvxListView. I have tried the following but for it obviously doesn't work because it can't find the control.
protected override void OnViewModelSet()
{
IVbMvxAutoListViewModel vm = base.ViewModel as IVbMvxAutoListViewModel;
TextView title = this.FindViewById<TextView>(Resource.Id.list_complex_title);
this.CreateBinding(title).For(x => x.Text).To(vm.ListItemDescriptor.TitlePropName).Apply();
TextView subTitle = this.FindViewById<TextView>(Resource.Id.list_complex_caption);
this.CreateBinding(subTitle).For(x => x.Text).To(vm.ListItemDescriptor.SubTitlePropName).Apply();
base.OnViewModelSet();
}
My other thought was to somehow intercept the oncreate for the itemtemplate view but OnCreate doesn't get called if I create a view code file for my itemtemplate layout.

To do the bindings in code it's probably best to:
implement a custom MvxListViewItem
implement a custom MvxAdapter to return the custom list view item
implement a custom MvxListView to use the custom MvxAdapter
Not tested, but the code for this is roughly:
1. implement a custom MvxListViewItem
public class CustomListItemView
: MvxListItemView
{
public MvxListItemView(Context context,
IMvxLayoutInflater layoutInflater,
object dataContext,
int templateId)
: base(context, layoutInflater, dataContext, templateId)
{
var control = this.FindViewById<TextView>(Resource.Id.list_complex_title);
var set = this.CreateBindingSet<CustomListViewItem, YourThing>();
set.Bind(control).To(vm => vm.Title);
set.Apply();
}
}
2. Create a custom MvxAdapter
In this override CreateBindableView
public class CustomAdapter
: MvxAdapter
{
public CustomAdapter(Context context)
: base(context)
{
}
protected override IMvxListItemView CreateBindableView(object dataContext, int templateId)
{
return new CustomListItemView(_context, _bindingContext.LayoutInflater, dataContext, templateId);
}
}
original: https://github.com/MvvmCross/MvvmCross/blob/v3.1/Cirrious/Cirrious.MvvmCross.Binding.Droid/Views/MvxAdapter.cs#L298
3. implement a custom MvxListView to use the adapter
This should be as simple as:
public class CustomListView
: MvxListView
{
public CustomListView(Context context, IAttributeSet attrs)
: base(context, attrs, new CustomAdapter(context))
{
}
}
As long as this is in your main UI assembly, this should be useable in your axml as:
<CustomListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
local:MvxBind="ItemsSource AutoListItems; ItemClick AutoListItemClicked"
local:MvxItemTemplate="#layout/vbmvxautoviewlistitem" />
If CustomListView is not in your main UI assembly, then there are some tricks to get MvvmCross to pick it up during your Setup - see Providing Custom Android View Assemblies in https://github.com/MvvmCross/MvvmCross/wiki/Customising-using-App-and-Setup#wiki-providing-custom-views-android
The above is the best way to do this (IMO) - but if you wanted to, then you could do it in less code by just applying the bindings inside the custom adapter and by setting that adapter in OnCreate in your Activity