Design Main Page in Android App - Day Seven

Introduction

Before moving further, please refer to the article series on Android:

• Creating A Toolbar In Android - Day One
• Activity Preference In Android - Day Two
• Activity Preference In Android - Day Three
• Android Studio And Git Configuration - Day Four
• Custom Class And Datasource - Day Five
• Android App ListView Adapter - Day Six

Today I am starting with designing of Main Page of Android app and now we will continue in future articles and create the complete application and then publish into the Playstore but remember that you when you choose the package name, the package name should be unique --  it is mandatory.

• Project name MainPage
• Minimum SDK API 19
• Choose Blank Activity

Step 1: This is the main screen of our Android app which we will design in this articles with some tricky approaches. First I will demonstrate the design and then start the designing. The first image we put into the linear layout and another two images we will make a separate linear layout, and this process will remain for two rows, which  means in total we create a four linear layout.  One is for main and three layouts for row images.



Step 2: Now for the first image, we take Linear Layout and in Linear Layout we set the image button and set some common attributes. We assign the id which will see in future, basically it is used for calling button in java class, and then we set the top margin to give the gap from top, then we set the margin left to handle the image position only from the left side, then we give a white color for background and we paste this image in drawablefolder and then we give the source of our image file.



Step 3: In this setup we make one more linear layout and in this linear layout we make two image button in it and set some of the same properties which we declared ina  previous step and also remember that you assign a unique id for each button.



Step 4: Now repeat this pattern two times and our layout is complete.



Where you make Icon or Image Circle?

This is the resource where all our needs become very easy. In this step I am discussing some general things such as how you take circle images and how you adjust the size of each images in this way I am showing some powerful resources which iare very helpful and creating an interactive layout. Click on IMAGE button and select the image and all the images all generated.



Where you take images or icons?

You can take images or icons on some free resources; I show  youone website you can download the icons from there and put it into Android asset to make an icon circle