|
|
|
1
|
Introduction
Doodling is something we all do whenever we are bored. Learn to use canvas, sliders and extensions in android apps. You will surely have fun with this app. Learn to build a digital doodling app where you can draw lines, circles with your finger, use color picker extension to use wide range of colors you wish, use sliders to adjust the line width and the circle radius and do many more.
If you have already learn the Chapter 4 Digital Doodle in Android Course, then,
- Open the Digital Doodle Project in MIT App Inventor.
- Go to Projects -> Save project as -> Advanced Digital Doodle
- Follow the tutorial on this newly created project copy.
If you do not have the Digital Doodle project, then download it from below.
- Once downloaded, go to MIT App Inventor, Import project (.aia) from my computer.
- Select the downloaded DigitalDoodle.aia file and import it.
- Follow the tutorial on this imported project.
Download
|
|
|
|
2
|
Adding Horizontal Arrangement for Slider
First, Let's add a slider for adjusting the line width. We can simply adjust this slider to increase or decrease the width of the line we draw on the drawing board canvas.
For this we need a Label to tell that this slider is used to adjust the Line width and then we need to add the Slider. So, to place them next to each other, let's add the Horizontal Arrangement layout first.
- From the Palette
- Go to Layout
- Drag and Drop Horizontal arrangement below HorizontalArrangement1
|
|
|
|
3
|
Adding Label into the Horizontal Arrangement
- From the Palette
- Go to User Interface
- Drag and Drop the Label into HorizontalArrangement2
- Rename the Label to Line_Width_Label by clicking on Rename
- Set Text as Line Width
|
|
|
|
4
|
Adding Slider for Line Width
- From the Palette
- Go to User Interface
- Drag and Drop Slider beside Line_Width_Label in the HorizontalArrangement2
- Rename Slider to Line_Width_Slider
- Set Width to Fill parent
- Set MaxValue to 10
- Set MinValue to 2
- Tick ThumbEnabled
- ThumbPosition to 4
- Tick Visible
|
|
|
|
5
|
Adding another Horizontal Arrangement for Circle Radius Slider
Now, Let's add a slider for adjusting the circle radius (size of the circle). We can simply adjust this slider to increase or decrease the radius of the circle we draw on the drawing board canvas.
Like the previous slider, we need a Label to tell that this slider is used to adjust the circle radius and then we need to add the Slider. So, to place them next to each other, let's add the Horizontal Arrangement layout as usual.
- From the Palette
- Go to Layout
- Drag and Drop Horizontal arrangement below HorizontalArrangement2
|
|
|
|
6
|
Adding Label for Circle Radius
- From the Palette
- Go to User Interface
- Drag and Drop the Label into HorizontalArrangement3
- Rename the Label to Circle_Radius_Label by clicking on Rename
- Set Text as Circle Radius
|
|
|
|
7
|
Adding Slider for Circle Radius
- From the Palette
- Go to User Interface
- Drag and Drop Slider beside Circle_Radius_Label in the HorizontalArrangement
- Rename Slider to Circle_Radius_Slider
- Set Width to Fill parent
- Set MaxValue to 10
- Set MinValue to 2
- Tick ThumbEnabled
- ThumbPosition to 4
- Tick Visible
|
|
|
|
8
|
Adding Background Image
Instead of drawing on a plain canvas, let's add a background template image on the drawing board such as a house, car, ship etc. We will fill colors and make the plain image colorful.
- Click on any one the respective templates below to get the image file
- Click on Drawing_Board
- Click on Background Image and Upload the Downloaded File
Choose and Download any one
House Robot Car Beach Ship
|
|
|
|
9
|
Coding the App
So the User Interface of the app has been developed. Now, Let’s move on to develop code for the app. On Top Right corner click on Blocks
|
|
|
|
10
|
Adding when Line_Width_Slider.PositionChanged block
Now we have to read the position of slider to set the width of the line so we shall add when Line_Width_Slider .PositionChanged block as well
- Go to Blocks section
- Click on Line_Width_Slider
- Drag and Drop when Line_Width_Slider .PositionChanged block in the viewer panel.
|
|
|
|
11
|
Adding block that sets the line width
- Go to Blocks section
- Click on Drawing_Board
- Drag and Drop set Drawing_Board.LineWidth to block inside when Line_Width_Slider .PositionChanged block
|
|
|
|
12
|
Adding Thumb Position Block
Now Let's get the Thumb Position also known as the slider position and set that as the width
Click on thumbPosition to and drag and drop get thumbPosition block
to set Drawing_Board.LineWidth to block
|
|
|
|
13
|
Adding Drawing Board.Touch blocck
We would like to construct a circle with a single touch. So we have add the respective block that gets triggered when Drawing_Board is Touched
- Go to Blocks section
- Click on Drawing_Board
- Drag and Drop when Drawing_Board.Touched to block in the viewer panel.
|
|
|
|
14
|
Adding Functionality for the block
Let's add the block that draws a circle on the Drawing_board with radius as the position of the Circle_Radius_Slider
- Go to Blocks section
- Click on Drawing_Board
- Drag and Drop call Drawing_Board .DrawCircle and set centerX and centerY as X and Y blocks, by clicking on X and Y present in when Drawing_Board.Touched
- Go to Blocks Section
- Click on Circle_Radius_Slider
- Drag and Drop Circle_Radius_Slider. ThumbPosition to radius of call Drawing_Board .DrawCircle block
- Go to Logic in blocks section Drag and Drop True Block to fill in call Drawing_Board .DrawCircle block
|
|
|
|
15
|
Testing The App
- Now the developing part has been completed. Let’s test it on our android mobile.
- Go to Connect in task bar present on the top then select AI companion
- Now scan the QR code using your MIT Ai2 Companion android app by clicking on scan QR code
Once connected, try drawing doodles on the image with different colors, use sliders to adjust line width, circle radius and save the image
|
|
|
|
16
|
Download Final Project File
- Click on the Download button to download the final project file with all the code and User Interface.
- A file called Advanced_Digital_Doodle.aia will be downloaded.
- You can import this project file into your MIT App Inventor by going to File -> Import project (.aia) from my computer.
Download
|
|
|
|
|
-4.jpg&h=240&w=600&zc=1)
-5.jpg&h=240&w=600&zc=1)
