Android SDK - Create A Drawing App - Interface Creation - Tuts+ Code Tutorial

2/16/2014
Android SDK: Create a Drawing App - Interface Creation - Tuts+ Code Tutorial
Tutorials
Courses
Premium
Jobs
Blog
Advertisement
Code
Categories
Software & Tools
Series
Search Code
Android SDK: Create a Drawing App - Interface Creation

By Sue Smith, 19 Aug 2013
Tw eet 1 Like 0 4
In this series, we will create a finger-painting app for Android using touch interaction. The user will be able to select from a color palette, choose a brush size, erase, create a new drawing, or save their existing drawing to the device gallery.
http://code.tutsplus.com/tutorials/android-sdk-create-a-drawing-app-interface-creation--mobile-19021 1/27
2/16/2014
In this first part of the series we will get the app user interface setup, then in the second part we will implement the drawing functionality. In the final part we will add the ability for the user to erase, to start a new drawing, to save existing drawings and to choose brush and eraser sizes.
Series Format
This series on Creating a Drawing App will be in three parts: Interface Creation Touch Interaction Essential Functionality
Final Preview
http://code.tutsplus.com/tutorials/android-sdk-create-a-drawing-app-interface-creation--mobile-19021
2/27
2/16/2014
Above is a screenshot from the app this series will teach you how to build. Hopefully your drawings will be better than mine!
1. Create an Android Project

2/16/2014
Step 1
Start a new Android project in Eclipse, choosing application and package names. We are using a minimum API level of 14 and a target of 17 for the code in this tutorial.
4/27
2/16/2014
Let Eclipse create a blank main Activity and layout - you can use the default names.
2/16/2014
Step 2
2/16/2014
Open your project Manifest file and switch to the XML editing tab. Your Activity and SDK levels should already be set. Add the following to your Activity element opening tag, forcing the app only to use portrait:
1 a n d r o i d : s c r e e n O r i e n t a t i o n = " p o r t r a i t "
Step 3
Before we start building the interface, let's define some numbers we will use throughout the series. In your app's "res/values" folder, if Eclipse has not already created it, add the "dimens.xml" file - if it is already there you can simply add new values to it. The outline should be as follows:
1 2 < r e s o u r c e s > < / r e s o u r c e s >
If Eclipse created the file, there may be some values in it already. We are going to use three possible brush/eraser sizes: small, medium, and large. We need to define the size for each as both a dimension and an integer value so that we can use these measurements in both the XML layout and drawable resources and the Java code:
1 2 3 4 5 6 < ! -B r u s hs i z e s> < d i m e nn a m e = " s m a l l _ b r u s h " > 1 0 d p < / d i m e n > 1 0 < d i m e nn a m e = " m e d i u m _ b r u s h " > 2 0 d p < / d i m e n > 2 0 < d i m e nn a m e = " l a r g e _ b r u s h " > 3 0 d p < / d i m e n >
7/27
2/16/2014
 3 0 
The values for dimension and integer at each size are the same, so that the UI indicates the brush size as it will function when the user draws with it.
2. Create a Custom View Class

Step 1
We are going to define a custom View class in which the drawing will take place. In your app's source package, create a new class. Name it "DrawingView" and select "android.view.View" as the Superclass. The new class should have the following outline:
1 2 3 4 p u b l i cc l a s sD r a w i n g V i e we x t e n d sV i e w { }
Step 2
In your new View class you will need the following import statements in addition to the View import which Eclipse should have added for you:
1 2 i m p o r ta n d r o i d . c o n t e n t . C o n t e x t ; i m p o r ta n d r o i d . u t i l . A t t r i b u t e S e t ;
8/27
2/16/2014
Add a constructor method to the class:

1 2 3 4 p u b l i cD r a w i n g V i e w ( C o n t e x tc o n t e x t ,A t t r i b u t e S e ta t t r s ) { s u p e r ( c o n t e x t ,a t t r s ) ; s e t u p D r a w i n g ( ) ; }
We will add an instance of the custom View to the XML layout file. Add the specified helper method to the class:
1 2 3 p r i v a t ev o i ds e t u p D r a w i n g ( ) { / / g e td r a w i n ga r e as e t u pf o ri n t e r a c t i o n }
We will implement this method in the next part of the series, as well as adding other methods to the class.
3. Design the Activity Layout

