Search code examples
iosxcodeuitextfieldsketch-3

UI Text Field Design

So, I was trying to mimic a video that uses sketch to design a login screen I really like. I had a question about how I can make a text field in Xcode look like the one that is being designed in the video.

Here is the video link: https://www.youtube.com/watch?v=gA_hFHkhqFM&t=87s

Here is a picture of the text field I want to design:

Text Field Image I want to deisgn

Any help is appreciated!

Solution

  • This is how to do it in the storyboard

    Find/Create a blurry image and set it as an image view's image. Fill the view with the image view and add constraints. Add a new text field on top of the image view. Set these things:

    • border style to none

    enter image description here

    • Text color to white

    enter image description here

    • Background color to a black color with an alpha value and tint color to white as well.

    enter image description here

    This can be set by using the RGB slider in the color picker. Use the slider at the very bottom to adjust the alpha:

    enter image description here