Overlook on Android Studio: 4. Using Android Studio

In this chapter we will learn how we can use Android Studio to develop app. In the layout design section we will see how we can use widgets and set its placement with its properties and settings. Also we will cover how auto complete feature works in Android Studio. As well as refactoring and how we can find the files etc.


Topics Covered

Design With Android Studio


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3983) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Once you created new project you will get an Activity java class file, which reference a xml file for design of that Activity. So how we can get that xml to design the layout for that Activity. See the image below.

Overlook on Android Studio

Here you can open layout xml file with three different way.
Option 1: By press and hold Ctrl key and Click on layout name.
Option 2: By click on link given in class which refers to the attached layout to the Activity and AndroidManifest.xml
Option 3: Browse the res>layout folder from layout window and open it.

Once you open layout xml you find the look like below. The below view is opened in design mode you may find it in text view. just switch it into design mode from given below two buttons.

Overlook on Android Studio

You can drag and drop any required layout or widgets controls to layout from pallete given at the left side of the design view and also you can change their properties from properties panel given at right side of the screen. Now switch the design mode to text. You find the code is automatically created for layout and button control and managed by Andoid Studio.

Overlook on Android Studio

If you want to make changes in text view, you have to write each line by your own. Make sure all the xml syntax are correctly written. Otherwise it won’t result as we required.

Let try to make some changes in text view.

Overlook on Android Studio

Here I have made the change of text property to change the button label name. While changing the text property you will notice there is light icon is displaying at the left side of the line. That means you can extract the string by selecting that icon. So let try to extract the string resource.

Here are the few steps to do it.
Step 1: Place the cursor at the string. So light icon will appear.
Step 2: Now click on light icon and select “Extract string resource” option.
Step 3: The Extract Resource dialog will appear, So give the resoruce name.
Step 4: Select directory where you want to store resource value. You can create new directory if you want. the create icon you will find at the right side in the dialog box.
Step 5: And click ok

Once you done with extracting resource. It will refactor and refer to the resource like

You can open the resource file by pressing Ctrl key with mouse left click. See the image below

Overlook on Android Studio

In the preview window you can try even more device templates to see your design by choosing device from devices list given. See the image below.

Overlook on Android Studio

Or you can see the preview on all the available devices at once.

Overlook on Android Studio

Code Auto Completion


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3983) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Code auto completion is one of the feature of android studio which give the ability to programmer to write the code very quickly and it guide to write correct syntax.

For example if you try with Math Class, the android studio will show you the code hint. If its is not showing, just press Ctrl + Space. If you rollover any of the suggested class from the list, it show you documentation as well. See the image below.

Overlook on Android Studio

Once you select a class you required using up down arrow key, press Tab to auto complete.

Here is one more example I am going to show you. Lets add a button widget in design view and assign id name “button” to it.

Now see the below images, If you notice, how android studio is showing hints and we can auto complete it by pressing tab by selecting proper line of code while writing a code in code editor..

Step 1:

Overlook on Android Studio

Step 2:

Overlook on Android Studio

Step 3:

Overlook on Android Studio

You have seen how we can use auto complete while defining Button and referencing it ot button widget place in layout xml.

Refactoring


Warning: Cannot modify header information - headers already sent by (output started at /home/bajayk/public_html/wp-content/plugins/all-in-one-seo-pack/aioseop_class.php:3983) in /home/bajayk/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_wp.class.php on line 220

Android Studio has a code Refactoring powerful feature, which allows you coder to rename or extract methods, variables or class and like so.

Renaming variable.
For example see the below code block and I want to rename variable name “btn” to “sbutton”.

Overlook on Android Studio

There are three ways to rename this variable using Android Studio refactoring feature.

Method 1: Select variable name and right click. Go to refactor menu and select rename command.

Method 2: Select variable name and select Refactor > Rename from menu bar.

Method 3: Select variable name and go to Refactor > Refactor this. It will open a list of refactoring commands. choose rename command from the box.
See the below code how you it will look like when you will select rename command from right click menu.

Overlook on Android Studio

if you start renaming, you will notice how the other references are renaming simultaneously where you have used same variable.

Extracting method

Lets see another example of refactoring.

If you want to make a separate method for any particular lines of code, then extract command is useful for you. so lets see how we can do it.

Overlook on Android Studio

Right click and select Refactor > Extract > Method and then Extract method dialog will apeare. Just enter the name of method which you want and click ok.

Overlook on Android Studio

You will find complete separate method is created with selected lines of code and replaced with entered method name in dialog.

Overlook on Android Studio

So this is how you can use refactoring. There are many other commands available in the list. That you can try too.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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