We Keep Coding

Xamarin Android TabLayout Badge: Bind Text Mvvmcross

I made a Custom Layout to add a badge to a tab on Android. This badge is a TextView.
How do I bind this component?
It's possible?
My custom badge layout:
<LinearLayout
android:id="#+id/badgeCotainer"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginStart="90dp"
android:background="#drawable/notifications_background"
android:gravity="center"
android:layout_gravity="right"
android:minWidth="16dp">
<TextView
android:id="#+id/badge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:textColor="#011f7a"
android:textSize="10sp"
android:text="0"
app:MvxBind="Text ContMaterial"/>
</LinearLayout>
My Activity: use MvxViewPagerFragmentInfo
private void InitTabs()
{
var viewPager = FindViewById<ViewPager>(Resource.Id.materiais_viewpager);
if (viewPager != null)
{
var fragments = new List<MvxViewPagerFragmentInfo>
{
new MvxViewPagerFragmentInfo("Requisição",
typeof(CadastraRequisicaoFragment), ViewModel),
new MvxViewPagerFragmentInfo("Materiais",
typeof(ListaMateriaisFragment), ViewModel),
};
viewPager.Adapter = new MvxCachingFragmentStatePagerAdapter(this, SupportFragmentManager, fragments);
}
var tabLayout = FindViewById<TabLayout>(Resource.Id.requisicao_tabs);
tabLayout.SetupWithViewPager(viewPager);
tabLayout.GetTabAt(1).SetCustomView(Resource.Layout.tab_header_badge);
}
On view Model I used raisedPropertyChanged()
Badge appears normally, just don't change value.
Tablayout

Out of the box there is nothing in mvvmcross to bind the content of a TabLayout when you provide a custom view. You could however try something custom using MvxFrameControl
Basically, replace your LinearLayout by the MvxFrameControl, then after
tabLayout.SetupWithViewPager(viewPager);
inflate your custom view using the BindingInflate method, and set a value to your MvxFrameControl's BindingContext, then set your custom tablayout view with the result that operation.
That might do the trick.
Another way to do it, is to listen to your ViewModel's "PropertyChanged" events in your Activity, and manually make changes to your tab layouts when it applies.

Android ProgressBar disappears

I have an android ProgressBar which is indeterminate so it is simply a revolving circle animation.
It starts off displaying fine, but after I set the visibility of its parent (overlayLayout) to either gone or invisible and then set it back to visible later on, the progress bar is unseen?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/overlayLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:gravity="center" >
<TextView
android:text=""
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:textAlignment="center"
android:layout_margin="10dp"
android:layout_height="wrap_content"
android:id="#+id/overlayLabelText" />
<ProgressBar
android:id="#+id/overlayProgressBar"
android:layout_below="#id/overlayLabelText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foregroundGravity="center"
android:indeterminate="true" />
</RelativeLayout>
EDIT:
I'm unsure if the view is included but the progress bar is just not rendered or whether the ProgressBar view itself is completely excluded as I can't access the UI view hierarchy.
So far I have tried:
ProgressBar.Enabled = true;
ProgressBar.ForceLayout();
ProgressBar.Invalidate();
ProgressBar.SetProgress(0, true);
ProgressBar.Visibility = ViewStates.Visible;
But have had no breakthroughs yet.
EDIT 2:
Thankyou everyone for your help so far. I have switched to creating the layout programatically - this is my full code:
overlay = new RelativeLayout(mainActivity)
{
LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
};
overlay.SetBackgroundColor(Color.WhiteSmoke);
overlay.SetGravity(GravityFlags.Center);
description = new TextView(mainActivity)
{
LayoutParameters = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent),
Gravity = GravityFlags.Center,
TextSize = 18,
Id = 1523112
};
description.Text = "Waiting for GPS";
description.SetBackgroundColor(Color.Aqua);
progressBar = new ProgressBar(mainActivity)
{
Indeterminate = true,
};
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.WrapContent);
lp.AddRule(LayoutRules.Below, description.Id);
progressBar.LayoutParameters = lp;
progressBar.SetBackgroundColor(Color.Red);
container.AddView(overlay);
overlay.AddView(description);
overlay.AddView(progressBar);
With the two hiding and showing methods:
private void OnGpsUpdate()
{
overlay.Visibility = ViewStates.Gone;
}
private void NoGPS()
{
description.Text = "Waiting for GPS";
overlay.Visibility = ViewStates.Visible;
}
When the layout is first rendered, before its hidden for the first time:
(I screenshotted at a bad time, but blue drawing shows where the circle is moving around its loading animation)
After its been hidden and shown again, the progressBar loading view is there but there's no loading circle anymore:
I am starting to think it may just be a problem with my android emulator? Nope, same problem when testing on my physical phone. Text view still shows fine, its just the progress bar doesnt show?
SOLUTION
I don't fully understand it, seeing as everything else seemed to work except the progressBar, but a solution came from wrapping my visibility calls in a RunOnUIThread() call.

