Simple App Design: New Activities, Popup 3/3

      No Comments on Simple App Design: New Activities, Popup 3/3

Needs To Be Done

We have Main Activity that looks good and is ready to be implemented in Android Studio but before doing it I want to create few smart frames. We need 5 more:

  • "FAB expanded" to show categories
  • "InsertSuccess" popup to insert success
  • "Show Success" to show success with description
  • "Edit Success" is similar to show but with editable fields
  • "Edit Description" to type description in bigger box

Let's start with "FAB expanded"!

Smart Show Success
Smart Show Success

Using app

  • Click on FAB and select one of the expanded categories
  • Insert Success pops up so you can type title, date, and description
  • You can set date using calendar icon and open bigger editor for description by clicking on edit icon
  • Select circles to set importance and click ADD to insert success
  • On success click, you will be able to see Show Success frame
  • Show Success shows description and has edit FAB

FAB Expanded

Smart Icons

  1. Create a new rectangle over full frame and set the color to "#4F4F4F", 50% opacity. Put it at the top in files. It's our shadow background that we use to set focus on FABs
  2. Create 5 40x40 circles and place them vertically above main FAB leaving 16px space between them. Don't add more than 5 small FABs to stay material designed
  3. Fill them using categories colors
  4. Add icons (above them in files) and set icons color to white
  5. Group circles with icons (1 icon and 1 circle) and add drop shadow to this group
  6. Holding ctrl, rotate your bottom FAB group 45° left or right to make + look like x. That's smart!
Smart FAB Expanded
Smart FAB Expanded

Smart Titles

  1. Add category titles (14px) and rectangles (#333333, 24px height) behind them to the left of buttons (8px space). Wrap their width to text length
  2. Group text and rectangle
  3. Group 8 with 5 and call it by the name of the category. For example "Sport". It will look cleaner
  4. You can group categories from 9 and call it "FABs"
Smart FAB Titles
Smart FAB Titles

Insert Success

Popup window

  1. Create a new rectangle that fits full frame and set the color to "#4F4F4F", set opacity to 50% and put in under the status bar in files. It's our shadow background
  2. Create pop-up rectangle. Keep size close to one on picture
  3. You can add drop shadow effect to pop-up rectangle using y=4

Now it's easier to focus on popup. Shadow settings and many others will not be the same in Android Studio. We want to make it look similar but don't waste too much time for simple design.

Smart Insert Success
Add Success Popup

Title, Date, Description

  1. Add selected category icon. For example money (26 x 46px)
  2. Add name EditText using text and 1px height line tool
  3. Group them and set name
  4. Create second similar but leave some space for button
  5. Add clickable icons (date, importance and "ADD" button here)
  6. Make add button using rectangle with accent color and white text
  7. You can add drop shadow effects for buttons (circles are buttons too) using y=2

Show Success

  1. Duplicate your Main Activity frame and set name to "Show Success"
  2. Delete all items except Item1
  3. Change "done" FAB to "edit" using "create" icon (24px) and circle (56px)
  4. Create white rectangle under Item1, set margins to 8px and drop shadow using y=4
  5. Add dummy description in this rectangle and keep 8px margins. Text color should have primary text color
  6. Create 70px height rectangle. Put some 64x64px photos inside. Photos might be stupid!
Smart Show Success
Smart Show Success

Edit Success

  1. Duplicate Show Success frame and set name to "Edit Success"
  2. Change FAB "create" icon to "done" icon (24px width)

In this activity, a user will be able to change values on click so that's all.

It's almost the same because differences are tiny and it's pointless to design it here as it will be so much easier in Android Studio. 

Smart Edit Success
Edit Item

Edit Description

  1. Duplicate Edit Success frame and set name to "Edit Description"
  2. Delete Item1, Photos and expand big  description rectangle
  3. Place dummy description at the top leaving 8px margins

This is not how it should look like but for now, it's good enough!

 

Smart Edit Description
Add Description

LET'S CODE!

It's the end of Simple App Design. 🙁 Our frames are not perfect because perfection is not easy to achieve. I would like to show you how to create this kind of app and I want to keep it simple so it's not the time for fancy things. For now!

Anyway, there is so much to add. It's a simple and smart design just to know what we want to achieve. You don't have to spend too much time on exact numbers because it will look a little bit different in the app.

Have you customized it or do you think something could be done better? Leave a reply, send pics, nudes, and get out of this Starbucks because it's not the best place for the programmer. Or am I wrong? Well... this is the coding part: "Comming soon". I'm outta here!

Leave a Reply

Your email address will not be published. Required fields are marked *