Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

The Making of an Android App: PrivilegeCard (Upcoming Course)

By Gary simon - Jul 30, 2017

I'm a guy who likes to kill birds with stones and stuff, which is why, for an upcoming app development course, the app being taught is also one that's available on the Google Play store for others to use.

What is it? PrivilegeCard - Get the Most out of Your Privilege Today!

Here's a ridiculous trailer I put together for this app:


"Finally, you can have a physical, yet digital representation of all your privileges. This sleek app prompts users with 10 different questions that ascertain their privilege levels. At the end, it provides you with a digital privilege card.


You can try to use it at certain establishments to get free stuff, but it may not work. It might be best to show it off and wow your friends. Who has the highest privilege? Who's the most disadvantaged? The kids will love it!"

Of course, this isn't a serious app. I made it as a poke of fun at this increasing draw of attention to Privilege and using it as an excuse for why some people are successful and others are not.

Combine that with the frequent retort, "I'm still waiting on  my privilege card", I saw an opportunity to both address a consumer demand and rustle some jimmies!

How I Made It

Note: This app is based on an upcoming Coursetro course that will show you how to build this app as-is, from start to finish. It will be released some time this August '17.

Stylistically, this app does not use any sort of CSS framework, as Ionic provides default integrations for Google's Material Design and styles for IOS.

Another note: Check out our extensive Bootstrap 4 Tutorial in course-format.

This app was developed using Ionic 3 along with Angular 4.3. It's a question/answer based app, so I had to figure out a quick and easy way to answer 10 different questions.

Instead of placing them all on the same page, I used Ionic slides where each question has a dedicated slide. As a user swipes or clicks a next button, Angular animations provide for a fun user experience as each question fades in and moves down into the view.

Being that all answers are on the same component, saving the user's answers is simply a matter of defining an object and using Angular's two-way data binding ngModel.

// Component object with default data

  privilege = {
    'gender': 'male',
    'ethnicity': 'white',
    'orientation': 'heterosexual',
    'income': 30000,
    'political': 'republican',
    'religion': 'christian',
    'body': 'skinny',
    'health': 7,
    'childhood': 'favorable',
    'intelligence': 'smart'
  };
<!-- View HTML with 2-way Data Binding -->

<ion-list radio-group [(ngModel)]="privilege.body" no-lines>
    <!-- Items here -->
</ion-list>

Once the user reaches the last slide and the last question, a "Finish" button calls upon a method that runs through a series of switch's to determine a percentage-based rating. To give the appearance that this is some sort of intensive process, I used a toast with a lot of custom CSS styling with an animated spinner.

Before presenting users with the results (Privilege Card), I allow them to take a selfie using the Ionic Cordova Camera plugin. If they choose to take a selfie, their Privilege Card will feature their selfie in both an avatar and as a watermarked background.

Pressing skip will simply default to either a male or female character.

Next up is the actual Privilege Card, which features several different animations on a semi-circle progress bar and staggered animation on the privilege list.

At this point, a user can share their card by clicking a share button. This will use the Ionic Screenshot plugin to snap a screenshot of the privilege card screen, and allow them to choose from any of the shareable applications on their phone; this uses the Ionic social media sharing plugin.

And that's it! There's a lot covered in this app, despite it being relatively simple. Be sure to check back throughout August for this new course. In the mean time, head on over to the Google Play Store to download the app and use what you will learn how to build!


Share this post




Say something about this awesome post!