Android Homework for-july-19th-2015
1 like3,303 views
This document provides a tutorial for making a user interface for an Android app. It begins with an introduction explaining that the tutorial will teach how to make an Android app's user interface. It then outlines the steps that will be covered, which include learning user interface basics, markup language basics, and finally creating the example user interface shown. The document is written as a tutorial with multiple steps that teach key concepts for developing user interfaces using markup languages like XML that are used for Android apps.
Android Homework for-july-19th-2015
- 1. Homework for July 19th 2015 User Interface Development Aditya Aggarwal wrote the following tutorial for the Saratoga Young Coders Club.
- 2. Introduction • In this tutorial, you will learn how to make the user interface of an Android app • For how to make your first android app check the “Starting Android Development” document that I sent out last week At the end of the tutorial, you will make this:
- 3. STEP 1: User Interface Basics Before we get started on making the User Interface (the UI), you need to know some basics. A user interface is images on a screen. For example, the way you are reading this document is through a user interface. A user interface for an Android app would be the images that are used for your app. So this would be the UI of an Android app: The UI of any app is created in a markup language. Markup language is any coding language that allows you to style or “markup” text so text becomes images on a screen. A famous markup language is called HTML. If you know HTML, finish the rest of STEP 1 and then skip to STEP 3. Android uses a markup language called XML which stands for (e)Xtensible Markup Language. There are important concepts you must learn in order to understand any markup language. I will be covering these concepts in the next step.
- 4. STEP 2: Markup Language Basics Part 1 (Elements) All code will be in this font This is text <this is text> <this is still text> <text/> Text is anything that can be written. Since markup languages markup text, markup languages can understand anything that can be written! In all markup languages, something in the pointy brackets <> are elements. <thisisanelement> All the text in between the opening pointy bracket < and the first space is called the element name. The element name is highlighted in pink. <thisisanelementname thisisnotanelementname> <elementname notelementname> <stilltheelementname someattribute=”value”> Markup languages can convert elements into things on the screen. If you want to make a square on the screen, then you type in: <square> And you get this:
- 5. It is not that simple however. You can only code certain elements in each markup language. Otherwise, you could code any element <ball>, <car>, etc. and the computer would somehow have to know how to make them. Markup languages require that most elements have a slash / before the end pointy bracket >. You would usually avoid: <square> Instead, you would use: <square/>
- 6. If you want to put things inside an element, you would use opening and closing tags. <opening-tag> stuff you want to put in your element </closing-tag> The opening tag is highlighted in green the closing tag is highlighted in blue. Closing tags always start with a slash / after the beginning pointy bracket <. If you want to add a circle inside the square, you write <square> <circle/> </square> And get this: • In this example, you do not create two squares. You create a square with a circle inside it. • The square and everything inside it is now the square element. • The element name is square. • The circle is also an element. • The circle element is within the square element.
- 7. Part 2 (Attributes) The attributes of something are the characteristics of something. You have a hair color attribute or a height attribute. This square has a color attribute. All attributes have a value. The value of my height attribute is 5 feet 11 inches. The color attribute’s value for the square above is red. If you want to make an attribute, you type the attribute name, then an equals sign, and in quotation marks the value. The attribute is highlighted in green. The value is highlighted in pink. AttributeName= “value” height= “5 feet 11 inches” color= “red”
- 8. You can give elements attributes. The attributes of an element are the characteristics of an element. If you want to give an element an attribute, you would place it in the pointy brackets <> after the element name and before the slash /. <element attributeName= “value”/> If the element is created with opening and closing tags, you put the attributes in the opening tag inside the pointy brackets <> after the element name. <element attributeName= “value”> <element2/> </element> If you want to make the red square above, type <square color= “red”/> or using opening and closing tags and putting nothing inside the square <square color= “red”> </square> If we wanted to put a blue circle inside a red square you would write <square color= “red”> <circle color= “blue”/> </square>
- 9. Now you know how to use markup language. Next, you will learn how to use XML ((e)Xtensible Markup Language) to make the User Interface of an Android App.
- 10. STEP 3: Programming the Android UI Part 1 (Locating the XML file) Open Android Studio and open MyFirstApp from the previous tutorial. The most recent project should automatically open, so if you worked on MyFirstApp most recently, MyFirstApp should open. You can figure out which project is open by looking at the area circled in red in your Android Studio. Next, in your project explorer, navigate to activity_main.xml. Read my previous tutorial if you forgot what this file is for. Click on it.
- 11. Your Android Studio should like this (if it does not, continue reading to fix the problem). If your Android Studio does not look like the picture above, go to the bottom of your screen and click on “Text” (the “Text” tab). The Design tab allows you to edit the user interface without code. However, you will eventually want to know how to code user interfaces, because the design tool is not good enough to make complicated user interfaces and ones that interact with JAVA (dynamic language).
- 12. Part 2 (Android XML Elements) Taking what you have learned from the “Step 2: Markup Language Basics,” you can figure out that the code in your editor creates a RelativeLayout element and a TextView element inside the RelativeLayout element. Both the RelativeLayout element and the TextView element have many attributes. A layout defines how elements inside should be positioned on the screen. The RelativeLayout element is a layout that places all elements inside of it at the top left of the screen. Therefore, they can overlap. However, you can use attributes on each element inside to tell the element to be in a different position on the screen (these attributes are called positioning attributes).
- 13. Change the RelativeLayout element to a LinearLayout element. Make sure to do this for the opening and closing tags. A LinearLayout element is a layout that places elements so they do not overlap. However, if you use a LinearLayout, you cannot use some positioning attributes on the elements inside the layout.
- 14. The TextView element creates a text box on the screen. The TextView is what shows in your MyFirstApp app. Delete the TextView. Your code should like Make an EditText element inside the RelativeLayout element. Start typing. As you start typing in <EditTe suggestions show up. Double click on the suggestion that says EditText or select it using your up and down arrow keys and then press Enter .
- 15. The code will automatically add two attributes (android:layout_wdith= “” and android:layout_height= “”) that are required of every element. The code will now give you suggestions for the value of an android:layout_width attribute. Do not select anything. Using your right and left arrow keys , move to the cursor or click on a different line of code to make the suggestion box disappear. Your editor should now look like the picture below:
- 16. Below the EditText element make a Button element. The editor may ask you to fill the android:layout_height attribute if you press Enter at the end of the EditText element. Just move you cursor to the end of the EditText element using the right and left arrow keys . and press Enter on your keyboard twice.
- 17. Using what you have learned making the EditText element, continue to making a Button element below it. After creating the Button element, your editor should look like the picture below. The EditText element creates an “input area” or a place where someone using your app’s UI can enter text. The Button Element creates a button.
- 18. Part 3 (Android XML Attributes) In order for the elements to look like the pictures above, you have to give these elements some attributes and assign values to these attributes. You may have noticed that almost all attributes start with android: The android: that is on every attribute is called a namespace. The namespace is highlighted in pink in the code for attributes below. android:layout_wdith= “” android:layout_height= “” The namespace is used so that Android XML can understand your attribute. XML does not have the attribute “layout_width” or “layout_height.” It has the attribute http://schemas.android.com/apk/res/androidlayout_wi dth.
- 19. In order to keep you from typing http://schemas.android.com/apk/res/android all the time, your code uses the attribute circled in red in the picture below to make android: stand for http://schemas.android.com/apk/res/android. The code circled in the red is always automatically in your code. You do not have to understand its syntax. However, you should know the reason why you put android: at the start of many attributes.
- 20. android:layout_width= “” is the width attribute. android:layout_height= “” is the height attribute. You can make the value an amount of density independent pixels. One Density independent pixel is one dot on a screen. The units for length on a ruler are either inches or centimeters. The units for length on a Android device’s screen are density independent pixels, which are abbreviated as dp. If you want to make the width of an element 50 dp, then you would write android:layout_width= “50dp” You can also use words as values for these attributes, but you can only use specific words. If you want the element to automatically have the things inside it fit exactly (for example have text like “SEND” inside a button fit exactly), then you would use wrap_content. To make the width of the button match the width of the things inside it, you would type: android:layout_width= “wrap_content”
- 21. Set the value of all the width and height attributes to wrap_content. You will get suggestions like you did when creating elements. Use the same method you used to choose an element suggestion to choose an attribute suggestion. Now your code should look like the editor below.
- 22. Now add the following attribute to EditText: android:hint= “” This attribute is the hint attribute. The hint attribute puts gray text in an element. You use the hint attribute to “hint” or tell someone using the app what to put inside an EditText. You can set the value of the hint to any text (except double quotation marks, because they end a value. To use double quotation marks within the value, you would have to type in " instead of “ ). Set the value of the hint attribute to Enter a Message… Your editor should look like
- 23. Now add the following attribute to button: android:text= “” This attribute is the text attribute. The text attribute puts normal text in an element. You can set the value of the hint to any text (the double quotation marks exception applies as it did with the previous attribute). Set the value of the text attribute to SEND Your editor should look like
- 24. Part 4 (Checking with the Design Tab) Click the design tab at the bottom left of your screen. Your editor should look like the picture below. (If your editor does not look like the picture below, continue reading to fix this problem.) The design tab creates a preview of the UI, so you can view it without running the app.
- 25. If the editor does not look like the picture above, select the button at the top right of the editor circled in the red in the picture below (you might have a different number selected, that is ok) and select an API will a lower number. If it does not work again, select a lower number. Keep going lower until you get a preview of the UI. You now have a button and a place where the user can enter text.
- 26. Part 5 (Working on your Own) You are now going to make the text in the button italic. You can figure out from looking at your code , it makes most sense to place this attribute on the button. This time you will find the name of this attribute by yourself. You do not know the names of any of the attributes except for the one’s you have used. Therefore, you will need to learn how to find the names of attributes that cause changes to UI that you want. Using your web browser, search up “italic attribute for android.” The third result (on Chrome) “How do you change text to bold in Android? -‐ Stack Overflow” should help you figure it out. A website called Stack Overflow is a question and answer website that usually has answers to almost any coding question.
- 27. Using the information you just found from online, update your code so the text inside the button is italic. The answer (the code) to making the button text italic is on the next page.
- 29. You can also find information about the attributes available on android at this page called a documentation page: https://developer.android.com/training/basics/firstapp/building -‐ui.html http://developer.android.com/reference/android/R.attr.html. When you open the link you get, When you scroll down, you get an alphabetical list of all the attributes available. Scroll down to textStyle and click it. Then you get more information about the attribute.
- 30. There is unfortunately no one documentation page for elements. To find element names, you should use the search method you used to find the name of the attribute that causes italics instead. Also, the Android Developers website has many tutorials for making UI elements. The tutorials on the Android Developers website tell you what element names and attribute names to use, you just have to understand the syntax.
- 31. STEP 4: Run the App Press the green play button circled in red above and run the app (check my previous tutorial “Starting Android Development” if you do not know how to do this). Your emulator should look like Congratulations! You now know how to code the UI of an Android app.
- 32. Further Resources and Links Here are resources that may help you in this tutorial: Make the same UI you just made: https://developer.android.com/training/basics/firstapp/building-‐ ui.html Documentation Page for Android Attributes: http://developer.android.com/reference/android/R.attr.html About Markup Languages: https://en.wikipedia.org/wiki/Markup_language Search StackOverflow: http://stackoverflow.com/search