Few points
Based on how the problem was described, there is a need for you to show the code snippet you used for hiding/showing the overlayLayout
Recommendations
If you're only concerned with how the progress bar should behave in terms of hiding/showing, there's no need for this snippet:
ProgressBar.Enabled = true;
ProgressBar.ForceLayout();
ProgressBar.Invalidate();
ProgressBar.SetProgress(0, true);
ProgressBar.Visibility = ViewStates.Visible;
You just need to control the root layout which has the id of overlayLayout
private RelativeLayout overlayLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_example);
// Instantiate the layout
overlayLayout = findViewById(R.id.overlayLayout);
// Do the logic how you inflate/show the layout
...
// Hide the overlay layout
overlayLayout.setVisibility(View.GONE);
// Show the overlay layout
overlayLayout.setVisibility(View.VISIBLE);
}
Decide on the visibility value, for this scenario, I'd recommend View.GONE rather than View.INVISIBLE
Read more on:
https://developer.android.com/reference/android/view/View.html#GONE
https://developer.android.com/reference/android/view/View.html#INVISIBLE
http://tips.androidgig.com/invisible-vs-gone-view-in-android/

The solution was to add a RunOnUIThread like so:
private void OnNewGPS()
{
mainActivity.RunOnUiThread(() =>
{
overlay.Visibility = ViewStates.Gone; });
}
private void NoGPS()
{
mainActivity.RunOnUiThread(() =>
{
overlay.Visibility = ViewStates.Visible;
});
}
Where mainActivity is a reference to the Activity the views are running in.

