Pocket color picker
Android app
Project type
Personal project.
About
This project is a native android application that enables the user to use the mobile’s camera to pick color from nature around them. The user will get the colors HEX and RGB codes too. The app will also allow the user to store and organize picked color into palettes.
Role
- Development
- UI design
Technologies used
Android studio | Java | SQLite | XML
Links
Requirement analysis
System requirements
- Open camera and pick colors from it.
- Show the HEX and RGB codes of the picked colors.
- Add picked colors to library.
- Add notes to saved colors.
- Create and delete folders in library.
- Add and remove colors from folders.
Use Case Diagram
The use case diagram illustrates all the possible use cases in the app. They are divided into three sections according to their usage.
Activity Diagram
This activity diagram details the main function of the app, which is the color picking process.
Class Diagram
This class diagram shows the relations between all the object classes in the system.
User interface
There was a great focus on designing the UI in this project. To give the app a cohesive and consistent look, I used the circle as the main shape of the UI. So the main elements in the app are all circles, and the rest of the UI design is based on round edged rectangles.
The App screens
The Saved Colors
This is where all the colors are displayed. Each one of those items is a saved color, and clicking on one will open a new screen with the clicked color’s details.
The Color details
The 3 dot icon will open a menu with more actions. For example the edit color option allows the user to change the color’s hue, brightness and contrast. Another example is the edit note option, which allows the user to edit the color’s note.
The palettes
Once palettes are created, they will be displayed in the palette screen. Clicking on the palette will open another screen with the full palette details.
The camera
Clicking anywhere inside this view will pick the color of the pixel clicked. After a color is picked, a preview of the color and the color’s codes are immediately displayed. button on the right saves the color currently picked. Clicking this button prompts a dialog box that allows the user to add a note to the color before saving.
Add palettes
Here the user could assign the palette a name, and choose from a list from the saved colors to add to the palette.
The hue groups
Here all the saved colors are sorted into their respective hue group. This allows the user to look for colors in a specific color range. Clicking on any of the color groups opens a screen that shows all the colors that belong to that group.
Implementaion
Main freatures
The main features that needed to be implemented are:
- View saved colors
- View created palettes
- View colors in sorted hue groups
- Create new palettes
- Pick colors from camera
- Save new colors
- Add and remove colors to/from existing palettes
- Delete / edit colors and palettes
Database
In this project, I have used database helper classes to manage the database. There are two database helper classes, one for the colors and the other for the palettes. Each one of those classes has methods that control the data such as get all items, add item, and delete item.
Third-party libraries
MPAndroidChart
This library was used in two places. the first is to display the palettes in the palettes list. each palette is represented as a pie chart that shows all the colors the palette has. the second place is in the hues activity to display all the colors in a pie chart. I've chosen to use an external library that enabled me to draw pie charts because the pie charts were the best way to display multiple colors, while following the circular style of the UI.
Pikolo
this library is to help implement a color editor option. I've chosen this library because it offers the function of changing a color, and it suits the style of the UI.
The main activity
The three main screens share a bottom navigation menu. To achieve that I made one main activity that included the navigation menu, and in that activity the three main screens are called as fragments.
The colors and palettes lists
To be able to list the colors and palettes and customize the way they are displayed, I used a recycler view. There are two recycler view adapters, one is for colors and one is for palettes. The adapter classes control how the recycler views behave. For example, when an color in the colors list is clicked, a new activity with the color details as called.
Challenges
The palettes preview
The challenge:
When I started planning for the application, I wanted the user to be able to see the colors each palette has before opening that it. so when all the palettes are listed, the user could easily know what colors each palette has. The colors in the colors list are Previewed as a simple circle, so the palette preview also needed to be circular to follow the style of the UI.
The solution:
To be able to dynamically generate a circular shape, that displayed any number of colors, the answer was to use a pie chart. the MPAndroidChart library also has a feature that changes the radius of the pie chart slices. using that feature, I was able to create a beutiful palette preview that followed the UI styling. I also utilized the animation feature of the library in the palette creation activity. so when a user adds or removes a color, the palette preview is immediately rendered with an animation.
The colors hue groups
The challenge:
Since this app is all about exploring colors and finding new color combinations. I wanted the user to have the option to sort the color they have saved. this would also help the user in case the have too many colors saved and they are looking for a specific color.
The solution:
I First, I have made the decision to sort colors into six color hue groups ( the 3 elementary colors and the 3 secondary colors). to be able to sort the colors according to their hue, the RGB code would not be enough, as it only represent the amount of red, green and blue in the color. The HSV on the other hand represents hue, saturation and value. since HSV already has a hue vlaue it is possible to sort the colors. conversion from RGB to HSV is also easily done. So I found the hue ranges of each color group, and sorted each saved color into their respective color hue group. I also used the value from the HSV code to be able to sort the colors from lightest to darkest to achieve a more organized look.
