Building mobile apps: Tackling your first design project as a beginner
A s a beginner in building or designing mobile applications, the first question that comes to one’s mind is “how do I start?” “ which view/design comes first?”. Having to identify the layout that will work best for a design can be quite overwhelming too. Keep reading as I will walk you through how to demystify the ambiguous!
1. Self-Conviction
One important tool you need on this journey is believing in yourself! Being confident about the journey you’re about to start and believing you can and that you will overcome whatever obstacles that come your way while learning is critical to becoming better. Do not panic, face it!
2. Take a Critical Look at the design at hand
To get started, highlight the views contained therein the the reference design given. For instance:
Looking at the design above, it’s safe to conclude that one has to go the ‘Relative Layout’ way to achieve the design. Do you know you can also have this designed perfectly in Linear and constraint Layouts? Surprising right?
In the above image, we have an image view, two text views placed side-by-side, a second stand-alone text view and a group of 3 twin text views positioned vertically atop each other.
3. Highlight and name views contained in the template
1- An image view; 2- Two text views; 3- A stand-alone text view; 4- a group of 3 twin text views positioned vertically atop each other
4. Determine the position of text views
2- positioned horizontally; 3- positioned horizontally; 4,5,6; positioned vertically; 7- 4,5 and 6 positioned horizontally in a parent
5. Determine the layout to use
Here, your best bet might be Relative layout (provided you aren’t asked to present it in more than one layout). The question on your mind right now might be: Why relative layout? Relative layout because views are positioned in respect to the parent and other child views. But, if you feel more confident about a different view, shoot! go for it. One good thing about the above task is that you get to choose which view you want.
6. Start Coding
Once you’re clear about the view you want to use, start coding. This can be done in two different ways: one, go to the design page and implement the drag and drop strategy; two, write the XML. For simplicity, I will recommend you use the drag and drop strategy on the design page.
Toggle to the text page, add your preferred image to the drawable folder (preferably, ensure you have the image on your desktop); follow the below:
You can simply Cntrl C the image and Cntrl V in the drawable folder.
Then right click on the image view, click on add to view:
click on drawable, project, preferred image, then “OK”:
It takes you to the slate design page with your image added.
7. Start Adding Text Views
Using the drag and drop technique, on the design page, firstly, for id:2 above, add a text view to align the parent left and another to align the right of the first text view added. Add another that will align the base of the first text view added. Then, start adding twin text views on-top each other in 3 places.
8. Define views’ properties
Lastly, navigate to the text page and start defining various properties including margin, padding and the likes!
There and then, you have your template replicated, winks :( . Do pat yourself in the back for this!
Yayy!! Congratulations on Completing your first task!
Still confused, feel free to reach out:
