How to create this type design in niotron

Screenshot 2022-04-21 182701

Anyone can tell me how to this type design in niotron .

1 Like

Hello @Iron_man, Welcome to Niotron

Thanks @Avijit :smiley: :smiley: :smiley:
Can You Tell Me How To Create This Type Design In Nitron

@Iron_man use pop up menu component

@iaditya_nanda First look at the image and then say :expressionless: :expressionless: :expressionless:

I don’t think there is any other way

Its possible with image, But its not an good idea.

it is possible but I think it will not look exactly the same
First design this popup window like in the image on an arrangement. Use Cardview and put everything inside it. You have to design it yourself.

Use this extension =

  • Overlap (any overlap extension will work)

Follow this =

  • Use overlap extension and make that popup arrangement overlap on main screen (main screen means above which this popup will be shown)
  • Now whenever you click that button to open the popup window, first make that button’s background colour white.
  • Then use animation component to “FadeInUp” this popup window.

He talking about :point_down:

@Iron_man can you share full screen of the image?

that too is possible
this design is easy to make

  • first is cardview (mainCardView), which is the main arrangement and we will put everything inside it
  • then take 3 horizontal views
  • in each horizontal view take a cardview (iconCardView) and put a label (iconLabel) inside them, use material font and make those icons in those labels (iconLabel)
  • now drag one more label (nameLabel) in each horizontal view and but now put it outside the cardview (iconCardView) and fill the respective names as mentioned in the image.

Use space b/w different components to design it similar to the image

Round Option Make Not Icon or text

Not possible (I think) :slightly_smiling_face: