How do you go about developing an Android App – The easy way

How do you go about developing an Android App – The easy way

More often than not, you come across this question from lots of beginners. But the answer will always be along the lines of, “You cant create an Android App in a day”, like i have talked about here, there are definitely some places you can tweak to get to finish your app easily. There is no substitute for hard work and planning, but follow these steps below to make the app development process easy.
Before you get into this post, take a look at this post here, where i have listed some very useful tools to make it easy to get going. I will be talking about these tools a bit more, to finish creating the app in less than 3 hours.
So, I will call this, “Lets Design an App in 3 Hours project”.

Step 1 : Create the wireframe

If you have checked my previous post here, you will know that i favour wireframe.cc which is a simple web based wireframe application.
Get over to that right now, and lets quickly create a wireframe document.
You don’t have to be an artist, the good thing about the wireframes is, it lets you create the simplest of simplest wireframe design.
Now get over there, right now, and lets create the wireframe image like below.
I am looking at creating a Login – Registration Activity, which i can use in lots of Applications
Great now, since you have created your first rectangle, which will be your app space. I went a bit more to add the things that i think are necessary for the Login Screen of our App.
Awesome if you can create a simple wireframe like this, take some extra time to make sure you have the right elements which you think are needed for your activity like this. Once you are done with this, jump to the next Step.

Step 2 : Let’s model the app design based on our wireframe

I am guessing lot of you guys may not have the SketchApp since it is only for MAC, so i am going the long way round and am going to start designing the layout using Android Studio. Let’s start with a blank Activity, follow me here and i will drop some quick ways to get a head start in creating these layouts easily.
  1.  Before you start, i hope you have a basic knowledge of how the Layouts work, if you dont, take a look at my blog post here, so that you can refer to some important materials before you jump in here. I will try to keep things as simple as possible assuming you are a beginner, if you are an intermediate, be sure to catch some important links that i share here and there as this can speed up your process of creating a layout in matter of minutes
  2. We will set a time of 30 – 40 minutes to create this layout clearly and stick to our wireframe as much as possible.
  3. In the blog post where i list out the tools needed, the second point i would have listed will be about the Color Pallete. Did you read that part out clearly, dont forget, it is make or break decision as it can affect your theme. Check out the Coolors.co website and choose a color palette.
  4. My choice for this App is a palette with shades of Blue, as you must know, Blue signifies productivity and innovation.
  5. Jumping on to the App, i will also choose my set of fonts that i will be needing in the later stages to apply for the Texts present in this Application and note that consistency with your fonts are also very very important.
Once you have the basic pre-requisites ready, lets jump on to the task at hand. Set the timer, we are getting ready to design our application.
Alright, if you have read so far here, i am dropping in a shortcut for you lovely guys, dont bother creating every Layout from scratch, there are some pre built codes called Boiler Plate code for lazy people like us. I will share some pretty decent boiler plate codes for Android Layout designing, git pull or clone them and import it into your app so that your set of basic Layouts are there for you to get going immediately.
The problem with the Basic layout activity that is present prebuilt in Android is that, more often than not you will clear it and edit it from scratch, since they are very basic Linear Layouts arranged one below the other. However, we are need of some FrameLayouts and Relative Layouts to be properly set so that we can go about freely moving our elements to match the Wireframe we have.
Here are the list of Boiler Plate codes that i often refer to –

Whats Next?

Once you have all of them ready, lets start editing them so that we match our wireframe. Remember, wireframes are a very basic sketch and not the final design plan. You can make many changes as much as you want to the wireframe design but remember to stick to the plan as close as possible.
  • If you see the first part of the wireframe, we have drawn a circle, this is often the Logo of the company or the App that we want to place. I have made this Logo circular in shape so that it gives the Geometric feel to our opening Activity. Lets see if we can match the same in our App.
Also Read  CoordinatorLayout in Android - What is it?

I have created a simple custom logo for this Project (Well actually i dint!! I took out a logo from the google images and edited the composition so that people wont know where that logo came from!).However, I would suggest some royalty free websites to get stunning images. There are 2 that i quite frequently use, they are Pixabay.com and pexels.com. Both of them have got good collection of stunning royalty free pictures. If you are a Indie developer who cant afford to buy pictures, this is a very good option. However, there are companies that pay for the Pictures, inorder to avoid any license issues from the photographer. You dont have to worry about that if you pick your photograph from the sites that i have mentioned above.

Now, the Boiler plate codes that i have mentioned above, there are various uses to it. There are examples of sample MapActivity and boiler plate for Menu Activity, but for now we are going to use a simple FrameLayout and RelativeLayout Combination to create a full page Activity. The use of FrameLayout here is to tell the system that we are going to cover the entire View with a Frame and we do not need the Custom Title Bar that is associated with the blank Activity that is often auto-generated.

Also Read  Buttons in Android - OverView and Implementation
YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

Once the Boiler plate is set. The Layout should look like this for staters.

<?xml version=”1.0″ encoding=”utf-8″?>
<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:tools=”http://schemas.android.com/tools” android:layout_width=”match_parent” android:layout_height=”match_parent” >
<RelativeLayout android:layout_width=”match_parent”
android:layout_height=”wrap_content” >
<LinearLayout android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_marginLeft=”30dp”
android:layout_marginTop=”37dp”
android:orientation=”horizontal”>



You are doing great so far, if you can understand that there is a FrameLayout and a RelativeLayout wrapped inside it, and there are going to be LineraLayout that are going to stack up Vertically inorder to arrange the elements we are going to need from now on. Then, Wohoo!! you are on your way to creating your first super cool Login Activity.
  • Its time to add our Logo here. Go ahead and Do that, do not be afraid to experiment with positions, shapes and even colors (Adding highlights like glow, shadow etch) can enhance the design by many folds.
I have added my sample Logo here and also added a simple background color that aligns to the theme of my App like below.

<?xml version=”1.0″ encoding=”utf-8″?>

<FrameLayout xmlns:android=”http://schemas.android.com/apk/res/android” xmlns:tools=”http://schemas.android.com/tools”
 android:layout_width=”match_parent”
android:layout_height=”match_parent” >
 <RelativeLayout android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:background=”@drawable/transparentimage”>
 <LinearLayout android:layout_width=”match_parent”
android:layout_height=”wrap_content”
 android:layout_marginLeft=”30dp”
android:layout_marginTop=”37dp”
 android:orientation=”horizontal”>
<ImageView android:id=”@+id/signinback”
 android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
 android:layout_gravity=”center” android:padding=”10dp” />
 </LinearLayout>
 <ImageView android:layout_width=”90dp”
android:layout_height=”90dp”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”140dp”
android:background=”@drawable/qslogo” />
 </RelativeLayout>

</FrameLayout>

And this is how the Layout looks so far.

 

There is something missing here, yes the title. Now, there are multiple ways to add a Simple TextView to the Activity, but we will need to stick to our Font that we decided earlier. Thats when discipline and aesthetic senses start kicking in, if we think one font doest suit a position, we shouldnt be completely changing the font, rather have 3 fonts to the maximum for one application and Make sure to apply them consistently to Headings, Sub Headings and content. This way, the customer or the user gets used to the format and doesnt find it Awkward when they read.

However, be careful with the font sizes and type of fonts that you use. There are Google recommended fonts that you can find here. These are widely used fonts and do not take lot of time to render on the device, as it is also a key part of designing the application.

Once, you are done with choosing the font. Add that there, and make sure to place it accordingly. Like i have below. I am going to go ahead some more and add my Username and Password columns as well, so that we can have a bit more traction to talk in the next section. Go ahead, and dont worry to experiment with the positions!!

Having a Custom TextView

My favourite part about designing is the palette and Fonts that you consciously have to stick to. However, this doesn’t mean that you cant use custom fonts imported into your project. There are ways by which you can set up these custom fonts, lightweight (This is important as it can affect the size of the application) so that it gives the extra sense of aesthetics to your app. I always prefer to go with fonts like Lato, Roboto, Open Sans. These are some Professional Fonts that are easily readable and contains the right amount of style to it as well. I would suggest you to go check out the google fonts section or even check 1001fonts.com for any more cool fonts that you can use for your project.
Once you are done, importing the font, lets create a custom class to set our fonts from here on using that. Check this article from gadgetsaint which explains the method we are going to be using. We are looking at Method 2 from that, and implementing the same for our EditText and TextView, we have already created a class for the same using our very own Lato font like below.
public class MyEditText extends EditText {

public MyEditText(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

public MyEditText(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public MyEditText(Context context) {
super(context);
init();
}

private void init() {
if (!isInEditMode()) {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(), “fonts/Lato-Regular.ttf”);
setTypeface(tf);
}
}

}

This is how the custom fonts are going to be set. I am not going to give you any code snippets which you can copy and paste like i have been saying from my first article. You have to go the extra mile to check about the various usages that is present here. Check them all out and create your own custom EditText and TextView for our application.

Once done, this is how my application is looking.
Wohooo!! I have created my first layout of a Login Screen. I will post the layout below, but make sure, you play around enough to create something different.
<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    >

<RelativeLayout android:layout_width=“match_parent” android:layout_height=“wrap_content” android:background=“@drawable/transparentimage”>

<LinearLayout android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_marginLeft=“30dp” android:layout_marginTop=“37dp” android:orientation=“horizontal”>

<ImageView
android:id=“@+id/signinback” android:layout_width=“wrap_content” android:layout_height=“wrap_content”
android:layout_gravity=“center” android:padding=“10dp”
/>

<customfonts.MyTextView android:layout_width=“wrap_content” android:layout_height=“wrap_content” android:layout_gravity=“center” android:layout_marginLeft=“16dp” android:gravity=“center” android:text=“LOGIN IN” android:textColor=“#ADCCE2” android:textSize=“22dp” />

</LinearLayout>

<ImageView android:layout_width=“90dp” android:layout_height=“90dp” android:layout_centerHorizontal=“true” android:layout_marginTop=“140dp” android:background=“@drawable/qslogo” />

<LinearLayout android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_alignParentBottom=“true” android:orientation=“vertical”>

<customfonts.MyEditText android:id=“@+id/username” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_marginLeft=“22dp” android:layout_marginRight=“35dp” android:layout_marginTop=“20dp” android:background=“#0000” android:drawableRight=“@drawable/user” android:hint=“Username” android:inputType=“text” android:padding=“16dp” android:textColor=“#ADCCE2” android:textColorHint=“#ADCCE2” android:textSize=“16dp” />

<View android:layout_width=“match_parent” android:layout_height=“1dp” android:layout_marginLeft=“40dp” android:layout_marginRight=“40dp” android:background=“#ADCCE2” />

<customfonts.MyEditText android:id=“@+id/password” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_marginLeft=“22dp” android:layout_marginRight=“35dp” android:background=“#0000” android:drawableRight=“@drawable/pasword” android:hint=“Password” android:inputType=“textPassword” android:maxLength=“12” android:padding=“16dp” android:textColor=“#ADCCE2” android:textColorHint=“#ADCCE2” android:textSize=“16dp” />

<View android:layout_width=“match_parent” android:layout_height=“1dp” android:layout_marginBottom=“10dp” android:layout_marginLeft=“40dp” android:layout_marginRight=“40dp” android:background=“#ADCCE2” />

<customfonts.MyTextView android:id=“@+id/signin” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_alignParentBottom=“true” android:layout_marginBottom=“28dp” android:layout_marginLeft=“40dp” android:layout_marginRight=“40dp” android:layout_marginTop=“32dp” android:background=“@drawable/rect” android:gravity=“center” android:padding=“16dp” android:text=“Let’s Go!” android:textColor=“#fff” android:textSize=“16dp”

/>

</LinearLayout>

</RelativeLayout>
</FrameLayout>

Great work so far. You have created your own custom Login page and you can be very proud of yourself so far.

This doesnt stop here. We are yet to add functionalities to the app. We are required to look into Topics like Firebase, Google Authentication, Shared Preferences, Intents and some custom Animations to make our app a bit more cooler than the normal ones out there.
I cannot create the entire tutorial here. You can check my coming posts, for the second half of the tutorial. You must not have spent, more than 1 hour so far if you are following me.
Bookmark the links, so that you spend less time searching for images and finding color palletes and fonts.
Follow me closer in the coming articles, to successfully create your first login application that you can reuse in lots of Apps.

5 thoughts on “How do you go about developing an Android App – The easy way”

  1. Pingback: Firebase Realtime Database - Setting up - Android Monks

  2. Pingback: Firebase Authentication with Android - Setup - Android Monks

  3. Pingback: How do you go about developing an Android App - The easy way (Part 2) - Android Monks

  4. Pingback: TextView in Android - Usage and Implementation - Android Monks

  5. Pingback: Buttons in Android - OverView and Implementation - Android Monks

Leave a Comment

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