How to Create the “Look” for Your Android App with Java

A general guideline in Android app development tells you to separate logic from presentation. In less technical terms, the guideline warns against confusing what an app does with how an app looks. The guideline applies to many aspects of life. For example, if you're designing a website, have artists do the layout and have geeks do the coding. If you're writing a report, get the ideas written first. Later, you can worry about fonts and paragraph styles.

The literature on app development describes specific techniques and frameworks to help you separate form from function.

To add buttons, boxes, and other goodies to your app, do the following:

1. Launch Android Studio and begin a New Project.When you're finished with these steps, you have a brand-new project with an empty activity. The project appears in Android Studio's main window.
2. In the new project's app/res/layout branch (in the main window's Project tool window), double-click activity_main.xml.As a result, Android Studio's Designer tool displays the contents of activity_main.xml. The Designer tool has two modes: Design mode for drag-and-drop visual editing and Text mode for XML code editing. So the bottom of the Designer tool has two tabs: a Design tab and a Text tab.
3. Click the Design tab.

   In Design mode, you see the palette, the component tree, two preview screens, and the Properties pane.

   If you don't see the palette, look for the little Palette button on the left edge of the Designer tool. If you click that button, the palette should appear.

   The component tree has a branch labeled TextView – "Hello World!" This branch represents the text Hello World! that appears automatically as part of your app. You don't need this text in your app.
4. Select the TextView - "Hello World!" branch in the component tree, and then press Delete.The "Hello World" branch disappears from the component tree, and the words Hello World! disappear from the preview screen. The next several steps guide you through the creation of the app. The app's layout has three different kinds of components, and each kind of component goes by several different names. Here are the three kinds of components:
   • EditText (also known as Plain Text): A place where the user can edit a single line of text.A common name for this kind of component is a text field.
   • Button: A button is a button is a button.Do you want to click the button? Go right ahead and click it.
   • TextView (also known as Plain TextView, Large Text, Medium Text, and so on): A place where the app displays text.Normally, the user doesn't edit the text in a TextView component.

     To be painfully precise, Android's EditText, Button, and TextView components aren't really different kinds of components. Every EditText component is a kind of TextView, and every Button is also a kind of TextView. In the language of object-oriented programming, the EditText class extends the TextView class. The Button class also extends the TextView class.

5. Drag a Plain Text (that is, EditText) item from the palette's Widgets group to either of the preview screens.The Plain Text item may land in an ugly-looking place. That's okay. You're not creating a work of art. You're learning to write Java code.
6. Repeat Step 5, this time putting a Button item on the preview screen.Put the Button component below the Plain Text (EditText) component. Later, if you don't like where you put the Button component, you can easily move it by dragging it elsewhere on the preview screen.
7. Repeat Step 6, this time putting a TextView component on the preview screen.Put the TextView component below the Button component but, once again, it's up to you. In the remaining steps, you change the text that appears in each component.
8. Select the Button component on the preview screen or in the component tree.As a result, the Designer tool's Properties pane displays some of the Button component's properties. After selecting the Button component, you may see the word TextView in the Properties pane. Don't confuse this with the TextView component that you dragged from the palette in Step 7. With the button selected, all the fields in the Properties pane refer to that Button component. If the appearance of the word TextView in the Properties pane confuses you, refer to the Technical Stuff icon in Step 4. (If the word TextView doesn't confuse you, don't bother reading the Technical Stuff icon!)
9. In the Properties pane, in the field labeled text, type the word COPY.When you do, the word COPY appears on the face of the Button component. You can check this by looking at the wysiwyg preview screen. In the Properties pane, you may see two fields labeled text. If so, one is for testing and the other is for running the app. When in doubt, it doesn't hurt to type the word COPY in both of those fields.
10. Repeat Steps 8 and 9 with your activity's EditText and TextView components, but this time, don't put the word COPY into those components. Instead, remove the characters from these components.When you're finished, the preview screens look similar to the screens below. If your preview screens don't look exactly like this, don't worry about it. Your components may be scattered in different places on the preview screens, or the creators of Android Studio may have changed the way the preview screens look. As long as you have an EditText component, a Button component, and a TextView component, you're okay.
11. Choose File →   Save All to save your work so far.