I wrote a demo based on your code. And to test it, I added a button to control the show and hide of the layout.
You may try this:
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
// Instantiate the layout
overlayLayout = FindViewById<LinearLayout>(Resource.Id.overlayLayout);
progressBar = FindViewById<ProgressBar>(Resource.Id.overlayProgressBar);
description = FindViewById<TextView>(Resource.Id.textView1);
description.Text = "Waiting for GPS";
description.SetBackgroundColor(Color.Aqua);
progressBar.SetBackgroundColor(Color.Red);
switchBtn = FindViewById<Button>(Resource.Id.switchButton);
switchBtn.Click += SwitchBtn_Click;
overlayLayout.Visibility = Android.Views.ViewStates.Visible;
isShown = true;
}
private void SwitchBtn_Click(object sender, System.EventArgs e)
{
if (isShown)
{
overlayLayout.Visibility = Android.Views.ViewStates.Gone;
isShown = false;
switchBtn.Text = "Show";
}
else {
overlayLayout.Visibility = Android.Views.ViewStates.Visible;
isShown = true;
switchBtn.Text = "Hide";
}
You can download the demo from this

to hide layout:
findViewById(R.id.overlayLayout).setVisibility(View.GONE);
to display it again :
findViewById(R.id.overlayLayout).setVisibility(View.VISIBLE);

Android Xamarin - How To Add Animations To View's Position Changes?

So I'm a bit of a newb in Android. I've read a few tutorials but found it extensively complicated to understand. I was hoping someone can help me understand on how to implement Animations to views on the current context I'm working on (noob friendly).
Let's say this is my .axml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:orientation="vertical" />
Now this is my activity (Not exactly but enough information to know what I want to do:
private LinearLayout _topContainer;
private IDictionary<string, FrameLayout> _framelayoutViewsDictionary = new Dictionary<string, FrameLayout>();
private LinearLayout.LayoutParams layoutParams;
protected override void OnCreate(Bundle bundle)
{
//SetContentView and other stuff...
layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent, 1);
_topContainer = FindViewById<LinearLayout>(Resource.Id.top_container);
}
public void CreateFirstVideoPlayer
{
_framelayoutViewsDictionary.Add(Constants.Views.TOP_FRAMELAYOUT, new FrameLayout(this)
{
Id = 1,
LayoutParameters = layoutParams
});
var fragmentManager = FragmentManager.BeginTransaction();
fragmentManager.Add(_framelayoutViewsDictionary[Constants.Views.TOP_FRAMELAYOUT].Id, /*Create New MediaPlayer Here*/, Constants.FragmentTag.TOP_FRAGMENT);
fragmentManager.Commit();
_topContainer.AddView(_framelayoutViewsDictionary[Constants.Views.TOP_FRAMELAYOUT]);
}
public void CreateSecondVideoPlayer
{
_framelayoutViewsDictionary.Add(Constants.Views.BOTTOM_FRAMELAYOUT, new FrameLayout(this)
{
Id = 2,
LayoutParameters = layoutParams
});
var fragmentManager = FragmentManager.BeginTransaction();
fragmentManager.Add(_framelayoutViewsDictionary[Constants.Views.BOTTOM_FRAMELAYOUT].Id, /*Create New MediaPlayer Here*/, Constants.FragmentTag.BOTTOM_FRAGMENT);
fragmentManager.Commit();
_topContainer.AddView(_framelayoutViewsDictionary[Constants.Views.BOTTOM_FRAMELAYOUT]);
}
As you can see. I'm programmatically creating a new FrameLayout, adding a fragment on top. And then putting that FrameLayout on top view which is a LinearLayout. Now when I add the second FrameLayout. The first FrameLayout is halved and the second one is added. So now each FrameLayout is taking 50:50 space. So what I want to do is. When the second FrameLayout is added, I want the first FrameLayout to animate so it slowly moves upwards to the top half of the screen instead of instantly appearing on the top. And when I remove the second FrameLayout the first FrameLayout will slowly animate back to the centre of the screen.
Hope this all makes sense. If you need more info please comment!

Using the Support Libraries to perform a fragment slide in/out is as easy as setting the Fragment's custom animations to the built-in resource abc_slide_in_bottom and abc_slide_out_bottom animations.
Example:
SupportFragmentManager
.BeginTransaction()
.SetCustomAnimations(
Resource.Animation.abc_slide_in_bottom,
Resource.Animation.abc_slide_out_bottom,
Resource.Animation.abc_slide_in_bottom,
Resource.Animation.abc_slide_out_bottom)
.AddToBackStack(count.ToString())
.Add(Resource.Id.linearLayout1, new AFragmentSubClass(), count.ToString())
.Commit();

How to automatically add layout elements with c#?

I want to add elements into my layout automatically, how do I do that? For example a textview appears when a user clicks a button

To add a TextView or any other view in Android you must add the view you want to a view that support addition, one example is the LinearLayout.
If you have this layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lnrRootView"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
And then in you Activity add a TextView programaticlly to your LinearLayout.
public class MainActivity : Activity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.Main);
var linearLayout = FindViewById<LinearLayout>(Resource.Id.lnrRootView);
var textView = new TextView(this);
textView.Text = "Added programaticlly";
linearLayout.AddView(textView);
}
}
You will get something like this:

Much depends on what you're trying to accomplish. You could simulate adding to layout by turning visibility of elements after certain event, eg. button click.
If you want to add elements dynamically during runtime, consider using
ObservableCollection<T>
Link: https://developer.xamarin.com/api/type/System.Collections.ObjectModel.ObservableCollection%601/

I don't know Xamarin.Android very well but I think the right way is to add controls to layout with "IsVisible = false", then set IsVisible = true.
Otherwise you can take a look to
LinearLayout principalview = FindViewById(Resource.Id.mainlayout);
LinearLayout.LayoutParams parametros = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MatchParent, LinearLayout.LayoutParams.MatchParent);
var valueB = new Button(this);
valueB.Text = "Teste";
valueB.SetBackgroundColor(Color.Aqua);
principalview.AddView(valueB, parametros);
OR
var layout = new LinearLayout (this);
layout.Orientation = Orientation.Vertical;
var aLabel = new TextView (this);
aLabel.Text = "Hello, World!!!";
var aButton = new Button (this);
aButton.Text = "Say Hello!";
aButton.Click +=(sender, e) =>
{aLabel.Text="Hello Android!";};
layout.AddView (aLabel);
layout.AddView (aButton);
SetContentView (layout);

MvvmCross : Empty binding target passed to MvxTargetBindingFactoryRegistry

