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:
- 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.
- In the new project’s
app/res/layoutbranch (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.
- 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.
- 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
To be painfully precise, Android’s
TextViewcomponents aren’t really different kinds of components. Every
EditTextcomponent is a kind of
TextView, and every
Buttonis also a kind of
TextView. In the language of object-oriented programming, the
EditTextclass extends the
Buttonclass also extends the
- 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.
- 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.
- Repeat Step 6, this time putting a
TextViewcomponent on the preview screen.Put the
TextViewcomponent below the
Buttoncomponent but, once again, it’s up to you.
In the remaining steps, you change the text that appears in each component.
- Select the
Buttoncomponent 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
Buttoncomponent, you may see the word TextView in the Properties pane. Don’t confuse this with the
TextViewcomponent that you dragged from the palette in Step 7. With the button selected, all the fields in the Properties pane refer to that
Buttoncomponent. 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!)
- 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
Buttoncomponent. 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.
- Repeat Steps 8 and 9 with your activity’s
TextViewcomponents, 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
Buttoncomponent, and a
TextViewcomponent, you’re okay.
- Choose File → Save All to save your work so far.