4

I have been trying to implement material visual for my app in Xamarin Forms. Right now i am focusing on outlined textfield with trailing icon. I have looked into customrenderer, but could not find any answer in Xamarin documentation, forums or any nuget package. Any help in this regard will be highly appreciated.

Desired Result

Desired Result

As seen on material website: https://material.io/components/text-fields

Edric
  • 24,639
  • 13
  • 81
  • 91
Omer Qayyum
  • 51
  • 5
  • I have created them on my own entirely on XF, without custom renderers, you could try to do it yourself or ask me and I share the code with you – FabriBertani Apr 22 '20 at 19:46
  • thank you. i have added a picture in my answer of what i am trying to do. could you please share your code? – Omer Qayyum Apr 23 '20 at 04:31
  • 1
    You could check the below codes and link and if Iyou accept third-party libraries, you can look at [XF-Material-Library](https://github.com/Baseflow/XF-Material-Library) – Leo Zhu Apr 23 '20 at 06:51
  • I have checked below code and the question that you mentioned. i also want the implementation in iOS. Your answer and the link does not mention iOS. and XF-material is currently handling leading icon, not trailing. – Omer Qayyum Apr 23 '20 at 07:06
  • Th problem is also whole thing can not trigger any onClick. do you solve your issue? – Mahdi Nov 02 '20 at 06:27
  • @Mahdi sorry unfortunately no. I had to forgo this design and go with what the current design offered by Xamarin visual material. – Omer Qayyum Nov 03 '20 at 08:08

2 Answers2

1

You could use CustomRenderer to achieve it,you could refer to the similar case

If you want to add a trailing icon,you just need add android:drawableEnd to the EditText,like :

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Label"
        android:drawableEnd="@drawable/tab_about"//add a trailing icon
        android:outlineSpotShadowColor="@color/cardview_shadow_start_color"/>
</android.support.design.widget.TextInputLayout>
Leo Zhu
  • 15,726
  • 1
  • 7
  • 23
1

You can use MaterialDesignControlsPlugin it has TrailingIcon with Outlined properties

sample

Morse
  • 8,258
  • 7
  • 39
  • 64