Laying out the screen!

Posted on Updated on

Having talked about the project structure and various other basic concepts in the earlier posts, it’s time now to move towards the actual development of the app. So, How should we start? Should we simply start coding? According to me, the answer is NO!

The first thing that decides the success of an app is its GUI (Graphical User Interface). For those who are new to this word, it refers to the intermingling of design and interactive components, i.e., an app with a nice GUI will have the required number of menus, buttons and other interactive components placed according to a proper design. The effort should be made to ensure that the GUI reflects the purpose of the app. Also, it should be user-friendly, i.e., user should not be be made to search randomly in order to access a particular function, rather, the app should be automatically dictating the user where to go to find that function. How to achieve this? This is something that the developer gradually grasps over the course of time. I will try to help by explaining my motives of choosing a particular GUI, though it’s still your personal preference.

OK! So, the question is how do we set up a GUI in Android. This is achieved by a file named main.xml present in the layout folder ( in the res folder). So, let’s open it up and explore what it offers to us!

Image

The above figure is the image of the editor after opening the main.xml file. The right portion is exactly the same as the screen when the app runs (Remember! We had seen it in the emulator!). An important characteristic of this view is that the changes done in it are automatically reflected in the screen of the app, hence, its also called WYSIWYG (What You  See is What You Get). For now, we will be just dragging the various components onto this view, which will automatically change the layout of the screen. The left component called Palette provides all the various interactive components like buttons, text boxes, so on and so forth, which can be dragged and placed on this WYSIWYG view. In this post, I will be just be focussing on displaying a text on the screen.

The layout that is automatically generated also shows some text (Here it is, Hello World, HelloWorldActivity!. Hope that you can guess where it came from!). The component which simply displays a text is called a TextView. You can drag the TextView from the Palette( visible under Fom Widgets).  There are three sizes available initially (you can choose whatever you want later). This is what happens when I drag a Large Size TextView onto the screen.

 Image

So, you can simply place a text view by dragging and dropping. You can delete it by selecting and pressing Delete.

Ok! Now, let’s try to change the text which is automatically generated. Right click on it and choose Edit Text.

Image

In the dialog box that appears, click on New String. In the resulting dialog box, write the value of the string in the text box beside String. For now, write anything beside New R.string(We will discuss it later) .

Image

Click Ok twice. What do you see?

There are various simpler ways to do this. But, I mainly wanted to make you familiar with the WYSIWYG editor. We will discuss the other ways as we proceed. Now, it’s on you to explore the other components and modify their properties.

In the coming posts, I will be discussing various other aspects related to the layout.

Hoping that the posts are really helpful!

Till next time, BYE!

Advertisements

One thought on “Laying out the screen!

    […] We had changed the value of the default TextView to Developing Android Applications with Nikhil Gupta in the post titled Laying Out the Screen! […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s