Step 1
Open your app's "res/values" strings XML file and add some text strings we will use in the layout:
1 2 3 4 < s t r i n gn a m e = " s t a r t _ n e w " > N e w < / s t r i n g > < s t r i n gn a m e = " b r u s h " > B r u s h < / s t r i n g > < s t r i n gn a m e = " e r a s e " > E r a s e < / s t r i n g > < s t r i n gn a m e = " s a v e " > S a v e < / s t r i n g >
9/27
2/16/2014
< s t r i n gn a m e = " p a i n t " > P a i n t < / s t r i n g >
Open the app's main layout file and switch to the XML tab to edit the code. The Activity screen content will be easiest to implement using Linear Layouts. Replace the content of the layout file with the following outline:
1 2 3 4 5 6 7 8 9 < L i n e a r L a y o u tx m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d x m l n s : t o o l s = " h t t p : / / s c h e m a s . a n d r o i d . c o m / t o o l s " a n d r o i d : l a y o u t _ w i d t h = " m a t c h _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " m a t c h _ p a r e n t " a n d r o i d : b a c k g r o u n d = " # F F C C C C C C " a n d r o i d : o r i e n t a t i o n = " v e r t i c a l " t o o l s : c o n t e x t = " . M a i n A c t i v i t y "> < / L i n e a r L a y o u t >
We set vertical orientation and a gray background color.
Step 2
Inside the main Linear Layout, add another to hold the UI buttons along the top of the screen:
1 2 3 4 5 6 < L i n e a r L a y o u t a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " 5 0 d p " a n d r o i d : l a y o u t _ g r a v i t y = " c e n t e r " a n d r o i d : o r i e n t a t i o n = " h o r i z o n t a l "> < / L i n e a r L a y o u t >
10/27
2/16/2014
This time the layout is horizontal with a set height and centering applied. Inside this layout we will add the buttons for starting a new drawing, selecting a brush, selecting an eraser, and saving a drawing. We are using the following images for these buttons, although you can create your own if you prefer:
Copy the images to your app's drawable folder(s) - if you are creating your own you can target particular densities. To complete the tutorial series without targeting particular screen densities you can simply create a folder named "drawable" and add all of your drawable resources to it. Let's now add an ImageButton for each option in the Activity. Start with the button to create a new drawing inside the second Linear Layout:
1 2 3 4 5 6 < I m a g e B u t t o n a n d r o i d : i d = " @ + i d / n e w _ b t n " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / s t a r t _ n e w " a n d r o i d : s r c = " @ d r a w a b l e / n e w _ p i c "/ >
11/27
2/16/2014
We will use the ID to respond to button clicks in the Activity class. We specify the new button icon image as source for the ImageButton and add a content description string. Next add the brush button:
1 2 3 4 5 6 < I m a g e B u t t o n a n d r o i d : i d = " @ + i d / d r a w _ b t n " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / b r u s h " a n d r o i d : s r c = " @ d r a w a b l e / b r u s h "/ >
Now add the eraser button:

1 2 3 4 5 6 < I m a g e B u t t o n a n d r o i d : i d = " @ + i d / e r a s e _ b t n " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / e r a s e " a n d r o i d : s r c = " @ d r a w a b l e / e r a s e r "/ >
On clicking either the brush or eraser button, the user will be prompted to select a size - we will implement this later. Next add the save button:
1 2 3 4 5 6 < I m a g e B u t t o n a n d r o i d : i d = " @ + i d / s a v e _ b t n " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / s a v e "
12/27
2/16/2014
a n d r o i d : s r c = " @ d r a w a b l e / s a v e "/ >
That's it for the top Linear Layout control buttons.
Step 3
After the top button Linear Layout, but still inside the outer Linear Layout in the file, let's now add an instance of the custom view class we created:
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 < c o m . e x a m p l e . d r a w i n g f u n . D r a w i n g V i e w a n d r o i d : i d = " @ + i d / d r a w i n g " a n d r o i d : l a y o u t _ w i d t h = " f i l l _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " 0 d p " a n d r o i d : l a y o u t _ m a r g i n B o t t o m = " 3 d p " a n d r o i d : l a y o u t _ m a r g i n L e f t = " 5 d p " a n d r o i d : l a y o u t _ m a r g i n R i g h t = " 5 d p " a n d r o i d : l a y o u t _ m a r g i n T o p = " 3 d p " a n d r o i d : l a y o u t _ w e i g h t = " 1 " a n d r o i d : b a c k g r o u n d = " # F F F F F F F F "/ >
As you can see, you can add a custom View to your layouts in much the same way as the standard Android UI elements. We set general layout properties, a white background for drawing, and provide an ID for referencing the View in Java. By retrieving a reference to this instance of the custom View class, our Activity will be able to access the methods we define in the View class declaration we created.
13/27
2/16/2014
Advertisement
Step 4
Now let's add the color palette. After the custom View element, add another Linear Layout for the palette buttons:
1 2 3 4 5 6 < L i n e a r L a y o u t a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ g r a v i t y = " c e n t e r " a n d r o i d : o r i e n t a t i o n = " v e r t i c a l "> < / L i n e a r L a y o u t >
This element will contain two rows of buttons so enter two more Linear Layouts for these. Place the following inside the one you just added:
0 1 0 2 0 3 0 4 0 5 < ! -T o pR o w> < L i n e a r L a y o u t a n d r o i d : i d = " @ + i d / p a i n t _ c o l o r s " a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t "
14/27
2/16/2014
0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3
a n d r o i d : o r i e n t a t i o n = " h o r i z o n t a l "> < / L i n e a r L a y o u t > < ! -B o t t o mR o w> < L i n e a r L a y o u t a n d r o i d : l a y o u t _ w i d t h = " w r a p _ c o n t e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : o r i e n t a t i o n = " h o r i z o n t a l "> < / L i n e a r L a y o u t >
The first row has an ID because we are going to use it in Java when the app starts to set the first default color as selected so that the user can start drawing straight away. For each color, we are going to use the following ImageButton structure:
1 2 3 4 5 6 7 8 9 < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 6 6 0 0 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 6 6 0 0 0 0 "/ >
Don't add this to your layout file yet - we will do that shortly, for now look over the code. We use one of the dimension values we defined for the color button. Notice that the background and tag attributes are the same - the background is for the appearance of the button in the UI, while the tag is so that we can set the paint color according to what the user has clicked in the Activity Java code. The element includes a method to execute on clicks of the button - we will implement this in the Activity class next time. We also
2/16/2014
specify a drawable named "paint". Add this to the project now, creating a new file in the project drawable folder(s) and naming it "paint.xml". Enter the following code in the new drawable file:
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 < l a y e r l i s tx m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d < s h a p ea n d r o i d : s h a p e = " r e c t a n g l e "> < s t r o k e a n d r o i d : w i d t h = " 4 d p " a n d r o i d : c o l o r = " # F F 9 9 9 9 9 9 "/ > < s o l i da n d r o i d : c o l o r = " # 0 0 0 0 0 0 0 0 "/ > < / s h a p e > < s h a p ex m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " < s t r o k e a n d r o i d : w i d t h = " 4 d p " a n d r o i d : c o l o r = " # F F 9 9 9 9 9 9 "/ > < s o l i da n d r o i d : c o l o r = " # 0 0 0 0 0 0 0 0 "/ > < c o r n e r sa n d r o i d : r a d i u s = " 1 0 d p "/ > < / s h a p e > < / l a y e r l i s t >
This is less complex than it looks at first glance. To create a rounded button appearance, we use two layered Shape Drawables, one a rectangle outline and the other a rounded stroke. The strokes have a gray color, with transparency in the middle through which the background color for each
2/16/2014
button will be seen (the background color being the color represented by the button). Back in the layout file, inside the top row layout in the color palette section, add the following ImageButton elements to represent the first six colors, using the structure we outlined above:
0 1 0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 6 6 0 0 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 6 6 0 0 0 0 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F F F 0 0 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F F F 0 0 0 0 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F F F 6 6 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t "
17/27
2/16/2014
2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0 4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9
a n d r o i d : t a g = " # F F F F 6 6 0 0 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F F F C C 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F F F C C 0 0 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 0 0 9 9 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 0 0 9 9 0 0 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 0 0 9 9 9 9 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 0 0 9 9 9 9 "/ >
Each button is identical apart from the colors defined in the background and tag attributes. Add the next six in the bottom row layout:
0 1 < I m a g e B u t t o n
18/27
2/16/2014
0 2 0 3 0 4 0 5 0 6 0 7 0 8 0 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8 3 9 4 0
a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 0 0 0 0 F F " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 0 0 0 0 F F "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 9 9 0 0 9 9 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 9 9 0 0 9 9 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F F F 6 6 6 6 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F F F 6 6 6 6 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F F F F F F F " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F F F F F F F "/ >
19/27
2/16/2014
4 1 4 2 4 3 4 4 4 5 4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9
< I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 7 8 7 8 7 8 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 7 8 7 8 7 8 "/ > < I m a g e B u t t o n a n d r o i d : l a y o u t _ w i d t h = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ h e i g h t = " @ d i m e n / l a r g e _ b r u s h " a n d r o i d : l a y o u t _ m a r g i n = " 2 d p " a n d r o i d : b a c k g r o u n d = " # F F 0 0 0 0 0 0 " a n d r o i d : c o n t e n t D e s c r i p t i o n = " @ s t r i n g / p a i n t " a n d r o i d : o n C l i c k = " p a i n t C l i c k e d " a n d r o i d : s r c = " @ d r a w a b l e / p a i n t " a n d r o i d : t a g = " # F F 0 0 0 0 0 0 "/ >
Change the colors if you like, but make sure you use the same color value in the background and tag attributes for each button. You should now be able to see the layout in the Graphical Layout tab in Eclipse:
20/27
2/16/2014
Conclusion
We've now completed the first part of the series! Your app won't do much at the moment, but in the next part we will implement the drawing functions, detect and respond to touch interaction, and allow the user to choose colors. In the final part, we will enhance this functionality to allow the user to erase, choose brush and eraser sizes, start a new drawing, or save the current drawing. In future follow-up tutorials to this series, we will look at using pattern fills in drawing functions, using opacity, and supporting non-touch interaction (e.g.
2/16/2014
trackball, stylus and mouse). You will be able to use these later tutorials to build on the skills you learn in this series. Stay tuned!
Advertisement
Tutorial Details Difficulty: Intermediate Length: Medium Tags: Android SDK, Mobile Dev, Android SDK
Download Source Files
About the Author I'm a Web/ software developer and

2/16/2014
technical/ comedy writer - see BeNormal.info for details. I've written more for lots of different clients, including Smashing Magazine and Mobiletuts+. Follow me on Twitter @BrainDeadAir or email me at sue@benormal.info.
Advertisement
Related Posts
Code
Code
Code
Code
Create a Hangman Game: User Interface
Android SDK: User Interface Design
Android SDK: Drawing with Opacity
Android SDK: Drawing with Pattern Fills

23/27
2/16/2014
6 days ago
13 Nov 2013
10 Sep 2013
3 Sep 2013
8 Comments
Sort by Best
Mobiletuts+
Share
Login
Favorite
Join the discussion

Rupa 1 Matt 1
3 months ago
this is soo useful tx alott

Reply Share
6 months ago
A good start. waiting for next part :-)

Reply Share
24 days ago
Jose Xavier
Is it supposed to build at this time?

Reply Share
iwan
a month ago
thanks,
Reply Share
Sean
3 months ago
24/27
Great stuff! Thank you so much!

2/16/2014
Great stuff! Thank you so much!

Reply Share
sash_007
5 months ago
this tutorial is very useful for beginners like me

Reply Share
hugo torres linares
5 months ago
very very good tutorial

Reply Share
Sree
6 months ago
Thank youuuuuuuu soooooooooo much..Its soooo helpful ..:)..Waiting for the next part..
Reply Share
Subscribe
Add Disqus to your site
Advertisement
25/27
2/16/2014
Code
Back to Top
Categories Web Dev WordPress Tutorials Android SDK Theme Development Flash News PHP ActionScript Creative Coding Mobile Dev JavaScript & AJAX iOS SDK HTML & CSS
Brow se All...
Software & Tools PHP WordPress JavaScript iOS SDK

Brow se All...
Teaching skills to millions worldwide.
Design & Illustration Photography
Code
Web Design
Music & Audio
3D & Motion Graphics Crafts & DIY
Game Development Business

26/27
Mac Computer Skills
2/16/2014
About Us Blog Write for Us Advertise Suggestions Privacy Policy Terms & Conditions
2013 Envato Pty Ltd.
27/27

Android SDK - Create A Drawing App - Interface Creation - Tuts+ Code Tutorial

Transféré par

Informations du document

Description originale:

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Android SDK - Create A Drawing App - Interface Creation - Tuts+ Code Tutorial

Transféré par

Droits d'auteur :

Formats disponibles

2/16/2014

Software & Tools

Android SDK: Create a Drawing App - Interface Creation

1. Create an Android Project

< i n t e g e rn a m e = " l a r g e _ s i z e " > 3 0 < / i n t e g e r >

2. Create a Custom View Class

Add a constructor method to the class:

3. Design the Activity Layout

< s t r i n gn a m e = " p a i n t " > P a i n t < / s t r i n g >

We set vertical orientation and a gray background color.

Now add the eraser button:

a n d r o i d : s r c = " @ d r a w a b l e / s a v e "/ >

That's it for the top Linear Layout control buttons.

Download Source Files

About the Author I'm a Web/ software developer and

Create a Hangman Game: User Interface

Android SDK: User Interface Design

Android SDK: Drawing with Opacity

Android SDK: Drawing with Pattern Fills

Join the discussion

this is soo useful tx alott

A good start. waiting for next part :-)

Is it supposed to build at this time?

Great stuff! Thank you so much!

Great stuff! Thank you so much!

this tutorial is very useful for beginners like me

hugo torres linares

very very good tutorial

Add Disqus to your site

Software & Tools PHP WordPress JavaScript iOS SDK

Teaching skills to millions worldwide.

Design & Illustration Photography

Music & Audio

3D & Motion Graphics Crafts & DIY

Game Development Business

Mac Computer Skills

2013 Envato Pty Ltd.

Vous aimerez peut-être aussi