This is a project I am developing as part of my thesis to graduate from my bachelor's degree in May. It is an application capable of performing photovoltaic sizing with and without batteries. In addition, it brings with it different functionalities, calculators, teaching topics, news and more! It will soon be available on the PlayStore. 💪
- General Infomation
- Technologies Used
- Features
- Architecture
- Screenshots
- Material Theming
- Performance
- Setup
- Project Status
- Room for Improvement
- Acknowledgements
- Contact
This Android application is developed with the Kotlin language within the Android Studio development environment. Currently, it is in the process of being completed but I'm well on my way. It has the possibility for users to create an account in the cloud by the Firebase Backend service. In addition, it has five different sections that will be of importance and very useful for all those who are interested in photovoltaic energy and the environment.
The first section consists of news and articles about solar energy, sustainability, and the environment. Then, the projects section where the user will be able to size a photovoltaic system with or without batteries. Within the project details, an energy and economic analysis is displayed to let the user know how feasible it is to implement it. The calculator section is self-explanatory. Then, the tools section will consist of offering multiple useful gadgets for the photovoltaic systems technician. It is being considered whether to implement it or leave it for later. Finally, the learning section is where all the necessary information will be concentrated so that a person who does not know about these topics can get into the subject in a matter of minutes.
So, broadly speaking, this would be a very general description of the application.
10.demo.app.mp4
- Android - version beta.
- 👤 Log as a guest. If you have favorite articles or projects, when you create your user they are saved in the cloud.
- ☁ Your favorite articles and your projects are stored in the cloud.
- 💰 Find out how much money you will save with the project.
- 📍 From the location, you can estimate the production of your system with radiation and temperature data.
- 🤩 You can create as many PV projects as you want.
- 🌤 Create sizing with or without batteries.
- 📰 Find out the latest news about solar panels and the environment in the articles section.
- 🗃 You can save your favorite articles in the cloud. It also records the ones you have already seen.
- 📚 Become an energy expert with the various calculators and topics we have for you.
- 🌙 Dark mode available.
- 🌟 and more!
| Login | Articles | Article Detail |
|---|---|---|
 |
 |
 |
 |
 |
 |
MathSolar uses Material Theming to customize the app’s color, typography, shape and motion.
Color is a very important issue. I based it on the colors of the brand, that is to say; the color palette of the logo. For the light theme, I was looking for something bright, that would be able to portray the brightness of the sun. Yellow was the perfect color, especially one that was close to amber. The blue refers to two things: the beautiful sky during the day and the characteristic color of polycrystalline solar panels. In the end I had it pretty clear, so, based on that, I started experimenting with what colors would fit the application well.
On the other hand, for the dark theme, I was looking for something more subdued and peaceful, more appropriate for the night. It was here that I experimented with shades of blue for different purposes. As for yellow, I used it to emphasize some details.
MathSolar’s color palette is defined in color.xml and applied globally via the app’s default and dark themes.
MathSolar uses Ubuntu and Barlow as its typeface. All items in the type scale provide the typographic variety necessary for MathSolar's content. See type.xml which defines TextAppearances which are then set in the theme and referred to using ?attr/textAppearance[...] throughout.
MathSolar defines small, medium, and large shape categories for different sized components.
The container transform pattern is designed for transitions between UI elements that include a container. This pattern creates a visible connection between two UI elements. MaterialContainerTransform is a shared element transition. Unlike traditional Android shared elements, it is not designed around a singular piece of shared content, such as an image, to be moved between two scenes. Instead, the shared element here refers to the bounding container of a start View or ViewGroup (e.g. the entire row layout of an item in a list) transforming its size and shape into that of an end View or ViewGroup (e.g. the root ViewGroup of a full screen Fragment). These start and end container Views are the “shared element” of a container transform. While these containers are being transformed, their contents are swapped to create the transition.
00.motion.transform.container.mp4
01.motion.transform.container.fab.mp4
The shared axis pattern is used for transitions between UI elements that have a spatial or navigational relationship. This pattern uses a shared transformation on the x, y, or z axis to reinforce the relationship between elements.
02.motion.transition.x.mp4
03.motion.transition.z.map.mp4
04.motion.transition.z.sign.in.mp4
The fade through pattern is used for transitions between UI elements that do not have a strong relationship to each other.
05.motion.transition.fade.mp4
Performance is a very important issue to improve the user experience for everyone, that is; those who have in their hands a high-end and low-end mobile. Therefore, lately I have been very interested in improving the performance of my application and be aware of the different indicators that can affect the performance. For now, overdrawing is something I'm keeping an eye on to avoid and, also, from time to time I analyze the CPU memory and how it affects the battery.
Android colors UI elements to identify the level of overlap as follows:
- True color: No overlap
- 🔵 Blue: Overlapped 1 time
- 🟢 Green: Overlapped 2 times
- 🎀 Pink: Overlapped 3 times
- 🔴 Red: Overlapped 4 or more times
| Articles | Article Detail | Average consumption |
|---|---|---|
 |
 |
 |
As we can appreciate in the list of items, the envelope drawn is minimal, being in most of the items a blue color. This is a good practice because the cards as the activity lacks unnecessary backgrounds that may affect the performance.
Subsequently, in the item details, there is a green drawn envelope. The reason is because the content is inside a NestedScroll containing a CardView. The NestedScroll is necessary for the user to be able to visualize all the content of the news item. The CardView is for mere taste, since it gives the appearance as if it were a layer above the background and makes it look better. However, the image is red. The reason is because the image is inside a CardView to round the edges. I tried to use the ShapeableImageView view but every time I went back to the article fragment, I saw its resulting edges in black color. It did not keep the round shape. And, in fact, the CardView doesn't either, but at least they don't look black. I also tried defining a round-edged drawable for the image, but that didn't work either. Anyway, I will continue to investigate how to solve this problem. Maybe with Clipping.
Finally, there is the fragment of the average consumption. Like the details in the article, this whole section is inside a NestedScroll containing a CardView. Fortunately, the TextInputLayouts are pink.
Here are some real examples captured in known applications
| Gmail | Samsung Email | Galaxy Store |
|---|---|---|
 |
 |
 |
- For security reasons you must add your own Firebase configuration file
google-services.jsonwith Auth, Storage, FireStore, Crashlytics and Analytics active and the Google Maps API access key. - It is sufficient to open and run the project from Android Studio.
Project is: in progress
The project is still in progress. I have an estimate to finish it before May because it must be this way for sure. As soon as I finish it, I will upload it to the Play Store.