I created an Android application with Xamarin and MvvmCross.
I want to bind some views (text, editing text, button) to my ViewModel. Nothing strange well so far. But my bindings don’t apply… When I use typed FindViewById, I don’t get the traced error but bindings doesn’t apply.
When I run the application, I have the following trace:
MvxBind:Error: Empty binding target passed to MvxTargetBindingFactoryRegistry
MvxBind:Warning: Failed to create target binding for binding for TextProperty
My override of OnCreate(Bundle bundle) void is :
SetContentView(Resource.Layout.Reference);
var referenceTextView = FindViewById(Resource.Id.referenceEditView); // untyped FindViewById
var siteTextView = FindViewById<TextView>(Resource.Id.siteTextView); // typed FindViewById<T>
//var goButton = FindViewById<Button>(Resource.Id.goButton);
var bindingsSet = this.CreateBindingSet<ReferenceView, ReferenceViewModel>();
bindingsSet.Bind(referenceTextView).To(vm => vm.Reference).Mode(MvxBindingMode.TwoWay);
bindingsSet.Bind(siteTextView).To(vm => vm.Site);
//bindingsSet.Bind(goButton).To(vm => vm.GoCommand);
bindingsSet.Apply();
base.OnCreate(bundle);
I’ve tried to do in the AXML :
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/siteTextView"
android:text="####"
local:MvxBind="Text Site"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/referenceTextView"
android:hint="Numéro de dossier"
local:MvxBind="Text Reference" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Accéder"
android:id="#+id/goButton"
local:MvxBind="Click GoCommand" />
The getters and setters of my properties use RaiseAndSetIfChanged method :
private string _reference;
public string Reference
{
get { return _reference; }
set { this.RaiseAndSetIfChanged(ref _reference, value, () => Reference); }
}
I’ve the same LinkerPleaseInclude class than LinkerPleaseInclude original class.
My setup inherits from MvxAndroidSetup class
And on other ViewModels, the bindings are applied correctly.

You need to call base.OnCreate(bundle); before SetContentView as the ViewModel is located and attached inside of that call. Failing to do so will obviously give you the exact errors you see. Source will be null and will not bind to the target.
So you can either do:
base.OnCreate(bundle);
SetContentView(Resource.Layout.Reference);
And have all your bindings in your AXML. Or you can do the other approach setting the bindings behind the scenes:
base.OnCreate(bundle);
SetContentView(Resource.Layout.Reference);
var referenceTextView = FindViewById<TextView>(Resource.Id.referenceEditView);
var siteTextView = FindViewById<TextView>(Resource.Id.siteTextView);
var bset = this.CreateBindingSet<ReferenceView, ReferenceViewModel>();
bset.Bind(referenceTextView).To(vm => vm.Reference);
bset.Bind(siteTextView).To(vm => vm.Site);
bset.Apply();
Just make sure to call base.OnCreate to begin with.

The warnings
MvxBind:Error: 2,20 Empty binding target passed to MvxTargetBindingFactoryRegistry
MvxBind:Warning: 2,20 Failed to create target binding for binding for Text
are caused by var referenceTextView = FindViewById(Resource.Id.referenceEditView); resulting in referenceTextView to be of type View.
MvvmCross is searching for the default binding target property of the type TTarget when calling Bind<TTArget> without For(targetProperty). This is just a look up in a table like:
TTarget Property
----------------------
TextView Text
Button Click
... ...
In your case TTarget is View instead of TextView, because you pass it into bindingsSet.Bind(referenceTextView) wich is the implicit call of bindings.Bind<View>(btnNumber). View has no default binding target property. You have to set it explicitly like
bindings.Bind(btnNumber).For("Text")
or use the typed FindViewById<TextView>.

I dont think you need to bind twice, remove these lines:
var referenceTextView = FindViewById(Resource.Id.referenceEditView); // untyped FindViewById
var siteTextView = FindViewById<TextView>(Resource.Id.siteTextView); // typed FindViewById<T>
//var goButton = FindViewById<Button>(Resource.Id.goButton);
var bindingsSet = this.CreateBindingSet<ReferenceView, ReferenceViewModel>();
bindingsSet.Bind(referenceTextView).To(vm => vm.Reference).Mode(MvxBindingMode.TwoWay);
bindingsSet.Bind(siteTextView).To(vm => vm.Site);
//bindingsSet.Bind(goButton).To(vm => vm.GoCommand);
bindingsSet.Apply();
So your on create is just this:
SetContentView(Resource.Layout.Reference);
base.OnCreate(bundle);
And keep the bindings in the axml file.
Make sure you have this at the top of your xaml file:
xmlns:local="http://schemas.android.com/apk/res-auto"
Also if you are doing bindings in the cs file, the MvvmCross binding mode is TwoWay by default. So you dont need .Mode(MvxBindingMode.TwoWay);