BuzzUp built with Ionic -- Material design

BuzzUp is buzzer round trivia app with more that thousands of questions and a wide variety of topics to choose from.

Available for download on the Google play store : https://play.google.com/store/apps/details?id=com.Infinite_Prime.BuzzUp

8 Likes

congratulation! :wink: BuzzUp

@meghdad. Thanks check out the updated app with material design.

1 Like

Hello I am very new to Ionic. I was checking out the framework and ui components. Now came to check out the forums and was star struck by your post @siddhartha.

First of all, I have a question for you. How come the ui components look completely different from that of your app? Is it very easily customizable? I was awe struck by your screenshots, so I immediately went in and downloaded the app.

I was delighted with the performance. Seriously. I installed your app on Google Nexus 5 and it worked like a charm. None of my colleagues were ready to beleive that it was a web view app. And the UI is really good. The animations are really clean and crisp. The tiny details like the material float icon scaling in and your custom loader is all really nice.

Are the UI components all stock Ionic or have you written anything custom?

I believe you should also add support for IOS platform, I bet it works super crisp on the iphone 5 and 6.

Only performance jerks I noticed was when the confirmation modal that comes out for the first time is a bit jerky but from the second time on wards its really smooth and sharp. May be the image inside modal is not cached?

Overall its too good.

2 Likes

I remember being first one to download your app and I really liked it. (Actually i’m only the one 0_o)
And now with the material design, it looks even better :smile:

@siddhartha This is a shining example of what can be done with Ionic. Beautiful work! I’d love to feature this in our blog. Perhaps you can get in touch? Email hi@ionicframework.com if you’re interested.

Wow @siddhartha it’s great! Good job! We’re actively working on a branch that’ll make it easier for platform specific interactions to take place. What would you say was the biggest challenge to get it to be so “android” like?

@adam Sure!

PS: @ionitron initially suggested to “Androidify” the app. The update is a direct result of that tweet. Am I not a follower? :smile:

Before saying what was challenging I would love to say that building new UI components and rewriting the theme is really simple. The docs in the Ionic.js file is really awesome. So extending or modifying it is really easy. And Ionic is built on the most accessible web stack. That is a really awesome choice.

First of all I would want to say that .on-active-state of any UI components does not work at all on Android device (it works on IOS). Hence I had to remove the ripple effect (which is the core of material design).

Secondly, the transitions. Slides are great on IOS but fade-in scale and few more alike would be awesome for Android.

And also maybe just target the future Android design guidelines? I mean just ditch Android 4.3 and below and work on the new material design styling, components and animations so that it works just like native on Android 4.4 and above.

As for any challenges I faced during design and dev… Hmmm I don’t think anything was frustrating enough to make my head explode (docs are to be applauded here). I will update this part later.

And finally if it is not a problem, I would like to ask you guys on behalf of the community that could you provide UI sound kit and material design icons?

@computernerd Welcome to the community. It is amazing here. Well I am pleasantly surprised by your post. Thank you for your kind words.

Yes, you can both customize and build upon the UI components really easily. Glad you liked the tiny details.

I have written two UI components( Not two, 1 and a half actually), the options Promoted Action button which is an extension of the Ionic Action sheet and a few smaller things inside the app.

Yes, coming soon on the IOS store.

Yes! Even I have noticed that jank. Will work on that. Probably cache all the images explicitly during the app boot up process (Behind the splash screen) may be?

Thank you for your kind words. Don’t forget to star Drifty and Ionic on Github. Have a nice day.

@siddhartha I would really love to see a blog post on how you implemented the material design for this project, how able to modify ionic to accomplish this.

Where the transition animation part of ionic or you added yours?

1 Like

+1 A blog post would be perfect and helpful.

Nice app, good jobs guys

@computernerd The problem about confirmation model being jerky is fixed. Try the new updated version. Will be in play store in about 5 hours from now.

@dayaki007 and @Ferdi Thank you guys. Yeah I will write a blog post about this.
So @dayaki007 All the transitions you see are CSS3 based. Ask @mhartington he is awesome at explaining about CSS transitions and animations.

@Bonda Thank you for that. Download and drop in a review on play store if possible. :smile:

Of course, you deserve it.
I hope my app will be some day a little bit more like yours in terms of design.

Very nice!

Any plans for an iOS version ? :smile:

@siddhartha Did check it out. Its cool now. So we are building an app (actually just prototyping) but it does not appear as slick as yours. Any pointers we might be missing? A blog post would be awesome on this.

Download it and … its wow :smiley:

Your app very smooth running in android 4.4 :smile:
But i notice about animation icon bouncing …

Btw please write some blog post about how to build / customize UI like you did :smile:

Thanks

Bouncing??
What is bouncing? Can you be a bit more specific please.