Create your own layout using Java

Add a Large text from widgets in Design view of xml file. Let it be anywhere.

It will look like the figure

Now run the emulator. Its output will be as shown in figure.

Now go to MainActivity.java file.

Try to analyze the onCreate method. Here setContentView function displays the layout on the screen. Comment the like

And again run the app on emulator.

The output will not show the text because it was the part of that layout.

Now. Write the two lines on code in onCreate method.

Here we create a new object of class RelativeLayout named as MyLayout and then we display the layout on screen. If we run the application now then it won’t show that text because it was the part of RelativeLayout and now of MyLayout.

In future tutorials when we will add texts and buttons to MyLaout, you will better understand this concept.

Design of Android Studio- java file

The whole logic of the program is developed in the java file. Even we can do everything through java file i.e. a java programmer can create android application without writing single letter in .xml file. But for layout xml file is easier to use than java. So for time factor java is not suitable at least for layout. For logic you have no option other than java. We will study to create widgets using xml and java in future tutorials.

Currently see the figure.

The package name is CompanyName.ApplicationName

All required classes for predefined program are imported already by Android Studio.

In future if you have written one function for the class which is not imported yet, so the studio is showing error. Then just import the class at start of file otherwise use the shortcut of alt+Enter. This will import the class for you

The activity defined for the layout is the main programming class. In start we will deal only with onCreate function whenever this function is called the saved instance is generated. If we are opening the app after closing it then the app will start from the opening and of we have paused the app (pausing app means instead of back button just clicking on home button, so the process is still on in background) and then resuming it again. setContentView sets the layout on the screen. Which layout should be passed is decided by the passing parameter to the function.

The futher part will be covered in later tutorials.

Design of Android Studio- xml file

Android studio provide us two different ways of using xml file. The ways are shown in bottom left side of the window and they are Design and Text. Design window is the window in which you can drag the button, texts, checkboxes and all the stuffs directly into the layout.

The figure shown above is the Design view. Here we can place widgets directly by dragging them from palette into the layout screen

The other way is Text.

If you not able to screen in this layout then there is one toggle button written vertically in the right most side i.e. preview. Toggle that button to add or delete the Preview images of device.

In this file, you can add widgets by just writing there xml code.

The best thing about this feature provided by android studio is that. When you use method 1 i.e. Design view and when you drag a widget the code of the widget is directly created in the text view. So beginners can analyze the code of different buttons by using this method.

Other two windows in Design mode are component tree and Properties

Suppose for a particular project you have used very small texts or some overlapping widgets then it may be difficult for you to select a particular widget. For this thing you can just click on the widget in the tree and the widget from the layout will be selected.

Properties are the different options provided for the selected widget or layout. Clicking on empty area on screen will select the layout. How to use different properties will be discussed in later tutorials.

Design of Android Studio- Project view

In this tutorial we will study about the whole interface of android studio. We will start with project view.

Click on Android here you will get different views. Generally Android view or Project view is used many developers. Here, I will tell you about Android view. You can check all other views on yourself.

Here, apps and gradle scripts are the two folders. We won’t require gradle script in the start. So I will tell about it may be after few more tutorials. Expand the folder app.

In the figure shown below, I have expanded all the folders but we don’t need to expand all at the time while preparing apps.

First file is AndroidManifest.xml here all created activities are defined.

Next part is java files. Here we do programming stuff in java in only main activity. ApplicationTest file is created automatically.

Later is res i.e. resource.

First part is drawable. In drawable folder we store all images which are the part of our app.

In activitymain.xml we do xml programming for layout of app.

Further is menu_main.xml this one is for the menu file. This is used for settings and similar purpose. The option for this is available in the upper right part of our layout.

In minmap we store the logo for our application.

Value is the folder in which we store different constants. Here a string is not the variable but wherever it is mentioned is placed by its value defined in these files.

This is the first part of design

Second part is about xml file.

What is layout?

Layout can be considered as a parent and the widgets imposed on it are children. It is the container containing widgets.

There are different types of layouts.

Currently we will go with Relative Layout.

Relative Layout is pre-added, so we do not need to add it in activity.

Whenever we place an object in layout it is placed with respect to/ relative to any other object/objects or the layout itself.

Go to Design view in xml file and pick large text from the widget section.

See the figure carefully. Every object is placed with respect other object

1.          Widget present at center is placed at horizontal and vertical centers of relative layout
2.          Widget in upper right section is placed at the most right and top position with respect to layout
3.          Widget in upper left section is placed with x co-ordinate as left to center widget and y co-ordinate as below by fixed amount of pixels to the top of relative layout
4.          Widget in bottom left and bottom right section are placed with respect to other parameters

Now, if I select the center widget and delete it then what will happen?

Firstly when we select the center widget then the layout will look like the figure shown below

The other 2 widget which have one co-ordinate (here it is x co-ordinate) dependent on center widget are shown in yellowish color. Now if I delete the center widget then the layout will be how?

Since the parent widget (i.e. deleted widget) is aligned at center for x co-ordinate, the dependent widgets will take center of x co-ordinate for positioning itself.

So, be wise while dealing with relative layout.