How to make a modern switch [UI] [DESIGN NEW] [ANDROID]

HI all Thunker’s

I am with my another guide :tada:

In this guide, u will know that how u can make switches that look like iOS for Android and web apps.

I got the inspiration of making this when I saw some switches in the settings section of iOS

I have not been too much successful in making it; like u need to drag the slider

Let us observe now:

OUR TARGET IS TO ACHIEVE THE iOS SWITCHES :smiley: :tada:

Project link [:http://bit.ly/IOSSWITCH ]

our output :

So let’s start NOW ::

What we need to do is VIDEO tutorial :

:sob: sorry i cant show it now i will make one after 4-5-6 videos … thanks for your patience

What we need to do is text tutorial :

1.DRAG a col1

Do some specifications for the col1 :

image

YOU can use your own settings by looking in the companion app.

If your project has a color palette then select it else choose a new color.

Since I have no color target I chose my own color.

image

Let this be the same:

image

And radius also is your own choice but 20 is better

image

WE ARE AT END OF SETTINGS FOR COL1 BUT IF U THINK U WANT YOUR OWN SETTINGS U CAN DO

I MENTIONED THAT WHERE U CAN CHANGE THE SETTINGS FOR FOLLOWING THINGS

2.SLIDER settings

AFTER dragging a slider

We come to slider specifications…

This is must and shall not be changed
:arrow_down:

image

For size also the same

image

But still, u can try by changing it and then testing on the companion app…

This shall be the same ( i.e the background color for col1 shall be the same for the slider )

image

Thumb tint has to be white

our result ::

you all can see the change we see…
the android and web part is at the top and the 2 switches are at the bottom…
just the place where I fail is …
the slider isn't clickable :frowning:

So, we are done with iOS sort of of switch :partying_face: :partying_face: :partying_face:

BE SURE to :heart_decoration:

donate me : http://bit.ly/donateApploro

hope u like it

  • yes
  • great
  • nice
  • bestttttt

0 voters

1 Like