Using Xamarin.Forms Shapes and MediaElement to Create an Elegant Login Page in Xamarin Forms

[@OludayoAlli]

Don't forget to like and drop a comment.

[@emmanueladebiyi2109]

Definitely one of the best XF tutors I've seen online. Your UIs and lessons are top-notch🔥🔥🔥. Thanks.

[@OludayoAlli]

Thanks!

[@pat_nadis]

Access to the full source code on github will be a plus. You're doing great, I must say.

[@OludayoAlli]

That's the plan! Pushing the code soon. You can check later

[@AhmetYigiter]

​@@OludayoAlli any news about the plan?

[@2005Azm]

Tutorials getting better and better ! Thanks for sharing

[@OludayoAlli]

Glad you like them!

[@akshayjain3197]

Great work. Thanks for the video. Will love to watch more from you.

[@OludayoAlli]

Thanks Akshay, much appreciated!

[@tusharvaja]

nice work using shapes.

[@OludayoAlli]

Thanks!

[@gamal09]

We are really thanks for you new great things doing. Please stay on and thanks a lot

[@OludayoAlli]

Thank you, I will

[@Gsumedh]

🙏 Thanks for this tutorial. Keep doing good work.

[@OludayoAlli]

You're most welcome

[@udaysuddhala3512]

Great work !! Ui is looking beautiful !! Keep going 😀👌

[@OludayoAlli]

Yeah thanks

[@jennychen2105]

Very creative concept, thanks for sharing!! Looking forward to the social login integration in your upcoming videos.

[@OludayoAlli]

Thank you!

[@kevinsinza3126]

so nice video. !!!

[@IntelInside2020]

5 stars -you should have a million subscribers!

[@Kingdee205]

What did you do at the Samarinda.cs part of the video?

[@Kingdee205]

What did you do at the xaml.cs portion of the main page?

[@MrProgrammerboy]

Nice tutorial. However my feedback is following: - In Landscape mode Triangles (Paths) look out of place. - For the nice looking buttons you have, how can we use Tap Command or Gesture or what is the alternate? - Add a little more functionality to handle orientation change especially using MVVM.

[@OludayoAlli]

Thank you. - Sometimes you may need to lock orientation or adjust the view. - Handle the tap gesture on the frame for tha button and bind the Command - You can use Xamarin.Essentials to handle orientation change

[@mariembenkraiem4033]

Thanks for this amazing tutorial ! Can you please share with us the background image in the page Adobe XD ?

[@asadullahqamar4874]

Great video! I have a question, if you can help me - I was wondering, now that we have the new shapes with Xamarin 4.7, which is better? To define all our images as shapes or to include the image in the resources folder? Which would render faster / save memory? Like, we can use

[@OludayoAlli]

You can use any approach but I believe using the Path control will result in a smaller APK/AAB file since you are not using image assets. Also the path will scale well since it is a vector shape that will be drawn natively, and also there will be no need for @2x, @3x resolution on iOS and the hdpi variants on android.

[@tarunbajaj1677]

Which software you are using for design

[@OludayoAlli]

Adobe XD

[@tarunbajaj1677]

Thank you so much

[@AhmedAli-iz4ep]

Nice design Please how i can get or draw design How you get Path What software you used??

[@OludayoAlli]

I use Adobe XD. You can also use Figma

[@vatsalmehtaofficial]

nice video man ! Keep it up

[@OludayoAlli]

Thanks, will do!

[@cissemy]

Where did you get Google Path ? Thanks for this beautiful UI.

[@OludayoAlli]

Get any google image svg and open with a notepad.

[@ntokozoshaba]

Hi thank you for the nice design tutorial. How can I add an OnClick on the login svg?

[@OludayoAlli]

Handle the TapGesture

[@xamtube1603]

Nice work..

[@OludayoAlli]

Thank you! Cheers!

[@JasonPurkiss]

That was enlightening, thank you sir :)

[@OludayoAlli]

Glad it was helpful!

[@mandardesai3841]

Thanks a lot 😊

[@OludayoAlli]

Most welcome 😊

[@peculiarpeculiar2504]

Thank you so much for this. How about some tabbed nav?. I've seen some or most of your videos and they don't have tabbed pages tutorials. And another thing is how about a video for onboarding screens?

[@IntelInside2020]

You can use Hierarchal Navigation for onboarding screens. If you follow all of his tutorials along with a little searching on Google you can piece things together.

[@Ramces-Fit1557]

Hi I have a problem with the type MediaElement is not found it, on the MainPage.xml , how can I get fix it?

[@OludayoAlli]

MediaElement has been moved to the Xamarin Community Toolkit. You have to add it through nuget

[@ShubhamKumarnayak]

Is there a way to add gradient colour in shapes to fill the path?

[@OludayoAlli]

Not yet.

[@farmland-life]

Use SkiaSharp to paint your path with a gradient

[@ShubhamKumarnayak]

@@farmland-life gradient is a built in feature in latest xamarin so skia sharp not required anymore :)

[@aswinpg6868]

Is there any way we can add shadows using shapes

[@OludayoAlli]

None that I know of at the moment

[@evangile.eternellement.valable]

Amazing

[@OludayoAlli]

Thank you! Cheers!

[@xamerdev7381]

Perfect thank you😁

[@OludayoAlli]

You're welcome 😊

[@mariakamenskyh2314]

Please help.I add Device.SetFlags(new string[] { "Shapes_Experimental" }); but it can not find any type of shape

[@OludayoAlli]

Make sure you have Xamarin.Forms 4.7 installed

[@fazilb195]

Dude, you're doing a great job. It'd be nice to share code on github. I always make sure to click on the amazon link as a way to return the favor

[@OludayoAlli]

I'm having some issues with the site and it's currently down. I will add the source code link when it's back up. You can check later Thank you.

[@Elsa-jw3xe]

Great job, can you share the code?

[@OludayoAlli]

In the description

[@anilyadav-yv6uk]

When I run everything is ok but background media file won't play

[@OludayoAlli]

Call the play method of the media element in the contructor of your page

[@anilyadav-yv6uk]

@@OludayoAlli But i am using your code project as it is.

[@manul74]

What is this XD editor and where can I download it? thanks

[@OludayoAlli]

It's Adobe XD. Just search google, it's a popular app

[@manul74]

@@OludayoAlli thanks

[@cas818028]

Did a anyone get the vtable init exception when upgrading to xf 4.7 on iOS? I currently can't get past this

[@mysterygift7857]

Hello, I made this UI using your tutorial but I got one issue. When I run this code visual studio display error "The Type MediaElement was not found". Kindly sir solve my issue. Thanks...

[@OludayoAlli]

MediaElement has been moved to the Xamarin Community Toolkit. You will have to install the Xamarin Community Toolkit NuGet package to get it working

[@mysterygift7857]

I also install Xamarin Community Toolkit from NuGet Package but unfortunately there is not working

[@madhuchoudharysingh]

can u teach to create the login page in XD?

[@afsalc9674]

Borderless Entries in Xamarin.Forms. how it possible?

[@Foodies-pv7ih]

i dont like this copy patse snnipets, please write and explain code properly

[@OludayoAlli]

It's not possible to do all the typing or else it will be a long video. The most important thing is the explanation of what is being done