Custom Xamarin Android renderer

Question

I'm doing a custom renderer in Xamarin. I haven't understood how to get it work. I've followed the following instructions: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/view#Consuming_the_Custom_Control

But it's not explained how to create the android view

CustomRenderer.Droid.CameraPreview

If I create an Android view, it only a cs file and not a .xaml which I also think is strange.

I've created an empty Android view class which I try to set as my Native control from my android renderer:

SetNativeControl(view);

But it will generate a TargetInvocationException.

How is this supposed to work?

-------EDIT-------

When I run the following, nothing happends, I expected the button to be drawn in the view.

public class CameraRenderer : ViewRenderer<Controls.CustomControl, MainApplication.Droid.CameraPreview>
{
    private CameraPreview view;

    private Context thisContext;

    LayoutInflater inflater2;

    protected override void OnElementChanged(ElementChangedEventArgs<Controls.CustomControl> e)
    {
        base.OnElementChanged(e);

        view = new CameraPreview(thisContext);

        inflater2 = (LayoutInflater)thisContext.GetSystemService(Context.LayoutInflaterService);
        inflater2.Inflate(Resource.Layout.layout1, view);

        SetNativeControl(view);
    }

    public CameraRenderer(Context context) : base(context)
    {
        thisContext = context;
    }
}


public class CameraPreview : ViewGroup
{
    public CameraPreview(Context context) : base(context)
    {
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
    }
}


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <Button
        android:text="Button test"
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

It is right that it's a .cs file. You then use your custom control like it's explained in your link: `local:CameraPreview`. Try to follow the tutorial in your link 1 by 1 and the explain what you don't understand if it won't work for you. — Dennis Schröer, May 23 '18 at 09:06
@DennisSchröer Thanks, I realised my mistake. However I'm still struggling with how to add controls to my CameraPreview. How should I attach e.g. a button to the view? — random, May 23 '18 at 12:30
Then you need another custom control. For example a control named `CameraWithButton` which inherits from `RelativeLayout`. You code it just like you just coded your custom `CameraPreview`. In it's constructor, add your custom `CameraPreview` and a `Button` to `Children`. This link can help to understand how positioning in a `RelativeLayout` works: https://forums.xamarin.com/discussion/22902/how-to-add-a-label-to-a-relative-layout-and-center-it-horizontally — Dennis Schröer, May 23 '18 at 12:44
@DennisSchröer What should I use my CameraPreview to if it can't contain anything at all? It feels like a meaningless step. — random, May 24 '18 at 08:17
@DennisSchröer What I actually want to do is to add one SciChart graph in my custom renderer. — random, May 24 '18 at 08:18
Create the `CameraPreview` on Android, and consume it in the layout, like [here](https://stackoverflow.com/questions/5779215/androidhow-to-add-a-button-in-surface-view), and use `LayoutInflater` to get the view, then call `SetNativeControl(view)`. — Robbit, May 24 '18 at 08:22

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

But it's not explained how to create the android view

Here is how to create the android view CameraPreview. Or maybe you just want to know how to use SurfaceView to custom camera.

If I create an Android view, it only a cs file and not a .xaml which I also think is strange.

Yes, android view is only a cs file. Here is about the TargetInvocationException exception.

Here is How to add a button in surface view. From it, you can see it is using .xml file to achieve UI layout. You also can use .axml file to layout your UI, and use LayoutInflater to inflate your layout to a view. You can learn it from here, in the ListView's adapter's getView method.

Edit:

You can layout a button on it directly in your MainPage.xaml, like this:

<RelativeLayout>
    <!-- Place new controls here -->
    <local:CameraPreview Camera="Rear"
                         x:Name="cp"
                         RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
        Property=Height,Factor=.15,Constant=0}"
    RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
    RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}"/>
        <Button Text="AAAAAA"
                
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=cp,Property=Y,Factor=1,Constant=20}"
    RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
        ElementName=cp,Property=X,Factor=1,Constant=20}"
    RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
    RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}"/>
</RelativeLayout>

Thanks for info. Yes, I can see one example on how to design the ui from a layout. But my question is how do I "bind" the layout to my view (CameraPreview) class? — random, May 24 '18 at 09:33
[Here](https://github.com/xamarin/xamarin-forms-samples/blob/3575ae90cba9723f578a82198ef28d1ebff0d267/CustomRenderers/View/Droid/CameraPreview.cs), `CameraPreview` is `ViewGroup`, there is a method [addView](https://developer.android.com/reference/android/view/ViewGroup.html#addView(android.view.View,%20android.view.ViewGroup.LayoutParams)). Use `LayoutInflater` to inflate the layout to get the view. I hope it is clear. Or you can change the `ViewGroup` to `RelativeLayout`. — Robbit, May 24 '18 at 09:37
Ok, I've tried to do what you said, but it's still not working, see my code in the edited question above. Thanks! — random, May 24 '18 at 11:56
Hi, I have provided another solution in my answer, please check it. — Robbit, May 25 '18 at 02:50

Custom Xamarin Android renderer

1 Answers1

Edit: