diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index f1f6c55..0000000
--- a/Gemfile
+++ /dev/null
@@ -1,22 +0,0 @@
-source "https://rubygems.org"
-ruby RUBY_VERSION
-
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-# bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem "jekyll", "3.7.3"
-gem "rouge", "3.1.1"
-
-# If you have any plugins, put them here!
-group :jekyll_plugins do
- gem "jekyll-redirect-from", "~> 0.13"
- gem "jekyll-feed", "~> 0.9"
-end
-
-# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
-gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index 9914379..0000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,74 +0,0 @@
-GEM
- remote: https://rubygems.org/
- specs:
- addressable (2.5.2)
- public_suffix (>= 2.0.2, < 4.0)
- colorator (1.1.0)
- concurrent-ruby (1.0.5)
- em-websocket (0.5.1)
- eventmachine (>= 0.12.9)
- http_parser.rb (~> 0.6.0)
- eventmachine (1.2.5)
- ffi (1.9.23)
- forwardable-extended (2.6.0)
- http_parser.rb (0.6.0)
- i18n (0.9.5)
- concurrent-ruby (~> 1.0)
- jekyll (3.7.3)
- addressable (~> 2.4)
- colorator (~> 1.0)
- em-websocket (~> 0.5)
- i18n (~> 0.7)
- jekyll-sass-converter (~> 1.0)
- jekyll-watch (~> 2.0)
- kramdown (~> 1.14)
- liquid (~> 4.0)
- mercenary (~> 0.3.3)
- pathutil (~> 0.9)
- rouge (>= 1.7, < 4)
- safe_yaml (~> 1.0)
- jekyll-feed (0.9.3)
- jekyll (~> 3.3)
- jekyll-redirect-from (0.13.0)
- jekyll (~> 3.3)
- jekyll-sass-converter (1.5.2)
- sass (~> 3.4)
- jekyll-watch (2.0.0)
- listen (~> 3.0)
- kramdown (1.16.2)
- liquid (4.0.0)
- listen (3.1.5)
- rb-fsevent (~> 0.9, >= 0.9.4)
- rb-inotify (~> 0.9, >= 0.9.7)
- ruby_dep (~> 1.2)
- mercenary (0.3.6)
- pathutil (0.16.1)
- forwardable-extended (~> 2.6)
- public_suffix (3.0.2)
- rb-fsevent (0.10.3)
- rb-inotify (0.9.10)
- ffi (>= 0.5.0, < 2)
- rouge (3.1.1)
- ruby_dep (1.5.0)
- safe_yaml (1.0.4)
- sass (3.5.6)
- sass-listen (~> 4.0.0)
- sass-listen (4.0.0)
- rb-fsevent (~> 0.9, >= 0.9.4)
- rb-inotify (~> 0.9, >= 0.9.7)
-
-PLATFORMS
- ruby
-
-DEPENDENCIES
- jekyll (= 3.7.3)
- jekyll-feed (~> 0.9)
- jekyll-redirect-from (~> 0.13)
- rouge (= 3.1.1)
- tzinfo-data
-
-RUBY VERSION
- ruby 2.3.1p112
-
-BUNDLED WITH
- 1.16.1
diff --git a/README.md b/README.md
deleted file mode 100644
index 94cee64..0000000
--- a/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Codebar Android Workshop Resources
-
-## Getting started
-
-This is a [GitHub Pages](https://pages.github.com/) repo, so you can render the pages with [Jekyll](https://jekyllrb.com/). First make sure to [install Ruby](https://www.ruby-lang.org/en/documentation/installation/) and then the [bundler](https://bundler.io/) gem. Then:
-
-1. `bundle install`, which will install Jekyll.
-2. `bundle exec jekyll serve --watch`
-3. go to
-
-You are now ready to make changes!
-
-You could also use your favorite manager, `chruby`, `rbenv`, `rvm`, etc. For [RVM](https://rvm.io/rvm/install), follow the [quick installation guide](https://rvm.io/rvm/install#quick-guided-install) and then run:
-
-```bash
-$ rvm install 2.2.1 # inside `codebar/tutorials` folder
-$ rvm gemset use codebar-tutorial --create
-$ gem install bundler
-$ bundle install
-$ jekyll serve # go to http://127.0.0.1:4000/android-tutorials/
-```
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index 7090d0a..0000000
--- a/_config.yml
+++ /dev/null
@@ -1,32 +0,0 @@
-# Welcome to Jekyll!
-#
-# This config file is meant for settings that affect your whole blog, values
-# which you are expected to set up once and rarely edit after that. If you find
-# yourself editing this file very often, consider using Jekyll's data files
-# feature for the data you need to update frequently.
-#
-# For technical reasons, this file is *NOT* reloaded automatically when you use
-# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
-
-# Site settings
-# These are used to personalize your new site. If you look in the HTML files,
-# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
-# You can create any custom variable you would like, and they will be accessible
-# in the templates via {{ site.myvariable }}.
-title: Codebar Android Workshop Resources
-email: londom@codebar.io
-baseurl: "/android-tutorials" # the subpath of your site, e.g. /blog
-url: "https://codebar.github.io" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
-github_username: jekyll
-
-# Build settings
-markdown: kramdown
-highlighter: rouge
-
-plugins:
- - jekyll-feed
- - jekyll-redirect-from
-exclude:
- - Gemfile
- - Gemfile.lock
diff --git a/_layouts/default.html b/_layouts/default.html
deleted file mode 100644
index 3a267e9..0000000
--- a/_layouts/default.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Firstly, we’re going to implement the different activity lifecycle methods. Android Studio has a lot of keyboard shortcuts which will write a lot of the code for us! On Mac OS Z press cmd+n and on Windows press Alt+Insert . Here you can select Override methods and find the methods listed above.
+
We’re then going to write ourselves some Log messages. If you’ve ever written any JavaScript, this is the same as console.log. These we can check in the Android Monitor (probably a button at the bottom of your window in Android Studio) which methods are being called.
+
When you first look in the Android Monitor, you’ll notice a lot of messages coming through. We can filter out which ones we care about by using a tag, like so:
+
+
As you write a log message inside each method, speak to your coach about when you think this might get called!
+
+
+
this is what my code looks like
+
+
Run this on a real device (or an emulator) and test it out and answer with your coach the following questions:
+
+
What methods get called when the app first starts up?
+
What methods get called if I go home and come back into the app?
+
What methods get called if I kill the app, and then open it again?
+
+
3. Gotchas
+
Which methods get called if you rotate your device?
+
Is that what you expected?
+
What other things could you do to your device that might destroy and re-create your activity? (Hint: changing the language)
+
Speak to your coach about your coach and see where they’ve learned the hard way about the activity lifecycle! Has it ever caused an app they’ve written to crash, or behave in a way they didn’t intend?
+
4. Pop quiz
+
For the following questions, do you think they are true or false?
+
+
After onCreate, the activity is now visible to the user to interact with.
+
onStart always gets called every time the user comes back into the activity.
+
onResume always gets called when you return to the activity, regardless of whether you killed the activity or just briefly left it.
+
an activity in onPause can still be visible on the screen.
+
onDestroy is the best place to save anything a user did so they can see it when they come back.
Firstly, we’re going to implement the different activity lifecycle methods. Android Studio has a lot of keyboard shortcuts which will write a lot of the code for us! On Mac OS Z press cmd+n and on Windows press Alt+Insert . Here you can select Override methods and find the methods listed above.
+
We’re then going to write ourselves some Log messages. If you’ve ever written any JavaScript, this is the same as console.log. These we can check in the Android Monitor (probably a button at the bottom of your window in Android Studio) which methods are being called.
+
When you first look in the Android Monitor, you’ll notice a lot of messages coming through. We can filter out which ones we care about by using a tag, like so:
+
+
As you write a log message inside each method, speak to your coach about when you think this might get called!
+
+
+
this is what my code looks like
+
+
Run this on a real device (or an emulator) and test it out and answer with your coach the following questions:
+
+
What methods get called when the app first starts up?
+
What methods get called if I go home and come back into the app?
+
What methods get called if I kill the app, and then open it again?
+
+
3. Gotchas
+
Which methods get called if you rotate your device?
+
Is that what you expected?
+
What other things could you do to your device that might destroy and re-create your activity? (Hint: changing the language)
+
Speak to your coach about your coach and see where they’ve learned the hard way about the activity lifecycle! Has it ever caused an app they’ve written to crash, or behave in a way they didn’t intend?
+
4. Pop quiz
+
For the following questions, do you think they are true or false?
+
+
After onCreate, the activity is now visible to the user to interact with.
+
onStart always gets called every time the user comes back into the activity.
+
onResume always gets called when you return to the activity, regardless of whether you killed the activity or just briefly left it.
+
an activity in onPause can still be visible on the screen.
+
onDestroy is the best place to save anything a user did so they can see it when they come back.
\ No newline at end of file
diff --git a/worksheets/1-introduction/images/1_completed.png b/docs/docs/assets/cookie-clicker-java/1_completed.png
similarity index 100%
rename from worksheets/1-introduction/images/1_completed.png
rename to docs/docs/assets/cookie-clicker-java/1_completed.png
diff --git a/worksheets/1-introduction/images/2_new_project.png b/docs/docs/assets/cookie-clicker-java/2_new_project.png
similarity index 100%
rename from worksheets/1-introduction/images/2_new_project.png
rename to docs/docs/assets/cookie-clicker-java/2_new_project.png
diff --git a/worksheets/1-introduction/images/3_new_activity.png b/docs/docs/assets/cookie-clicker-java/3_new_activity.png
similarity index 100%
rename from worksheets/1-introduction/images/3_new_activity.png
rename to docs/docs/assets/cookie-clicker-java/3_new_activity.png
diff --git a/worksheets/1-introduction/images/4_cookie_finder.png b/docs/docs/assets/cookie-clicker-java/4_cookie_finder.png
similarity index 100%
rename from worksheets/1-introduction/images/4_cookie_finder.png
rename to docs/docs/assets/cookie-clicker-java/4_cookie_finder.png
diff --git a/worksheets/1-introduction/images/5_android_studio_layout.png b/docs/docs/assets/cookie-clicker-java/5_android_studio_layout.png
similarity index 100%
rename from worksheets/1-introduction/images/5_android_studio_layout.png
rename to docs/docs/assets/cookie-clicker-java/5_android_studio_layout.png
diff --git a/worksheets/1-introduction/images/6_autocomplete.png b/docs/docs/assets/cookie-clicker-java/6_autocomplete.png
similarity index 100%
rename from worksheets/1-introduction/images/6_autocomplete.png
rename to docs/docs/assets/cookie-clicker-java/6_autocomplete.png
diff --git a/worksheets/1-introduction/images/7_toast_code.png b/docs/docs/assets/cookie-clicker-java/7_toast_code.png
similarity index 100%
rename from worksheets/1-introduction/images/7_toast_code.png
rename to docs/docs/assets/cookie-clicker-java/7_toast_code.png
diff --git a/worksheets/1-introduction/images/8_final_code_alt.png b/docs/docs/assets/cookie-clicker-java/8_final_code_alt.png
similarity index 100%
rename from worksheets/1-introduction/images/8_final_code_alt.png
rename to docs/docs/assets/cookie-clicker-java/8_final_code_alt.png
diff --git a/worksheets/espresso-testing/images/all_tests_passing.png b/docs/docs/assets/espresso/all_tests_passing.png
similarity index 100%
rename from worksheets/espresso-testing/images/all_tests_passing.png
rename to docs/docs/assets/espresso/all_tests_passing.png
diff --git a/worksheets/espresso-testing/images/test_failing.png b/docs/docs/assets/espresso/test_failing.png
similarity index 100%
rename from worksheets/espresso-testing/images/test_failing.png
rename to docs/docs/assets/espresso/test_failing.png
diff --git a/worksheets/espresso-testing/images/test_passing.png b/docs/docs/assets/espresso/test_passing.png
similarity index 100%
rename from worksheets/espresso-testing/images/test_passing.png
rename to docs/docs/assets/espresso/test_passing.png
diff --git a/worksheets/0-setup/assets/images/android-device-developer-mode.gif b/docs/docs/assets/setup/android-device-developer-mode.gif
similarity index 100%
rename from worksheets/0-setup/assets/images/android-device-developer-mode.gif
rename to docs/docs/assets/setup/android-device-developer-mode.gif
diff --git a/worksheets/0-setup/assets/images/android-studio-welcome.png b/docs/docs/assets/setup/android-studio-welcome.png
similarity index 100%
rename from worksheets/0-setup/assets/images/android-studio-welcome.png
rename to docs/docs/assets/setup/android-studio-welcome.png
diff --git a/worksheets/0-setup/assets/images/emulator-1-type.png b/docs/docs/assets/setup/emulator-1-type.png
similarity index 100%
rename from worksheets/0-setup/assets/images/emulator-1-type.png
rename to docs/docs/assets/setup/emulator-1-type.png
diff --git a/worksheets/0-setup/assets/images/emulator-2-version.png b/docs/docs/assets/setup/emulator-2-version.png
similarity index 100%
rename from worksheets/0-setup/assets/images/emulator-2-version.png
rename to docs/docs/assets/setup/emulator-2-version.png
diff --git a/worksheets/0-setup/assets/images/emulator-3-list.png b/docs/docs/assets/setup/emulator-3-list.png
similarity index 100%
rename from worksheets/0-setup/assets/images/emulator-3-list.png
rename to docs/docs/assets/setup/emulator-3-list.png
diff --git a/worksheets/0-setup/assets/images/emulator-4-complete.png b/docs/docs/assets/setup/emulator-4-complete.png
similarity index 100%
rename from worksheets/0-setup/assets/images/emulator-4-complete.png
rename to docs/docs/assets/setup/emulator-4-complete.png
diff --git a/worksheets/0-setup/assets/images/first-project-1-name.png b/docs/docs/assets/setup/first-project-1-name.png
similarity index 100%
rename from worksheets/0-setup/assets/images/first-project-1-name.png
rename to docs/docs/assets/setup/first-project-1-name.png
diff --git a/worksheets/0-setup/assets/images/first-project-2-version.png b/docs/docs/assets/setup/first-project-2-version.png
similarity index 100%
rename from worksheets/0-setup/assets/images/first-project-2-version.png
rename to docs/docs/assets/setup/first-project-2-version.png
diff --git a/worksheets/0-setup/assets/images/first-project-3-activity.png b/docs/docs/assets/setup/first-project-3-activity.png
similarity index 100%
rename from worksheets/0-setup/assets/images/first-project-3-activity.png
rename to docs/docs/assets/setup/first-project-3-activity.png
diff --git a/worksheets/0-setup/assets/images/first-project-4-complete.png b/docs/docs/assets/setup/first-project-4-complete.png
similarity index 100%
rename from worksheets/0-setup/assets/images/first-project-4-complete.png
rename to docs/docs/assets/setup/first-project-4-complete.png
diff --git a/worksheets/0-setup/assets/images/run-1-chooser.png b/docs/docs/assets/setup/run-1-chooser.png
similarity index 100%
rename from worksheets/0-setup/assets/images/run-1-chooser.png
rename to docs/docs/assets/setup/run-1-chooser.png
diff --git a/worksheets/0-setup/assets/images/run-2-running.png b/docs/docs/assets/setup/run-2-running.png
similarity index 100%
rename from worksheets/0-setup/assets/images/run-2-running.png
rename to docs/docs/assets/setup/run-2-running.png
diff --git a/docs/docs/cookie-clicker-java.html b/docs/docs/cookie-clicker-java.html
new file mode 100644
index 0000000..5a8633d
--- /dev/null
+++ b/docs/docs/cookie-clicker-java.html
@@ -0,0 +1,161 @@
+Cookie Clicker (Java) · codebar android tutorials
The aim of this worksheet is to create a cookie clicker game, with a cookie image that can be tapped to increase the score.
+
To follow this tutorial, you will need to [get set up for Android development]({{ site.baseurl }}/setup). Please note, this involves downloading a large file, so our advice is to run through and install everything before arriving at the workshop. If you have problems, just get as far as you can and a coach can help you finish it off.
+
Feel free to chose a different topic other than cookies, we really like the popular pokémon Goomy Clicker - http://joezeng.github.io/goomyclicker what things do you like?
+
+
2. Create New Project
+
+
+
Set the name of your app, this is what people will see when they install your app. The company name, and the resulting package name, is how Google keeps track of apps - it needs to be unique, so maybe use something with your name?
+
+
Next, we set the SDK level to 14 - It'll give you a helpful guide for how many people this supports. Speak to your coach about what minimum sdk level they usually have to use.
+
Finally, we want to create an Empty Activity
+
+
+
We are going to keep the default of MainActivity.java and activity_main.xml :smile:
+
+
click FINISH (this might take some time)
+
Take some time to look at the different buttons with your coach - where are the different files located in the project? How do you run your app in an emulator or on a device?
+
3. Layouts
+
Next, we want to open our layout file. On the left find the res folder and open layout. You should be able to double click on the activity_main.xml and open it.
+
Layouts open in 'design' mode. This gives you some tools to make layouts with a graphical interface, but it's more common to write layouts by hand using the text editor. If you're familiar with Dreamweaver, it's a similar “What you see is what you get” (WYSIWYG) vs code situation.
+
We're going to be dealing with the XML directly in this tutorial, so find the 'text' tab in the bottom left corner of the design window.
+
Now you should see some code that looks familiar-ish! Android layouts using XML, which is very very similar to HTML. You should see already we have a <RelativeLayout> and a <TextView> tag, with some attributes already there. The thing that looks weird is that all the attributes currently are prefixed with the word android.
+
At the moment Android Studio creates a constraint layout by default. These are bit more complicated to start with. So let's delete everything that's there and put this instead:
One of the most important features of our cookie clicker will be our cookie - we can create an <ImageView>, you will need to provide a height and a width. We also need to provide it an id so we can connect to it later.
id’s need to start with @+id/ - the plus symbol means it assigns the variable name to the current ImageView
+
+
In Android we don't use pixels, but instead use dp which is a device point. 1 point might be 1 pixel on a really low resolution device, but might be 4 pixels, or even 8 pixels on a newer device. Take a look at this handy guide Android wrote for more information https://developer.android.com/guide/practices/screens_support.html .
+
Next, we want to save the following cookie image into our project. You can either google for a cookie image that's free to use, or use ours that we found earlier = http://imgur.com/a/9BXV4 . You need to save it inside your project folder using Windows Explorer or Mac OSX Finder and navigate to the following -> app -> src -> main -> res . You need to create a folder called drawable-xhdpi and place your cookie image in here!
+
Because android has different density devices, we usually need to provide different resolution images for all those different devices. If we only provide it in one folder, Android will scale the image for other devices, but this might cause make the image look bad!
+
+
If we want to then use that image in our Android app we can use an attribute android:src="@drawable/cookie" - autocomplete will be your friend here!
+
Because we have a RelativeLayout parent this means we can do some special things to position our cookie on our screen. We can provide an attribute like android:layout_centerInParent="true".
+
Next, we want to look at having a TextView for to keep track of how many cookies we've clicked. Again you need to provide it a height, width, and id. But we can also provide it some special label things, such as text, textColor, or textSize
+
Another neat feature of using a RelativeLayout is how we can position things in relation to other things. So we can say that this TextView should appearAbove the image's id. In order for this to work, the TextView needs to know where the ImageView is, so the code for the TextView needs to go below the ImageView.
+
+
+
this is how our layout code finally looked :smile:
Next, we want to make it so our cookie actually does something when it's been clicked on!
+
We want to open our MainActivity.java file and take a look at what's there already. What do you think the onCreate method might do? Speak to your coach about what other methods get called in the activity lifecycle. For more information look at https://developer.android.com/training/basics/activity-lifecycle/index.html .
+
Inside the onCreate method, below where it sets the layout to the xml file we just finished designing. We want to create a variable called imgCookie and findViewById to hook them up. This is similar to how we use jQuery in JavaScript to hook up with a HTML element
After, we can set an onClickListener, which is again similar to the JavaScript element.click() method. The trick with Android Studio is to let it write as much code as possible, it has an extremely powerful auto completer! When you start typing onClickListener, you should see a suggestion with curly brackets on it. If you press tab at this point, it'll auto complete the entire code that you need!
+
+
Inside our method we're going to put a Toast. These are those little messages at the bottom of the phone that show for a short period of time. They're really good!
+
+
Run your app now, and see what happens when you tap on the cookie!
+
5. Game Logic
+
Next, we want to make it so that when the image is clicked we increment a score. We need to create a private variable int called currentScore and set initially set it to 0.
+
When we click on the image, we need to increment the score by 1. For now, we can use our toast to see how much our current score is:
Toast messages are super useful for whilst we’re building the app, but people playing probably don’t want that. Let’s go about hooking it up to our TextView.
+
Firstly, we need to make a variable called lblTotal and set it to our TextView just like how we set up our ImageView.
+
Next, inside our imgCookie onClick, we can do lblTotal.setText to set our current counter. However we can’t do this directly; our currentScore is an int (number), and the lblTotal can only display a String (text). So we need to do String.valueOf to convert it!
+
+
6. More Advanced Game Logic
+
Now is the time to get creative! What other things would make your game yours. Maybe you could get the cookie picture to change when you get to specific numbers using an if statement, e.g. after 10, 20, 30 … etc. Or how about getting more advanced and using a log scale e.g. after 10, 100, 100 cookies.
+
7. Extra Credit
+
If you want to take your cookie game clicker onwards, maybe consider:
+
+
Things people can spend their cookies on to get cookies for them without clicking, such as using timers
+
Use something like firebase to have high scores, or allow people to sign in and save their cookies
The aim of this worksheet is to create a cookie clicker game, with a cookie image that can be tapped to increase the score.
+
To follow this tutorial, you will need to [get set up for Android development]({{ site.baseurl }}/setup). Please note, this involves downloading a large file, so our advice is to run through and install everything before arriving at the workshop. If you have problems, just get as far as you can and a coach can help you finish it off.
+
Feel free to chose a different topic other than cookies, we really like the popular pokémon Goomy Clicker - http://joezeng.github.io/goomyclicker what things do you like?
+
+
2. Create New Project
+
+
+
Set the name of your app, this is what people will see when they install your app. The company name, and the resulting package name, is how Google keeps track of apps - it needs to be unique, so maybe use something with your name?
+
+
Next, we set the SDK level to 14 - It'll give you a helpful guide for how many people this supports. Speak to your coach about what minimum sdk level they usually have to use.
+
Finally, we want to create an Empty Activity
+
+
+
We are going to keep the default of MainActivity.java and activity_main.xml :smile:
+
+
click FINISH (this might take some time)
+
Take some time to look at the different buttons with your coach - where are the different files located in the project? How do you run your app in an emulator or on a device?
+
3. Layouts
+
Next, we want to open our layout file. On the left find the res folder and open layout. You should be able to double click on the activity_main.xml and open it.
+
Layouts open in 'design' mode. This gives you some tools to make layouts with a graphical interface, but it's more common to write layouts by hand using the text editor. If you're familiar with Dreamweaver, it's a similar “What you see is what you get” (WYSIWYG) vs code situation.
+
We're going to be dealing with the XML directly in this tutorial, so find the 'text' tab in the bottom left corner of the design window.
+
Now you should see some code that looks familiar-ish! Android layouts using XML, which is very very similar to HTML. You should see already we have a <RelativeLayout> and a <TextView> tag, with some attributes already there. The thing that looks weird is that all the attributes currently are prefixed with the word android.
+
At the moment Android Studio creates a constraint layout by default. These are bit more complicated to start with. So let's delete everything that's there and put this instead:
One of the most important features of our cookie clicker will be our cookie - we can create an <ImageView>, you will need to provide a height and a width. We also need to provide it an id so we can connect to it later.
id’s need to start with @+id/ - the plus symbol means it assigns the variable name to the current ImageView
+
+
In Android we don't use pixels, but instead use dp which is a device point. 1 point might be 1 pixel on a really low resolution device, but might be 4 pixels, or even 8 pixels on a newer device. Take a look at this handy guide Android wrote for more information https://developer.android.com/guide/practices/screens_support.html .
+
Next, we want to save the following cookie image into our project. You can either google for a cookie image that's free to use, or use ours that we found earlier = http://imgur.com/a/9BXV4 . You need to save it inside your project folder using Windows Explorer or Mac OSX Finder and navigate to the following -> app -> src -> main -> res . You need to create a folder called drawable-xhdpi and place your cookie image in here!
+
Because android has different density devices, we usually need to provide different resolution images for all those different devices. If we only provide it in one folder, Android will scale the image for other devices, but this might cause make the image look bad!
+
+
If we want to then use that image in our Android app we can use an attribute android:src="@drawable/cookie" - autocomplete will be your friend here!
+
Because we have a RelativeLayout parent this means we can do some special things to position our cookie on our screen. We can provide an attribute like android:layout_centerInParent="true".
+
Next, we want to look at having a TextView for to keep track of how many cookies we've clicked. Again you need to provide it a height, width, and id. But we can also provide it some special label things, such as text, textColor, or textSize
+
Another neat feature of using a RelativeLayout is how we can position things in relation to other things. So we can say that this TextView should appearAbove the image's id. In order for this to work, the TextView needs to know where the ImageView is, so the code for the TextView needs to go below the ImageView.
+
+
+
this is how our layout code finally looked :smile:
Next, we want to make it so our cookie actually does something when it's been clicked on!
+
We want to open our MainActivity.java file and take a look at what's there already. What do you think the onCreate method might do? Speak to your coach about what other methods get called in the activity lifecycle. For more information look at https://developer.android.com/training/basics/activity-lifecycle/index.html .
+
Inside the onCreate method, below where it sets the layout to the xml file we just finished designing. We want to create a variable called imgCookie and findViewById to hook them up. This is similar to how we use jQuery in JavaScript to hook up with a HTML element
After, we can set an onClickListener, which is again similar to the JavaScript element.click() method. The trick with Android Studio is to let it write as much code as possible, it has an extremely powerful auto completer! When you start typing onClickListener, you should see a suggestion with curly brackets on it. If you press tab at this point, it'll auto complete the entire code that you need!
+
+
Inside our method we're going to put a Toast. These are those little messages at the bottom of the phone that show for a short period of time. They're really good!
+
+
Run your app now, and see what happens when you tap on the cookie!
+
5. Game Logic
+
Next, we want to make it so that when the image is clicked we increment a score. We need to create a private variable int called currentScore and set initially set it to 0.
+
When we click on the image, we need to increment the score by 1. For now, we can use our toast to see how much our current score is:
Toast messages are super useful for whilst we’re building the app, but people playing probably don’t want that. Let’s go about hooking it up to our TextView.
+
Firstly, we need to make a variable called lblTotal and set it to our TextView just like how we set up our ImageView.
+
Next, inside our imgCookie onClick, we can do lblTotal.setText to set our current counter. However we can’t do this directly; our currentScore is an int (number), and the lblTotal can only display a String (text). So we need to do String.valueOf to convert it!
+
+
6. More Advanced Game Logic
+
Now is the time to get creative! What other things would make your game yours. Maybe you could get the cookie picture to change when you get to specific numbers using an if statement, e.g. after 10, 20, 30 … etc. Or how about getting more advanced and using a log scale e.g. after 10, 100, 100 cookies.
+
7. Extra Credit
+
If you want to take your cookie game clicker onwards, maybe consider:
+
+
Things people can spend their cookies on to get cookies for them without clicking, such as using timers
+
Use something like firebase to have high scores, or allow people to sign in and save their cookies
To make sure your software works properly you need to test it whenever you make a change that you want to release to your users. To do this manually for even a small app this is a boring, repetitive, and time-consuming job. That's precisely the sort of thing which we use computers for! Automated tests are pieces of code which test that your software is working correctly. You can set them up to run regularly and on many devices so you don't have to manually test your app every time you make a change. Plus they're usually simple and fun to create!
+
We are going to write some UI tests for our cookie clicker app. A UI test is also known as a "functional test" as it is testing the functionality of the app. There are other types of tests such as "unit tests" which you may have come across in the Javascript, Ruby, or Python tutorials.
+
A UI test will take a set of instructions about what to click on and checks that the application responds correctly. For example, on a sign in screen you might have an espresso test to check that an error appears if you enter an email address with the wrong format. UI tests are doing the same thing as if you were clicking on and testing the app manually, but they can do it much quicker, and they don't get bored when they have to do it for the 100th time!
+
First, we need to set up our testing framework.
+
Setting up Espresso
+
We are going to be using a testing framework called Espresso to interact with our app and test that it is working correctly. This is a tool provided by Google themselves.
+
First, we need to make sure the libraries are installed correctly.
+
In Android Studio, expand the Gradle Scripts section at the bottom of the project explorer on the left. Then double click to open the build.gradle (Module: app) file. Make sure it's the Module: app one and not the Project: CookieClicker one. This is the file which describes how to build and run our Android application. We need to make sure everything is set up correctly here to let us use Espresso.
+
Inside the dependencies section, make sure that these two blocks of code are there:
They might already be there depending on how you created your project. If they aren't, add them in. These lines tell the Android build system which version of the Espresso library to use.
+
Also, make sure that this line is in your android.defaultConfig section:
The complete file should look something like this (Don't copy this as some of your settings will need to be left as they were before. Also, don't worry if yours has some extra bits. Ask your coach if you aren't sure if you have done it correctly):
Press the Sync Now button in the golden yellow bar which has appeared along the top of the code editor window. If the bar disappears after syncing, then everything is set up correctly! If the bar shows and error message and a Try Again button then something has gone wrong. Take a look at the error at the bottom of the screen to see if you can fix it, or ask your coach for help.
+
Writing our first test
+
Now we have everything set up; we can write our first test!
+
In the project navigator on the left panel of Android Studio, navigate through app -> java -> <package name> (androidTest) where <package name> is the name you used when you set up the project. Right click on the (androidTest) line and choose New -> Java Class. In the window which pops up, give it a name of CookieClickerTest and then press OK. This will create and open a file which looks like this:
Remember to use the autocomplete as much as possible as it will also add in some import lines above for you. This line tells Android how to run the tests we are about to write.
+
Inside the class add the following line:
+
@Rule
+public ActivityTestRule<MainActivity> activityTestRule = new ActivityTestRule<>(MainActivity.class);
+
+
This is a "test rule" and test Espresso which activity (part of our app) we want to test. We have chosen the MainActivity. This rule will make Espresso open this activity before running our test so we can see the cookie clicker and test it is working.
+
We now need to actually write some test code. Inside the class, create a new method called totalStartsAtZero. It should look like this:
We will be writing one of these methods for each test that we want to perform. As you can guess from the name, we are first going to check that the counter starts off at zero.
So what are we doing here? The first line (onView) is finding the view which matches the requirements we have given to it. We have asked for the view with the id of lblTotal using withId(R.id.lblTotal). Remember that this is the id we gave to our TextView in the first tutorial in the activity_main.xml layout file. The second line is checking that the view matches some conditions. We are checking that the view has the text "0" using withText("0").
+
This pattern of getting the view with a set of requirements and then checking something with it forms the basis of how Espresso tests work.
+
The completed test file should now look like this (remember, don't copy this directly as some of your code (such as the package name) need to be different. As your coach if you are not sure):
Let's run our test to make sure the app is working correctly. Press the "play" button to the left of the method and pick your Android device or emulator to run the tests on. This might take a short amount of time but the app should appear and then quickly disappear, and Android Studio should show a "Tests passed" message. This might even be too quick to see, and that's the advantage of using automated tests! Run it a few times if you want to test it is working all the time.
+
+
Just to see what happens when a test fails, change the check to look for "1" and run the test again. You should see an error message saying what happened and some hints on how to fix it. There's a lot of information there, but there's normally enough to know what went wrong.
+
+
Change you test back to check for "0" so that it passes again.
+
Tapping on the cookie
+
We should now do something a little more interesting with our tests. We are going to test that pressing on the cookie increases our total counter.
+
Create a new method called totalIncreasesWhenCookieClicked. Inside this method add the following code:
This looks similar to the code before, except this time we are performing an action rather than checking something. The first line finds the view with the id imgCookie (take a look at your activity-main.xml file if you can't remember which view this was). The second line then performs a click action on it. This will call our OnClickListener in our MainActivity.java file and should update the total label. We now need to write a check for that.
+
To do this, add in these lines to the new test method:
Let's run this new test using the play icon next to the totalIncreasesWhenCookieClicked method line. This test should take just long enough for you to see the 1 on the screen, but it's still so fast that you might blink and miss it!
+
+
Aside: Breakpoints
+
If the test is running too fast and you would like to see what is happening clearly, you can try using a _breakpoint_. A breakpoint is a marker which tells the application to pause at a particular line of code so you can see what it is doing. They are very useful for debugging your apps!
+
To set a breakpoint, click in the margin to the left of the line of code you would like the test to stop on. The first line of the totalIncreasesWhenCookieClicked method is a good place. Then, use the "debug run" button (the one with the bug and play icon to the right of the "play" button you used before).
+
Now when the test runs, it should stop on that line and show the "debugger" panel at the bottom of the Android Studio window. You can use the buttons in that panel to "step" between lines or to continue running. Hover over the buttons to see a tooltip for what they do and ask your coach if you are unsure.
+
+
Getting a high score!
+
We've now tested all the functionality of our app, so now let's do something just for fun: let's make Espresso click loads of times on the cookie and get a high score!
+
Create a new method called achieveHighScore. Copy the code for the click test you just wrote and wrap the code to click on the cookie image into a for-loop from 0 to 100. You then need to check that the total counter has reached "100" after the for-loop has completed. Ask your coach, if you're not sure how to do this, or take a peek at the code below:
+
@Test
+publicvoidachieveHighScore()throws Exception {
+ for (int i = 0; i < 100; i++) {
+ onView(withId(R.id.imgCookie))
+ .perform(click());
+ }
+
+ onView(withId(R.id.lblTotal))
+ .check(matches(withText("100")));
+}
+
+
If you run this test it should take long enough that you can see what's going on.
+
As well as running the tests one by one, you can run all your apps tests by pressing on the "double play" icon next to the public class CookieClickerTest line. This will run all the tests in this file one by one and let you know which ones pass and fail.
+
+
Further information
+
You have now tested your cookie clicker app!
+
You can read more about Android testing using the links below:
You can try extending your cookie clicker and tests by adding an EditText to enter your name, and a button to submit your score. Make sure you write some tests for it too!
To make sure your software works properly you need to test it whenever you make a change that you want to release to your users. To do this manually for even a small app this is a boring, repetitive, and time-consuming job. That's precisely the sort of thing which we use computers for! Automated tests are pieces of code which test that your software is working correctly. You can set them up to run regularly and on many devices so you don't have to manually test your app every time you make a change. Plus they're usually simple and fun to create!
+
We are going to write some UI tests for our cookie clicker app. A UI test is also known as a "functional test" as it is testing the functionality of the app. There are other types of tests such as "unit tests" which you may have come across in the Javascript, Ruby, or Python tutorials.
+
A UI test will take a set of instructions about what to click on and checks that the application responds correctly. For example, on a sign in screen you might have an espresso test to check that an error appears if you enter an email address with the wrong format. UI tests are doing the same thing as if you were clicking on and testing the app manually, but they can do it much quicker, and they don't get bored when they have to do it for the 100th time!
+
First, we need to set up our testing framework.
+
Setting up Espresso
+
We are going to be using a testing framework called Espresso to interact with our app and test that it is working correctly. This is a tool provided by Google themselves.
+
First, we need to make sure the libraries are installed correctly.
+
In Android Studio, expand the Gradle Scripts section at the bottom of the project explorer on the left. Then double click to open the build.gradle (Module: app) file. Make sure it's the Module: app one and not the Project: CookieClicker one. This is the file which describes how to build and run our Android application. We need to make sure everything is set up correctly here to let us use Espresso.
+
Inside the dependencies section, make sure that these two blocks of code are there:
They might already be there depending on how you created your project. If they aren't, add them in. These lines tell the Android build system which version of the Espresso library to use.
+
Also, make sure that this line is in your android.defaultConfig section:
The complete file should look something like this (Don't copy this as some of your settings will need to be left as they were before. Also, don't worry if yours has some extra bits. Ask your coach if you aren't sure if you have done it correctly):
Press the Sync Now button in the golden yellow bar which has appeared along the top of the code editor window. If the bar disappears after syncing, then everything is set up correctly! If the bar shows and error message and a Try Again button then something has gone wrong. Take a look at the error at the bottom of the screen to see if you can fix it, or ask your coach for help.
+
Writing our first test
+
Now we have everything set up; we can write our first test!
+
In the project navigator on the left panel of Android Studio, navigate through app -> java -> <package name> (androidTest) where <package name> is the name you used when you set up the project. Right click on the (androidTest) line and choose New -> Java Class. In the window which pops up, give it a name of CookieClickerTest and then press OK. This will create and open a file which looks like this:
Remember to use the autocomplete as much as possible as it will also add in some import lines above for you. This line tells Android how to run the tests we are about to write.
+
Inside the class add the following line:
+
@Rule
+public ActivityTestRule<MainActivity> activityTestRule = new ActivityTestRule<>(MainActivity.class);
+
+
This is a "test rule" and test Espresso which activity (part of our app) we want to test. We have chosen the MainActivity. This rule will make Espresso open this activity before running our test so we can see the cookie clicker and test it is working.
+
We now need to actually write some test code. Inside the class, create a new method called totalStartsAtZero. It should look like this:
We will be writing one of these methods for each test that we want to perform. As you can guess from the name, we are first going to check that the counter starts off at zero.
So what are we doing here? The first line (onView) is finding the view which matches the requirements we have given to it. We have asked for the view with the id of lblTotal using withId(R.id.lblTotal). Remember that this is the id we gave to our TextView in the first tutorial in the activity_main.xml layout file. The second line is checking that the view matches some conditions. We are checking that the view has the text "0" using withText("0").
+
This pattern of getting the view with a set of requirements and then checking something with it forms the basis of how Espresso tests work.
+
The completed test file should now look like this (remember, don't copy this directly as some of your code (such as the package name) need to be different. As your coach if you are not sure):
Let's run our test to make sure the app is working correctly. Press the "play" button to the left of the method and pick your Android device or emulator to run the tests on. This might take a short amount of time but the app should appear and then quickly disappear, and Android Studio should show a "Tests passed" message. This might even be too quick to see, and that's the advantage of using automated tests! Run it a few times if you want to test it is working all the time.
+
+
Just to see what happens when a test fails, change the check to look for "1" and run the test again. You should see an error message saying what happened and some hints on how to fix it. There's a lot of information there, but there's normally enough to know what went wrong.
+
+
Change you test back to check for "0" so that it passes again.
+
Tapping on the cookie
+
We should now do something a little more interesting with our tests. We are going to test that pressing on the cookie increases our total counter.
+
Create a new method called totalIncreasesWhenCookieClicked. Inside this method add the following code:
This looks similar to the code before, except this time we are performing an action rather than checking something. The first line finds the view with the id imgCookie (take a look at your activity-main.xml file if you can't remember which view this was). The second line then performs a click action on it. This will call our OnClickListener in our MainActivity.java file and should update the total label. We now need to write a check for that.
+
To do this, add in these lines to the new test method:
Let's run this new test using the play icon next to the totalIncreasesWhenCookieClicked method line. This test should take just long enough for you to see the 1 on the screen, but it's still so fast that you might blink and miss it!
+
+
Aside: Breakpoints
+
If the test is running too fast and you would like to see what is happening clearly, you can try using a _breakpoint_. A breakpoint is a marker which tells the application to pause at a particular line of code so you can see what it is doing. They are very useful for debugging your apps!
+
To set a breakpoint, click in the margin to the left of the line of code you would like the test to stop on. The first line of the totalIncreasesWhenCookieClicked method is a good place. Then, use the "debug run" button (the one with the bug and play icon to the right of the "play" button you used before).
+
Now when the test runs, it should stop on that line and show the "debugger" panel at the bottom of the Android Studio window. You can use the buttons in that panel to "step" between lines or to continue running. Hover over the buttons to see a tooltip for what they do and ask your coach if you are unsure.
+
+
Getting a high score!
+
We've now tested all the functionality of our app, so now let's do something just for fun: let's make Espresso click loads of times on the cookie and get a high score!
+
Create a new method called achieveHighScore. Copy the code for the click test you just wrote and wrap the code to click on the cookie image into a for-loop from 0 to 100. You then need to check that the total counter has reached "100" after the for-loop has completed. Ask your coach, if you're not sure how to do this, or take a peek at the code below:
+
@Test
+publicvoidachieveHighScore()throws Exception {
+ for (int i = 0; i < 100; i++) {
+ onView(withId(R.id.imgCookie))
+ .perform(click());
+ }
+
+ onView(withId(R.id.lblTotal))
+ .check(matches(withText("100")));
+}
+
+
If you run this test it should take long enough that you can see what's going on.
+
As well as running the tests one by one, you can run all your apps tests by pressing on the "double play" icon next to the public class CookieClickerTest line. This will run all the tests in this file one by one and let you know which ones pass and fail.
+
+
Further information
+
You have now tested your cookie clicker app!
+
You can read more about Android testing using the links below:
You can try extending your cookie clicker and tests by adding an EditText to enter your name, and a button to submit your score. Make sure you write some tests for it too!
\ No newline at end of file
diff --git a/docs/docs/krumble.html b/docs/docs/krumble.html
new file mode 100644
index 0000000..8086b14
--- /dev/null
+++ b/docs/docs/krumble.html
@@ -0,0 +1,174 @@
+Krumble · codebar android tutorials
Introduction to Kotlin by building a cookie themed tinder
+
The aim of this tutorial is to build a dating like app for cookies! We'll have a list of cookies to either like or dislike!
+
+
Before starting, please ensure you have [Android Studio installed and setup correctly]({{ site.baseurl }}/setup). You can also take the steps now to work out how run your app on a device you may have, for more information check out https://developer.android.com/studio/run/device.html.
+
Also, feel free to pick a different topic than cookies if you prefer. You could pick animals, fruit, or even different little green robots.
+
+
1 Starting a new Android Studio Project
+
Firstly we want to create a new app! With Android Studio open either press Start a new Android Studio project or from the menu go File > New > New Project.
+
+
On the first screen select a good name for your app. This is what people will see when they install your app. I went for crumble because it's similar to bumble but cookie themed.
+
Next we have a field called Company Domain - this is how Google sandboxes your app. You want to ensure this is unique. Talk to your coach about what sandboxing means if you're not sure.
+
Finally on this screen we need to ensure the most important checkbox is ticked for this workshop! Enable Kotlin support!
+
On the proceeding screens, you want to set a Min SDK - this is the minimum version of Android we want to support. You can click on the version number to get more information and see exactly how many people in the world who could install your app!
+
Speak to your coach about what version they have to use at work and the fun they have involved with that!
+
Next, we want to create an Empty Activity. I'd keep the default names of MainActivity and activity_main.
+
Finally you can click finish! This might take some time to actually create everything needed for your shiny new app ✨
+
Take some time to look at the different buttons with your coach - where are the different files located in the project? How do you run your app in an emulator or on your device?
+
2 Layout
+
If you feel confident with layouts already, or would prefer to focus on purely kotlin this time. Copy paste the code in this file https://gist.github.com/daniellevass/aa6d4042b950aaf6c0f2345530e4baa4 into your layout. This will give you all the layout elements we'll use later and move onto section 3 Displaying a cookie!
+
Next, we want to open our layout file. On the left find the res folder and open layout. You should be able to double click on the activity_main.xml and open it.
+
Layouts open in 'design' mode. This gives you some tools to make layouts with a graphical interface, but it's more common to write layouts by hand using the text editor. If you're familiar with Dreamweaver, it's a similar “What you see is what you get” (WYSIWYG) vs code situation.
+
We're going to be dealing with the XML directly in this tutorial, so find the 'text' tab in the bottom left corner of the design window.
+
Now you should see some code that looks familiar-ish! Android layouts using XML, which is very very similar to HTML. You should see already we have a <RelativeLayout> and a <TextView> tag, with some attributes already there. The thing that looks weird is that all the attributes currently are prefixed with the word android or app.
+
At the moment Android Studio creates a constraint layout by default. These are bit more complicated to start with. So let's delete everything that's there and put this instead:
One of the most important features of our cookie clicker will be our cookie - we can create an <ImageView>, you will need to provide a height and a width. We also need to provide it an id so we can connect to it later.
id’s need to start with @+id/ - the plus symbol means it assigns the variable name to the current ImageView
+
+
In Android we don't use pixels, but instead use dp which is a Density-independent Pixel. 1 point might be 1 pixel on a really low resolution device, but might be 4 pixels, or even 8 pixels on a newer device. Take a look at this handy guide Android wrote for more information https://developer.android.com/guide/practices/screens_support.html, you can also check out this stack overflow post https://stackoverflow.com/a/2025541
+
Because we have a RelativeLayout parent this means we can do some special things to position our cookie on our screen. We can provide an attribute like android:layout_centerHorizontal="true".
+
Now that we have our cookie image in position, we want to allow people to see it's name and maybe it's story. Let's create two <TextView>'s for this. Make sure you position them, and give them an id.
+
Finally, we can add two buttons. These are <Button>'s. Again remember to position them and give them an id. How about we have a look at styling these red and green to make them easier for people to click?
+
We can change the background colour by changing the property android:background="#A0D468" and we can provide it a hex value. If you want some inspiration for hex colours check out https://material.io/guidelines/style/color.html
Next, we're going to look at the other file that was created MainActivity.kt. An activity is like a page on a website. You'll need a separate activity for any new pages in your app.
Inside our onCreate, we want to connect to our interface elements. Below is what you'll need to type to connect to our ImageView imgCookie. Have a go at writing the connections for our TextViews for lblName and lblStory.
+
var imgCookie:ImageView = findViewById(R.id.imgCookie)
+
+
+
val and var
+You'll notice we created a var for our imgCookie. Var is short for variable, which is something that can change. If our thing is never going to change we can make it a val which is short for value.
+You'll also note that unlike Java, we don't need to end our code sentence with a semicolon.
+
+
Next we can set some values up for our cookie. This is called hardcoding, where we're writing up values into our code. We're going to make this better soon!
+
For the image, you can either google for a cookie image that's free to use, or use ours that we found earlier = http://imgur.com/a/9BXV4 . You need to save it inside your project folder using Windows Explorer or Mac OSX Finder and navigate to the following -> app -> src -> main -> res . You need to create a folder called drawable-xhdpi and place your cookie image in here! You also need to be careful about how you name your cookie; stick to lowercase letters and underscores e.g. peanut_cookie. Speak to your coach about the why there are so many different folders
+
+
Make sure you run this on either an emulator or your own device to see it working!
+
+
4 Cookie Class
+
So we've now determined that our cookie has a set of properties. We can create a class to hold these values for us.
+
data classCookie(valname: String, valimage: Int, valstory: String)
+
+
+
Do you notice how we're using val here now. This is because once we create the properties on our cookie object, we don't want to let people change them!
+A data class represents a thing e.g. a cookie. We can have dozens of different cookies that all have the same properties with different values e.g. a name, an image.
+
+
Next, we can create our first cookie object:
+
val cookie = Cookie("Mr Peanut", R.drawable.peanut_cookie,
+ "Loves taking long walks on the beach.")
+
+
We now need to make sure we're using the values from our cookie:
+
+
We can look at refactoring this a bit. We can create a function to show a Cookie, where we can pass a cookie to show as a parameter. This will make it a lot easier to show a different cookie when we make more!
+
+
However, we have a problem! We're currently creating those outlets everytime. There's a better way! let's set them up as variables we can use anywhere in the class. We also need to set them up as lateinit. This is because kotlin doesn't like null, or something that doesn't exist yet. We're telling our Activity these things do exist, but later! They'll exist by the time we want to use them.
+
+
+
5 Liking and Disliking
+
Next, we want to allow people either express their love or hatred for our cookie!
+
Let's set up some outlets for our buttons. We can create a toast message, the little messages that pop up from the bottom of your screen. Run it on your device or emulator to see it working.
+
+
+
here we've created a listener for each of our buttons. These will listen for the button to be clicked, then run the code in thats inside the curley brackets. This is very similar to how a JavaScript onClick works.
+Secondly, our toast contains three things, only one of which is the text message it should say. The first variable is the context, we need to supply where this toast should appear. For us, right now, that's our MainActivity. The final property is how long that message should stay up. We only want to see it for a short time.
+
+
How about, let's extend our cookie class to contain what the cookie might say for either of the options.
+
+
Let's test this out on our emulator or real device to make sure our project still works.
+
+
6 More Cookies!
+
Firstly we're going to create a new function to generate and return us a list of cookies. We can then use those generated cookies in our Activity. We can also delete our hard coded cookie, and just use the first cookie in our list. Lists starts at 0 in Kotlin (as in Java too). Much like how we number building floors in the UK; where ground is 0, floor 1 goes next etc.
+
+
Next we can set up a var to point to the current index, which starts at 0. We can then increment it everytime we like or dislike our cookie, and show our new cookie.
+
+
However, what happens when we get to the last cookie and you like or dislike it? Run it on an emulator or your device to see what happens.
+
It sadly crashes :( This definitely isn't what we wanted! We want to start our cookies back at the beginning.
+
+
+
7 Finishing
+
You managed to get to the end of the tutorial! congratulations 🏆 !!!
+
We think there's tonnes of things you could do to make your cookie tinder app truly unique!
+
If your stuck for more ideas to add to your game:
+
+
ensure you have a diverse set of cookies to chose between (10+ would be great)
+
make the UI more friendly - how about a state selector for the button background
\ No newline at end of file
diff --git a/docs/docs/krumble/index.html b/docs/docs/krumble/index.html
new file mode 100644
index 0000000..8086b14
--- /dev/null
+++ b/docs/docs/krumble/index.html
@@ -0,0 +1,174 @@
+Krumble · codebar android tutorials
Introduction to Kotlin by building a cookie themed tinder
+
The aim of this tutorial is to build a dating like app for cookies! We'll have a list of cookies to either like or dislike!
+
+
Before starting, please ensure you have [Android Studio installed and setup correctly]({{ site.baseurl }}/setup). You can also take the steps now to work out how run your app on a device you may have, for more information check out https://developer.android.com/studio/run/device.html.
+
Also, feel free to pick a different topic than cookies if you prefer. You could pick animals, fruit, or even different little green robots.
+
+
1 Starting a new Android Studio Project
+
Firstly we want to create a new app! With Android Studio open either press Start a new Android Studio project or from the menu go File > New > New Project.
+
+
On the first screen select a good name for your app. This is what people will see when they install your app. I went for crumble because it's similar to bumble but cookie themed.
+
Next we have a field called Company Domain - this is how Google sandboxes your app. You want to ensure this is unique. Talk to your coach about what sandboxing means if you're not sure.
+
Finally on this screen we need to ensure the most important checkbox is ticked for this workshop! Enable Kotlin support!
+
On the proceeding screens, you want to set a Min SDK - this is the minimum version of Android we want to support. You can click on the version number to get more information and see exactly how many people in the world who could install your app!
+
Speak to your coach about what version they have to use at work and the fun they have involved with that!
+
Next, we want to create an Empty Activity. I'd keep the default names of MainActivity and activity_main.
+
Finally you can click finish! This might take some time to actually create everything needed for your shiny new app ✨
+
Take some time to look at the different buttons with your coach - where are the different files located in the project? How do you run your app in an emulator or on your device?
+
2 Layout
+
If you feel confident with layouts already, or would prefer to focus on purely kotlin this time. Copy paste the code in this file https://gist.github.com/daniellevass/aa6d4042b950aaf6c0f2345530e4baa4 into your layout. This will give you all the layout elements we'll use later and move onto section 3 Displaying a cookie!
+
Next, we want to open our layout file. On the left find the res folder and open layout. You should be able to double click on the activity_main.xml and open it.
+
Layouts open in 'design' mode. This gives you some tools to make layouts with a graphical interface, but it's more common to write layouts by hand using the text editor. If you're familiar with Dreamweaver, it's a similar “What you see is what you get” (WYSIWYG) vs code situation.
+
We're going to be dealing with the XML directly in this tutorial, so find the 'text' tab in the bottom left corner of the design window.
+
Now you should see some code that looks familiar-ish! Android layouts using XML, which is very very similar to HTML. You should see already we have a <RelativeLayout> and a <TextView> tag, with some attributes already there. The thing that looks weird is that all the attributes currently are prefixed with the word android or app.
+
At the moment Android Studio creates a constraint layout by default. These are bit more complicated to start with. So let's delete everything that's there and put this instead:
One of the most important features of our cookie clicker will be our cookie - we can create an <ImageView>, you will need to provide a height and a width. We also need to provide it an id so we can connect to it later.
id’s need to start with @+id/ - the plus symbol means it assigns the variable name to the current ImageView
+
+
In Android we don't use pixels, but instead use dp which is a Density-independent Pixel. 1 point might be 1 pixel on a really low resolution device, but might be 4 pixels, or even 8 pixels on a newer device. Take a look at this handy guide Android wrote for more information https://developer.android.com/guide/practices/screens_support.html, you can also check out this stack overflow post https://stackoverflow.com/a/2025541
+
Because we have a RelativeLayout parent this means we can do some special things to position our cookie on our screen. We can provide an attribute like android:layout_centerHorizontal="true".
+
Now that we have our cookie image in position, we want to allow people to see it's name and maybe it's story. Let's create two <TextView>'s for this. Make sure you position them, and give them an id.
+
Finally, we can add two buttons. These are <Button>'s. Again remember to position them and give them an id. How about we have a look at styling these red and green to make them easier for people to click?
+
We can change the background colour by changing the property android:background="#A0D468" and we can provide it a hex value. If you want some inspiration for hex colours check out https://material.io/guidelines/style/color.html
Next, we're going to look at the other file that was created MainActivity.kt. An activity is like a page on a website. You'll need a separate activity for any new pages in your app.
Inside our onCreate, we want to connect to our interface elements. Below is what you'll need to type to connect to our ImageView imgCookie. Have a go at writing the connections for our TextViews for lblName and lblStory.
+
var imgCookie:ImageView = findViewById(R.id.imgCookie)
+
+
+
val and var
+You'll notice we created a var for our imgCookie. Var is short for variable, which is something that can change. If our thing is never going to change we can make it a val which is short for value.
+You'll also note that unlike Java, we don't need to end our code sentence with a semicolon.
+
+
Next we can set some values up for our cookie. This is called hardcoding, where we're writing up values into our code. We're going to make this better soon!
+
For the image, you can either google for a cookie image that's free to use, or use ours that we found earlier = http://imgur.com/a/9BXV4 . You need to save it inside your project folder using Windows Explorer or Mac OSX Finder and navigate to the following -> app -> src -> main -> res . You need to create a folder called drawable-xhdpi and place your cookie image in here! You also need to be careful about how you name your cookie; stick to lowercase letters and underscores e.g. peanut_cookie. Speak to your coach about the why there are so many different folders
+
+
Make sure you run this on either an emulator or your own device to see it working!
+
+
4 Cookie Class
+
So we've now determined that our cookie has a set of properties. We can create a class to hold these values for us.
+
data classCookie(valname: String, valimage: Int, valstory: String)
+
+
+
Do you notice how we're using val here now. This is because once we create the properties on our cookie object, we don't want to let people change them!
+A data class represents a thing e.g. a cookie. We can have dozens of different cookies that all have the same properties with different values e.g. a name, an image.
+
+
Next, we can create our first cookie object:
+
val cookie = Cookie("Mr Peanut", R.drawable.peanut_cookie,
+ "Loves taking long walks on the beach.")
+
+
We now need to make sure we're using the values from our cookie:
+
+
We can look at refactoring this a bit. We can create a function to show a Cookie, where we can pass a cookie to show as a parameter. This will make it a lot easier to show a different cookie when we make more!
+
+
However, we have a problem! We're currently creating those outlets everytime. There's a better way! let's set them up as variables we can use anywhere in the class. We also need to set them up as lateinit. This is because kotlin doesn't like null, or something that doesn't exist yet. We're telling our Activity these things do exist, but later! They'll exist by the time we want to use them.
+
+
+
5 Liking and Disliking
+
Next, we want to allow people either express their love or hatred for our cookie!
+
Let's set up some outlets for our buttons. We can create a toast message, the little messages that pop up from the bottom of your screen. Run it on your device or emulator to see it working.
+
+
+
here we've created a listener for each of our buttons. These will listen for the button to be clicked, then run the code in thats inside the curley brackets. This is very similar to how a JavaScript onClick works.
+Secondly, our toast contains three things, only one of which is the text message it should say. The first variable is the context, we need to supply where this toast should appear. For us, right now, that's our MainActivity. The final property is how long that message should stay up. We only want to see it for a short time.
+
+
How about, let's extend our cookie class to contain what the cookie might say for either of the options.
+
+
Let's test this out on our emulator or real device to make sure our project still works.
+
+
6 More Cookies!
+
Firstly we're going to create a new function to generate and return us a list of cookies. We can then use those generated cookies in our Activity. We can also delete our hard coded cookie, and just use the first cookie in our list. Lists starts at 0 in Kotlin (as in Java too). Much like how we number building floors in the UK; where ground is 0, floor 1 goes next etc.
+
+
Next we can set up a var to point to the current index, which starts at 0. We can then increment it everytime we like or dislike our cookie, and show our new cookie.
+
+
However, what happens when we get to the last cookie and you like or dislike it? Run it on an emulator or your device to see what happens.
+
It sadly crashes :( This definitely isn't what we wanted! We want to start our cookies back at the beginning.
+
+
+
7 Finishing
+
You managed to get to the end of the tutorial! congratulations 🏆 !!!
+
We think there's tonnes of things you could do to make your cookie tinder app truly unique!
+
If your stuck for more ideas to add to your game:
+
+
ensure you have a diverse set of cookies to chose between (10+ would be great)
+
make the UI more friendly - how about a state selector for the button background
(this is a mini tutorial that can be completed at any time)
+
1. Intro
+
The aim of this worksheet is to demonstrate how to position elements by building an “about” page. We will also look at how we can apply the same style to elements that are very similar.
+
+
+
here’s how my about page looked at the end
+
+
2. New layout resource
+
First, we need to create a new layout file. To do this, right click on your layout folder (inside resources) in Android Studio. You want to select a layout resource file . You should get a dialog popup like so:
+
+
+
here you want to write the name of the file at the top, and then press ok! We don’t need to worry about the any of the available qualifiers!
+
+
4. Building the layout
+
Next, we need to then start building the your profile card! Ideally, you need to put up between three and five pieces of information, such as your twitter account, linked in profile, public website!
+
+
Experiment with the following attributes to position elements exactly where you want them:
+
+
align
+
margin
+
padding
+
+
Try to work through positioning an element once on your own, then ask your coach for some feedback on how they might’ve positioned it. Learn from that and then work on the next element!
+
5. Styles
+
After filling in a couple of pieces of information, you’ve probably started copying and pasting whole sections of layout code. Wouldn’t it be nicer if there was a better way to do this?
+
Fortunately, in Android we can use apply a style. A style will apply a bunch of attributes that you specify to any element you want. For example, our text is the same text size, and colour. We can specify those in a style!
+
+
+
the code before
+
+
+
+
my style 🎉
+
+
+
+
the code after!
+
+
7. Finishing
+
Make sure you test out your design on different phones, and different orientations! How will you make it work on a really tiny device and a really big device?
(this is a mini tutorial that can be completed at any time)
+
1. Intro
+
The aim of this worksheet is to demonstrate how to position elements by building an “about” page. We will also look at how we can apply the same style to elements that are very similar.
+
+
+
here’s how my about page looked at the end
+
+
2. New layout resource
+
First, we need to create a new layout file. To do this, right click on your layout folder (inside resources) in Android Studio. You want to select a layout resource file . You should get a dialog popup like so:
+
+
+
here you want to write the name of the file at the top, and then press ok! We don’t need to worry about the any of the available qualifiers!
+
+
4. Building the layout
+
Next, we need to then start building the your profile card! Ideally, you need to put up between three and five pieces of information, such as your twitter account, linked in profile, public website!
+
+
Experiment with the following attributes to position elements exactly where you want them:
+
+
align
+
margin
+
padding
+
+
Try to work through positioning an element once on your own, then ask your coach for some feedback on how they might’ve positioned it. Learn from that and then work on the next element!
+
5. Styles
+
After filling in a couple of pieces of information, you’ve probably started copying and pasting whole sections of layout code. Wouldn’t it be nicer if there was a better way to do this?
+
Fortunately, in Android we can use apply a style. A style will apply a bunch of attributes that you specify to any element you want. For example, our text is the same text size, and colour. We can specify those in a style!
+
+
+
the code before
+
+
+
+
my style 🎉
+
+
+
+
the code after!
+
+
7. Finishing
+
Make sure you test out your design on different phones, and different orientations! How will you make it work on a really tiny device and a really big device?
This tutorial won’t assume too much about your familiarity with Android or Android Studio.
+You will need Android Studio installed, and you’ll need a Google account (a Gmail account, or the Google account you use for your phone will be fine).
+
This tutorial takes you through the steps on https://developers.google.com/maps/documentation/android-api/start, explaining and illustrating the process of getting an application up and running that displays a Google Maps view, ready to extend to do whatever map-related things you may want to do!
+
Create a new project
+
Android Studio provides a handy template to quick-start you making an app that focuses on Google Maps. We are going to take advantage of this, get it running, and then see what we can do with it.
+
+
Create a new project. You can choose whatever name and domain you like, but I’d suggest to target API 19 as the minimum SDK level (it’s selected by default at the time of writing) - selecting lower levels may throw up little issues in the tutorial, and you don’t want to have to worry about that right now! Selecting a higher level can avoid one particular issue the tutorial deals with, but it’s helpful to know about that anyway!
+
Select the Google Maps Activity when presented with the choice. You can recreate everything that this template provides you with yourself, but this saves us some time. There’s nothing special about this Activity itself, it just comes set up with a Map Fragment, ready to get started with.
+
+
Choose a name for your Activity and its layout; it doesn’t matter what names you choose, but this tutorial will call the Activity “MapsActivity” and the layout “activity_maps”.
+
+
What do we have here?
+
You’ll be presented with a screen like this, which contains some instructions:
+
+
It looks like we’ll need a “Google Maps API key”! This goes in google_maps_api.xml; it’s where we hold the key we’ll use to access the Google Maps API. On the left you can also see the activity_maps.xml layout and MapsActivity class; we’ll be coming back to those later.
+
Getting an API Key
+
+
Aside: APIs
+An API is what’s used by apps and websites (or the servers behind them) to talk to each other. Sometimes these APIs are free and open - any person (or app) can talk to them and get information from them. Google’s Maps API, which allows us to ask it for map data, is free, but it requires a key connected to a Google account. Essentially, this allows them to stop you from abusing their API, say by spamming it, and allows them to charge businesses for extras. That won’t be a problem for us!
+
+
Keys are linked to an app; essentially we’ll register our app’s key with Google Maps and they’ll give us an API key that our app uses when it makes a request.
+
+
Copy the suggested link into your web browser; you should see a screen like this (perhaps once you’ve logged into/created your Google account):
+
+
+
+
Make sure “Create a project” is selected, and continue.
+
Give it a minute to do its thing and be presented with this screen:
+
+
Keys to the Kingdom! Click “Create API key” and you’ll be presented with something like this (hopefully with a string of characters instead of a black box though!)
+
+
Copy the key, switch back to Android Studio, and paste it over where it says “YOUR_KEY_HERE” back at the bottom of google_maps_api.xml.
+
You’ve now given your app the key it needs, but we should finish up on the website. Go back to the “API key created” window and click “Restrict Key”.
+
+
+
Here we can give our key a name (so that later we can remember that we used this on our maps tutorial app) - you can probably come up with something better than “API key 1”. We’re going to restrict this to Android apps, though it’s worth noting that you can use a similar process for other platforms too.
+The certificate fingerprint and the package name at the end are automagically filled for us because they were part of the initial link we copied, but if you were doing it manually you would be able to get this information from your project. This prevents the key from being used by apps that aren’t listed here, but also allows you to share the same key between multiple apps if you want to.
+
+
Ok, we’re done with the website now!
+
Nice! Web-stuff Done!
+
Have a drink or something if you feel like; next up we’re going to fix Google’s code! :D
+
It Just Works™ (or “how I learnt to stop worrying and love dex method count”)
+
Connect your phone to your machine, make sure development mode is enabled and that you can push apps via USB, and try running the app with the green “play” button at the top of the screen:
+
+
You’ll see this at the bottom, showing that a build is happening:
+
+
Then (if Google doesn’t fix this at some point) you’ll get a delightfully cryptic message like this:
+
+
Well.
+
What’s happened is that Google’s included all of their support library code and services code, for all sorts of things that we’re not using, and there’s so much of this that it would break a limit on the number of methods allowed in a single app!
+
(This is the bit that may not happen if you’re targeting Android SDK 21 or above, because it handles dex limits differently, but your app will still be bloated with unnecessary code so this is still best practice.)
+
It’s easy enough to fix this but only including the maps service we need. Go to your app’s build.gradle (there are two - one for the project and one for the module. Most of the changes you make in an Android app will be in the module build.gradle) and look for the dependencies block that looks like this:
+
+
(Don’t worry if your version numbers don’t match the ones if the picture - they get updated pretty often!)
+The yellow highlighted line is the important one right now; instead of all of play-services we want play-services-maps; you can find a list of all the other play service components and their current versions on this page: https://developers.google.com/android/guides/setup
+
Let’s do this!
+
Hit the play button at the top again and you should be rewarded with the app launching and pointing at Sydney!
+
+
Taking stock and next steps
+
So, right now you can take this in several directions.
+
You can experiment with making changes to what happens when onMapReady() is called in MapsActivity, for instance changing the location from Sydney to your favourite spot. (Try something like http://www.latlong.net to look up latitude and longitude values!)
+
If you have an idea then try bouncing it off your coach and see what you can make!
This tutorial won’t assume too much about your familiarity with Android or Android Studio.
+You will need Android Studio installed, and you’ll need a Google account (a Gmail account, or the Google account you use for your phone will be fine).
+
This tutorial takes you through the steps on https://developers.google.com/maps/documentation/android-api/start, explaining and illustrating the process of getting an application up and running that displays a Google Maps view, ready to extend to do whatever map-related things you may want to do!
+
Create a new project
+
Android Studio provides a handy template to quick-start you making an app that focuses on Google Maps. We are going to take advantage of this, get it running, and then see what we can do with it.
+
+
Create a new project. You can choose whatever name and domain you like, but I’d suggest to target API 19 as the minimum SDK level (it’s selected by default at the time of writing) - selecting lower levels may throw up little issues in the tutorial, and you don’t want to have to worry about that right now! Selecting a higher level can avoid one particular issue the tutorial deals with, but it’s helpful to know about that anyway!
+
Select the Google Maps Activity when presented with the choice. You can recreate everything that this template provides you with yourself, but this saves us some time. There’s nothing special about this Activity itself, it just comes set up with a Map Fragment, ready to get started with.
+
+
Choose a name for your Activity and its layout; it doesn’t matter what names you choose, but this tutorial will call the Activity “MapsActivity” and the layout “activity_maps”.
+
+
What do we have here?
+
You’ll be presented with a screen like this, which contains some instructions:
+
+
It looks like we’ll need a “Google Maps API key”! This goes in google_maps_api.xml; it’s where we hold the key we’ll use to access the Google Maps API. On the left you can also see the activity_maps.xml layout and MapsActivity class; we’ll be coming back to those later.
+
Getting an API Key
+
+
Aside: APIs
+An API is what’s used by apps and websites (or the servers behind them) to talk to each other. Sometimes these APIs are free and open - any person (or app) can talk to them and get information from them. Google’s Maps API, which allows us to ask it for map data, is free, but it requires a key connected to a Google account. Essentially, this allows them to stop you from abusing their API, say by spamming it, and allows them to charge businesses for extras. That won’t be a problem for us!
+
+
Keys are linked to an app; essentially we’ll register our app’s key with Google Maps and they’ll give us an API key that our app uses when it makes a request.
+
+
Copy the suggested link into your web browser; you should see a screen like this (perhaps once you’ve logged into/created your Google account):
+
+
+
+
Make sure “Create a project” is selected, and continue.
+
Give it a minute to do its thing and be presented with this screen:
+
+
Keys to the Kingdom! Click “Create API key” and you’ll be presented with something like this (hopefully with a string of characters instead of a black box though!)
+
+
Copy the key, switch back to Android Studio, and paste it over where it says “YOUR_KEY_HERE” back at the bottom of google_maps_api.xml.
+
You’ve now given your app the key it needs, but we should finish up on the website. Go back to the “API key created” window and click “Restrict Key”.
+
+
+
Here we can give our key a name (so that later we can remember that we used this on our maps tutorial app) - you can probably come up with something better than “API key 1”. We’re going to restrict this to Android apps, though it’s worth noting that you can use a similar process for other platforms too.
+The certificate fingerprint and the package name at the end are automagically filled for us because they were part of the initial link we copied, but if you were doing it manually you would be able to get this information from your project. This prevents the key from being used by apps that aren’t listed here, but also allows you to share the same key between multiple apps if you want to.
+
+
Ok, we’re done with the website now!
+
Nice! Web-stuff Done!
+
Have a drink or something if you feel like; next up we’re going to fix Google’s code! :D
+
It Just Works™ (or “how I learnt to stop worrying and love dex method count”)
+
Connect your phone to your machine, make sure development mode is enabled and that you can push apps via USB, and try running the app with the green “play” button at the top of the screen:
+
+
You’ll see this at the bottom, showing that a build is happening:
+
+
Then (if Google doesn’t fix this at some point) you’ll get a delightfully cryptic message like this:
+
+
Well.
+
What’s happened is that Google’s included all of their support library code and services code, for all sorts of things that we’re not using, and there’s so much of this that it would break a limit on the number of methods allowed in a single app!
+
(This is the bit that may not happen if you’re targeting Android SDK 21 or above, because it handles dex limits differently, but your app will still be bloated with unnecessary code so this is still best practice.)
+
It’s easy enough to fix this but only including the maps service we need. Go to your app’s build.gradle (there are two - one for the project and one for the module. Most of the changes you make in an Android app will be in the module build.gradle) and look for the dependencies block that looks like this:
+
+
(Don’t worry if your version numbers don’t match the ones if the picture - they get updated pretty often!)
+The yellow highlighted line is the important one right now; instead of all of play-services we want play-services-maps; you can find a list of all the other play service components and their current versions on this page: https://developers.google.com/android/guides/setup
+
Let’s do this!
+
Hit the play button at the top again and you should be rewarded with the app launching and pointing at Sydney!
+
+
Taking stock and next steps
+
So, right now you can take this in several directions.
+
You can experiment with making changes to what happens when onMapReady() is called in MapsActivity, for instance changing the location from Sydney to your favourite spot. (Try something like http://www.latlong.net to look up latitude and longitude values!)
+
If you have an idea then try bouncing it off your coach and see what you can make!
If you’d like to pick it up on your own, the Big Nerd Ranch have a really very good book to pick up Android (they have an iOS book too) - https://www.bignerdranch.com/we-write/
Google also has their own tutorial series at https://developer.android.com/training/basics/firstapp/index.html, which touches on some of the details and complexities of Android app development - saving data, sharing things with other apps, getting location data and other things you may want a more complex app to be able to do.
If you’d like to pick it up on your own, the Big Nerd Ranch have a really very good book to pick up Android (they have an iOS book too) - https://www.bignerdranch.com/we-write/
Google also has their own tutorial series at https://developer.android.com/training/basics/firstapp/index.html, which touches on some of the details and complexities of Android app development - saving data, sharing things with other apps, getting location data and other things you may want a more complex app to be able to do.
\ No newline at end of file
diff --git a/docs/docs/setup.html b/docs/docs/setup.html
new file mode 100644
index 0000000..d524810
--- /dev/null
+++ b/docs/docs/setup.html
@@ -0,0 +1,50 @@
+setup · codebar android tutorials
This tutorial will guide you through the process of setting up Android Studio, a phone or emulator, and then making sure it is all working by running an app on it. If you are attending an Android workshop at Codebar, we encourage you to work through this tutorial before you come along. If you get stuck, don't worry, just stop where you are, and a coach can help you on the day. It is very useful, however, if you can at least download Android Studio before you arrive as it is a big download and the internet can become a problem if too many people try and download it at once.
+
1. Setting up Android Studio
+
Android Studio is the IDE you will use for creating Android applications. IDE stands for Integrated Development Environment, which means it has all the tools you need for development built right into one application. You will use Android Studio in place of your normal text editor (such as Notepad, Sublime Text, or Atom) and use it to build and run your apps on your Android phone.
+
You first need to download the installer from this page. You can then follow the instructions to install Android Studio and the Android SDK. There is a video on this page which will show you the installation process from start to finish.
+
Once you have finished the installation, you will be greeted with this lovely welcome screen!
+
+
2. Creating your first Android project
+
We are now going to create an Android project within Android Studio. On the welcome screen, press Start a new Android Studio project. This will open a window which will ask you for a few things about your new application. Give it a name such as My First App and then fill in the company domain box. If you have your own website (such as adalovelace.co.uk) you can use that. If not, use something like yourname.codebar.com. It doesn't matter if this is a real website, this is just a way for Android to give your app a unique identifier.
+
+
For example, if you have an app called My First App and your domain name is adalovelace.co.uk then Android will give it an identifier uk.co.adalovelace.myfirstapp. This is called the package name. As no two apps can have the same package name, this reverse domain system avoids clashes.
+
+
You should also choose a location for the project which is where the files will be stored. When you're done, press the next button.
+
+
On the next screen, you are asked which Android phones you want to support. You can leave that at the default (which in my case is Android 4.4, KitKat). If you are interested, you can click on the Help me choose link to see what percentage of users run each version of Android. Make sure only Phone & tablets is checked and press Next.
+
+
Did you notice that different versions of Android have different names? The third version of Android was called Cupcake. The fourth version was called Doughnut. Every version since has carried on with a "sweet treat" starting with the next letter of the alphabet. You can see a list of all the names here.
+
+
+
Once the downloads have completed, press Next again and then choose the type of Activity you want your app to use. An Activity is how Android refers to a screen within apps. Your app can have multiple activities, and you can move between them to see different parts of the app. For now, we want to create an app with a Empty activity. Make sure that is selected and then press Next.
+
+
Leave the next screen with all the default options (these are the names of the files Android Studio will create for you) and press Finish. In a few seconds, the main Android Studio window will open. For now, it will look blank, but we will be able to build and run our app from here in a minute.
+
+
First, we need to set up a phone for it to run on.
+
3. Setting up a device or the emulator
+
Android applications can only be run on an Android phone, but don't worry if you don't have one, you can also run an emulator on your computer. An emulator is a program which pretends to be something else. In this case, you can run one through Android Studio which will pretend to be an Android phone. Emulators can be slow, however, so if you have an Android phone follow the steps below to set it up. If you don't, follow the steps to setup the emulator.
+
3.1 Setting up your Android phone
+
Grab you Android phone and plug it into your computer with a USB cable. If you are using a Windows computer, you might need to install some drivers. You can do that by following the instructions on this page.
+
Now, on your Android phone you need to make sure USB debugging is turned on. Go to the phone settings and then scroll down to About phone. On this screen, continue to tap on the Build number section until it shows a message saying You are now a developer (if only it were always that easy!).
+
+
Now you are in developer mode, press back and you should see a new Developer options menu. Tap into there and make sure the switch at the top of the screen is turned on. Then scroll down and make sure USB Debugging is also turned on.
+
3.2 Setting up the Android emulator
+
If you don't have an Android phone, you can also set up an emulator to run on your computer.
+
First, in Android Studio with your project open, Launch the Android Virtual Device Manager by selecting Tools > Android > AVD Manager, or by clicking the AVD Manager icon in the toolbar. On the screen which opens, press the Create Virtual Device button.
+
On this screen, you need to pick which type of device you want to create. Feel free to browse around, but we are going to choose the Phone category and then the Pixel device. Press Next.
+
+
We are now asked to choose which version of Android we want to use. Make sure the recommended tab is selected and then select any of the options by pressing the Download link. You might be asked to accept some terms to continue. Once the download is complete you can press Finish to go back to the screen and select that version of Android and press Next again.
+
+
On the next screen leave everything as it is and press Finish. This will finish creating the emulator and add it to the list with a name like Pixel API 23 (your name might be slightly different if you chose a different Android version).
+
+
You can now start the emulator by pressing the play button next to your newly created emulator. It will take a few minutes to start but will eventually show an Android phone in a window on your computer.
We are now going to run your first application to make sure everything is working. All you need to do is press the run button in the toolbar of your Android Studio project window and then make sure your phone or emulator is selected in the window which pops up.
+
+
After a short time, the app will be built and run on your phone or emulator. It should look like this:
+
+
That's it! You're all set up and ready for the [first tutorial]({{ site.baseurl }}/worksheets/1-introduction/)! You can also view some more links over on the [resources page]({{ site.baseurl }}/worksheets/0-resources.html).
+
\ No newline at end of file
diff --git a/docs/docs/setup/index.html b/docs/docs/setup/index.html
new file mode 100644
index 0000000..d524810
--- /dev/null
+++ b/docs/docs/setup/index.html
@@ -0,0 +1,50 @@
+setup · codebar android tutorials
This tutorial will guide you through the process of setting up Android Studio, a phone or emulator, and then making sure it is all working by running an app on it. If you are attending an Android workshop at Codebar, we encourage you to work through this tutorial before you come along. If you get stuck, don't worry, just stop where you are, and a coach can help you on the day. It is very useful, however, if you can at least download Android Studio before you arrive as it is a big download and the internet can become a problem if too many people try and download it at once.
+
1. Setting up Android Studio
+
Android Studio is the IDE you will use for creating Android applications. IDE stands for Integrated Development Environment, which means it has all the tools you need for development built right into one application. You will use Android Studio in place of your normal text editor (such as Notepad, Sublime Text, or Atom) and use it to build and run your apps on your Android phone.
+
You first need to download the installer from this page. You can then follow the instructions to install Android Studio and the Android SDK. There is a video on this page which will show you the installation process from start to finish.
+
Once you have finished the installation, you will be greeted with this lovely welcome screen!
+
+
2. Creating your first Android project
+
We are now going to create an Android project within Android Studio. On the welcome screen, press Start a new Android Studio project. This will open a window which will ask you for a few things about your new application. Give it a name such as My First App and then fill in the company domain box. If you have your own website (such as adalovelace.co.uk) you can use that. If not, use something like yourname.codebar.com. It doesn't matter if this is a real website, this is just a way for Android to give your app a unique identifier.
+
+
For example, if you have an app called My First App and your domain name is adalovelace.co.uk then Android will give it an identifier uk.co.adalovelace.myfirstapp. This is called the package name. As no two apps can have the same package name, this reverse domain system avoids clashes.
+
+
You should also choose a location for the project which is where the files will be stored. When you're done, press the next button.
+
+
On the next screen, you are asked which Android phones you want to support. You can leave that at the default (which in my case is Android 4.4, KitKat). If you are interested, you can click on the Help me choose link to see what percentage of users run each version of Android. Make sure only Phone & tablets is checked and press Next.
+
+
Did you notice that different versions of Android have different names? The third version of Android was called Cupcake. The fourth version was called Doughnut. Every version since has carried on with a "sweet treat" starting with the next letter of the alphabet. You can see a list of all the names here.
+
+
+
Once the downloads have completed, press Next again and then choose the type of Activity you want your app to use. An Activity is how Android refers to a screen within apps. Your app can have multiple activities, and you can move between them to see different parts of the app. For now, we want to create an app with a Empty activity. Make sure that is selected and then press Next.
+
+
Leave the next screen with all the default options (these are the names of the files Android Studio will create for you) and press Finish. In a few seconds, the main Android Studio window will open. For now, it will look blank, but we will be able to build and run our app from here in a minute.
+
+
First, we need to set up a phone for it to run on.
+
3. Setting up a device or the emulator
+
Android applications can only be run on an Android phone, but don't worry if you don't have one, you can also run an emulator on your computer. An emulator is a program which pretends to be something else. In this case, you can run one through Android Studio which will pretend to be an Android phone. Emulators can be slow, however, so if you have an Android phone follow the steps below to set it up. If you don't, follow the steps to setup the emulator.
+
3.1 Setting up your Android phone
+
Grab you Android phone and plug it into your computer with a USB cable. If you are using a Windows computer, you might need to install some drivers. You can do that by following the instructions on this page.
+
Now, on your Android phone you need to make sure USB debugging is turned on. Go to the phone settings and then scroll down to About phone. On this screen, continue to tap on the Build number section until it shows a message saying You are now a developer (if only it were always that easy!).
+
+
Now you are in developer mode, press back and you should see a new Developer options menu. Tap into there and make sure the switch at the top of the screen is turned on. Then scroll down and make sure USB Debugging is also turned on.
+
3.2 Setting up the Android emulator
+
If you don't have an Android phone, you can also set up an emulator to run on your computer.
+
First, in Android Studio with your project open, Launch the Android Virtual Device Manager by selecting Tools > Android > AVD Manager, or by clicking the AVD Manager icon in the toolbar. On the screen which opens, press the Create Virtual Device button.
+
On this screen, you need to pick which type of device you want to create. Feel free to browse around, but we are going to choose the Phone category and then the Pixel device. Press Next.
+
+
We are now asked to choose which version of Android we want to use. Make sure the recommended tab is selected and then select any of the options by pressing the Download link. You might be asked to accept some terms to continue. Once the download is complete you can press Finish to go back to the screen and select that version of Android and press Next again.
+
+
On the next screen leave everything as it is and press Finish. This will finish creating the emulator and add it to the list with a name like Pixel API 23 (your name might be slightly different if you chose a different Android version).
+
+
You can now start the emulator by pressing the play button next to your newly created emulator. It will take a few minutes to start but will eventually show an Android phone in a window on your computer.
We are now going to run your first application to make sure everything is working. All you need to do is press the run button in the toolbar of your Android Studio project window and then make sure your phone or emulator is selected in the window which pops up.
+
+
After a short time, the app will be built and run on your phone or emulator. It should look like this:
+
+
That's it! You're all set up and ready for the [first tutorial]({{ site.baseurl }}/worksheets/1-introduction/)! You can also view some more links over on the [resources page]({{ site.baseurl }}/worksheets/0-resources.html).
+
\ No newline at end of file
diff --git a/docs/en/help.html b/docs/en/help.html
new file mode 100644
index 0000000..06ce1a0
--- /dev/null
+++ b/docs/en/help.html
@@ -0,0 +1,7 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/en/help/index.html b/docs/en/help/index.html
new file mode 100644
index 0000000..06ce1a0
--- /dev/null
+++ b/docs/en/help/index.html
@@ -0,0 +1,7 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/en/index.html b/docs/en/index.html
new file mode 100644
index 0000000..592e37e
--- /dev/null
+++ b/docs/en/index.html
@@ -0,0 +1,7 @@
+codebar android tutorials · A website for the codebar android tutorials
Learn how to build a cookie themed tinder using Kotlin
+
\ No newline at end of file
diff --git a/docs/en/users.html b/docs/en/users.html
new file mode 100644
index 0000000..fa4d90f
--- /dev/null
+++ b/docs/en/users.html
@@ -0,0 +1 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/en/users/index.html b/docs/en/users/index.html
new file mode 100644
index 0000000..fa4d90f
--- /dev/null
+++ b/docs/en/users/index.html
@@ -0,0 +1 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/help.html b/docs/help.html
new file mode 100644
index 0000000..a60dbd4
--- /dev/null
+++ b/docs/help.html
@@ -0,0 +1,7 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/help/index.html b/docs/help/index.html
new file mode 100644
index 0000000..a60dbd4
--- /dev/null
+++ b/docs/help/index.html
@@ -0,0 +1,7 @@
+codebar android tutorials · A website for the codebar android tutorials
Learn how to build a cookie themed tinder using Kotlin
+
\ No newline at end of file
diff --git a/docs/js/codetabs.js b/docs/js/codetabs.js
new file mode 100644
index 0000000..dd01ebf
--- /dev/null
+++ b/docs/js/codetabs.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Turn off ESLint for this file because it's sent down to users as-is.
+/* eslint-disable */
+window.addEventListener('load', function() {
+ // add event listener for all tab
+ document.querySelectorAll('.nav-link').forEach(function(el) {
+ el.addEventListener('click', function(e) {
+ const groupId = e.target.getAttribute('data-group');
+ document
+ .querySelectorAll(`.nav-link[data-group=${groupId}]`)
+ .forEach(function(el) {
+ el.classList.remove('active');
+ });
+ document
+ .querySelectorAll(`.tab-pane[data-group=${groupId}]`)
+ .forEach(function(el) {
+ el.classList.remove('active');
+ });
+ e.target.classList.add('active');
+ document
+ .querySelector(`#${e.target.getAttribute('data-tab')}`)
+ .classList.add('active');
+ });
+ });
+});
diff --git a/docs/js/scrollSpy.js b/docs/js/scrollSpy.js
new file mode 100644
index 0000000..0632e6c
--- /dev/null
+++ b/docs/js/scrollSpy.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable prefer-arrow-callback */
+(function scrollSpy() {
+ const OFFSET = 10;
+ let timer;
+ let headingsCache;
+ const findHeadings = function findHeadings() {
+ return headingsCache || document.querySelectorAll('.toc-headings > li > a');
+ };
+ const onScroll = function onScroll() {
+ if (timer) {
+ // throttle
+ return;
+ }
+ timer = setTimeout(function() {
+ timer = null;
+ let activeNavFound = false;
+ const headings = findHeadings(); // toc nav anchors
+ /**
+ * On every call, try to find header right after <-- next header
+ * the one whose content is on the current screen <-- highlight this
+ */
+ for (let i = 0; i < headings.length; i++) {
+ // headings[i] is current element
+ // if an element is already active, then current element is not active
+ // if no element is already active, then current element is active
+ let currNavActive = !activeNavFound;
+ /**
+ * Enter the following check up only when an active nav header is not yet found
+ * Then, check the bounding rectangle of the next header
+ * The headers that are scrolled passed will have negative bounding rect top
+ * So the first one with positive bounding rect top will be the nearest next header
+ */
+ if (currNavActive && i < headings.length - 1) {
+ const heading = headings[i + 1];
+ const next = decodeURIComponent(heading.href.split('#')[1]);
+ const nextHeader = document.getElementById(next);
+
+ if (nextHeader) {
+ const top = nextHeader.getBoundingClientRect().top;
+ currNavActive = top > OFFSET;
+ } else {
+ console.error('Can not find header element', {
+ id: next,
+ heading,
+ });
+ }
+ }
+ /**
+ * Stop searching once a first such header is found,
+ * this makes sure the highlighted header is the most current one
+ */
+ if (currNavActive) {
+ activeNavFound = true;
+ headings[i].classList.add('active');
+ } else {
+ headings[i].classList.remove('active');
+ }
+ }
+ }, 100);
+ };
+
+ document.addEventListener('scroll', onScroll);
+ document.addEventListener('resize', onScroll);
+ document.addEventListener('DOMContentLoaded', function() {
+ // Cache the headings once the page has fully loaded.
+ headingsCache = findHeadings();
+ onScroll();
+ });
+})();
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
new file mode 100644
index 0000000..a44deb9
--- /dev/null
+++ b/docs/sitemap.xml
@@ -0,0 +1 @@
+https://codebar.github.io/helpweekly0.5https://codebar.github.io/indexweekly0.5https://codebar.github.io/usersweekly0.5https://codebar.github.io/android-tutorials/docs/activity-lifecyclehourly1.0https://codebar.github.io/android-tutorials/docs/cookie-clicker-javahourly1.0https://codebar.github.io/android-tutorials/docs/espressohourly1.0https://codebar.github.io/android-tutorials/docs/krumblehourly1.0https://codebar.github.io/android-tutorials/docs/layoutshourly1.0https://codebar.github.io/android-tutorials/docs/mapshourly1.0https://codebar.github.io/android-tutorials/docs/more-resourceshourly1.0https://codebar.github.io/android-tutorials/docs/setuphourly1.0
\ No newline at end of file
diff --git a/docs/users.html b/docs/users.html
new file mode 100644
index 0000000..cf4d6e1
--- /dev/null
+++ b/docs/users.html
@@ -0,0 +1 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/docs/users/index.html b/docs/users/index.html
new file mode 100644
index 0000000..cf4d6e1
--- /dev/null
+++ b/docs/users/index.html
@@ -0,0 +1 @@
+codebar android tutorials · A website for the codebar android tutorials
\ No newline at end of file
diff --git a/images/java.png b/images/java.png
deleted file mode 100644
index 0737cf5..0000000
Binary files a/images/java.png and /dev/null differ
diff --git a/images/kotlin.png b/images/kotlin.png
deleted file mode 100644
index 52a99f9..0000000
Binary files a/images/kotlin.png and /dev/null differ
diff --git a/index.md b/index.md
deleted file mode 100644
index 05a38ba..0000000
--- a/index.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Codebar Android Workshop Resources
-layout: page
-redirect_from: /worksheets/
----
-
-This is the home for the codebar android tutorials! These are designed to be used at the very special codebar Android workshops only. If you're super lucky there may be a coach at regular codebar who can help you through a tutorial, but we can't promise that!
-
-
-
-
- star
- android
- star
-
-
-
Getting Setup
-
All the things you need to do before attending a codebar android workshop
diff --git a/java.md b/java.md
deleted file mode 100644
index a1a2d88..0000000
--- a/java.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Codebar Android Workshop Resources
-layout: page
-redirect_from: /java/
----
-
-This is the home for the codebar android tutorials! These are designed to be used at the very special codebar Android workshops only. If you're super lucky there may be a coach at regular codebar who can help you through a tutorial, but we can't promise that!
-
-
-
-
- star
- android
- star
-
-
-
Getting Setup
-
All the things you need to do before attending a codebar android workshop
diff --git a/src/.dockerignore b/src/.dockerignore
new file mode 100644
index 0000000..27d2dae
--- /dev/null
+++ b/src/.dockerignore
@@ -0,0 +1,2 @@
+*/node_modules
+*.log
diff --git a/src/.gitignore b/src/.gitignore
new file mode 100644
index 0000000..5395ea7
--- /dev/null
+++ b/src/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+
+node_modules
+
+lib/core/metadata.js
+lib/core/MetadataBlog.js
+
+website/translated_docs
+website/build/
+website/yarn.lock
+website/node_modules
+website/i18n/*
diff --git a/worksheets/3-activity-lifecycle/index.md b/src/docs/activity-lifecycle.md
similarity index 92%
rename from worksheets/3-activity-lifecycle/index.md
rename to src/docs/activity-lifecycle.md
index 695d97c..317fdf7 100644
--- a/worksheets/3-activity-lifecycle/index.md
+++ b/src/docs/activity-lifecycle.md
@@ -1,8 +1,10 @@
---
-layout: page
-title: Android Dev - Activity Lifecycle
+id: activity-lifecycle
+title: Activity Lifecycle
---
+#Android Dev - Activity Lifecycle
+
(this is a mini tutorial that can be completed at any time)
## 1. Intro
@@ -12,7 +14,7 @@ The aim of this tutorial is to look at how the activity lifecycle works which lo
-> for more information take a look at (https://developer.android.com/guide/components/activities/activity-lifecycle.html)[] There's also a really great video by Kristin Marsicano (https://realm.io/news/activities-in-the-wild-exploring-the-activity-lifecycle-android/)[]
+> for more information take a look at (https://developer.android.com/guide/components/activities/activity-lifecycle.html) There's also a really great video by Kristin Marsicano (https://realm.io/news/activities-in-the-wild-exploring-the-activity-lifecycle-android/)
## 2. Logging
diff --git a/src/docs/assets/cookie-clicker-java/1_completed.png b/src/docs/assets/cookie-clicker-java/1_completed.png
new file mode 100644
index 0000000..ab76c17
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/1_completed.png differ
diff --git a/src/docs/assets/cookie-clicker-java/2_new_project.png b/src/docs/assets/cookie-clicker-java/2_new_project.png
new file mode 100644
index 0000000..ceb5906
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/2_new_project.png differ
diff --git a/src/docs/assets/cookie-clicker-java/3_new_activity.png b/src/docs/assets/cookie-clicker-java/3_new_activity.png
new file mode 100644
index 0000000..4525b58
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/3_new_activity.png differ
diff --git a/src/docs/assets/cookie-clicker-java/4_cookie_finder.png b/src/docs/assets/cookie-clicker-java/4_cookie_finder.png
new file mode 100644
index 0000000..21037f4
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/4_cookie_finder.png differ
diff --git a/src/docs/assets/cookie-clicker-java/5_android_studio_layout.png b/src/docs/assets/cookie-clicker-java/5_android_studio_layout.png
new file mode 100644
index 0000000..0ca62ce
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/5_android_studio_layout.png differ
diff --git a/src/docs/assets/cookie-clicker-java/6_autocomplete.png b/src/docs/assets/cookie-clicker-java/6_autocomplete.png
new file mode 100644
index 0000000..736a480
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/6_autocomplete.png differ
diff --git a/src/docs/assets/cookie-clicker-java/7_toast_code.png b/src/docs/assets/cookie-clicker-java/7_toast_code.png
new file mode 100644
index 0000000..afbd081
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/7_toast_code.png differ
diff --git a/src/docs/assets/cookie-clicker-java/8_final_code_alt.png b/src/docs/assets/cookie-clicker-java/8_final_code_alt.png
new file mode 100644
index 0000000..2f6d0c7
Binary files /dev/null and b/src/docs/assets/cookie-clicker-java/8_final_code_alt.png differ
diff --git a/src/docs/assets/espresso/all_tests_passing.png b/src/docs/assets/espresso/all_tests_passing.png
new file mode 100644
index 0000000..a52a550
Binary files /dev/null and b/src/docs/assets/espresso/all_tests_passing.png differ
diff --git a/src/docs/assets/espresso/test_failing.png b/src/docs/assets/espresso/test_failing.png
new file mode 100644
index 0000000..da794b7
Binary files /dev/null and b/src/docs/assets/espresso/test_failing.png differ
diff --git a/src/docs/assets/espresso/test_passing.png b/src/docs/assets/espresso/test_passing.png
new file mode 100644
index 0000000..ed8a126
Binary files /dev/null and b/src/docs/assets/espresso/test_passing.png differ
diff --git a/src/docs/assets/setup/android-device-developer-mode.gif b/src/docs/assets/setup/android-device-developer-mode.gif
new file mode 100644
index 0000000..2c1a8fd
Binary files /dev/null and b/src/docs/assets/setup/android-device-developer-mode.gif differ
diff --git a/src/docs/assets/setup/android-studio-welcome.png b/src/docs/assets/setup/android-studio-welcome.png
new file mode 100644
index 0000000..d13c6fb
Binary files /dev/null and b/src/docs/assets/setup/android-studio-welcome.png differ
diff --git a/src/docs/assets/setup/emulator-1-type.png b/src/docs/assets/setup/emulator-1-type.png
new file mode 100644
index 0000000..3591de6
Binary files /dev/null and b/src/docs/assets/setup/emulator-1-type.png differ
diff --git a/src/docs/assets/setup/emulator-2-version.png b/src/docs/assets/setup/emulator-2-version.png
new file mode 100644
index 0000000..34fa02f
Binary files /dev/null and b/src/docs/assets/setup/emulator-2-version.png differ
diff --git a/src/docs/assets/setup/emulator-3-list.png b/src/docs/assets/setup/emulator-3-list.png
new file mode 100644
index 0000000..e112915
Binary files /dev/null and b/src/docs/assets/setup/emulator-3-list.png differ
diff --git a/src/docs/assets/setup/emulator-4-complete.png b/src/docs/assets/setup/emulator-4-complete.png
new file mode 100644
index 0000000..458a85a
Binary files /dev/null and b/src/docs/assets/setup/emulator-4-complete.png differ
diff --git a/src/docs/assets/setup/first-project-1-name.png b/src/docs/assets/setup/first-project-1-name.png
new file mode 100644
index 0000000..1092340
Binary files /dev/null and b/src/docs/assets/setup/first-project-1-name.png differ
diff --git a/src/docs/assets/setup/first-project-2-version.png b/src/docs/assets/setup/first-project-2-version.png
new file mode 100644
index 0000000..3a71b13
Binary files /dev/null and b/src/docs/assets/setup/first-project-2-version.png differ
diff --git a/src/docs/assets/setup/first-project-3-activity.png b/src/docs/assets/setup/first-project-3-activity.png
new file mode 100644
index 0000000..a297768
Binary files /dev/null and b/src/docs/assets/setup/first-project-3-activity.png differ
diff --git a/src/docs/assets/setup/first-project-4-complete.png b/src/docs/assets/setup/first-project-4-complete.png
new file mode 100644
index 0000000..6fa702d
Binary files /dev/null and b/src/docs/assets/setup/first-project-4-complete.png differ
diff --git a/src/docs/assets/setup/run-1-chooser.png b/src/docs/assets/setup/run-1-chooser.png
new file mode 100644
index 0000000..e3dc1b6
Binary files /dev/null and b/src/docs/assets/setup/run-1-chooser.png differ
diff --git a/src/docs/assets/setup/run-2-running.png b/src/docs/assets/setup/run-2-running.png
new file mode 100644
index 0000000..a5e8a0a
Binary files /dev/null and b/src/docs/assets/setup/run-2-running.png differ
diff --git a/src/docs/attributions b/src/docs/attributions
new file mode 100644
index 0000000..7cea656
--- /dev/null
+++ b/src/docs/attributions
@@ -0,0 +1,7 @@
+---
+id: attributions
+title: Attributions
+---
+
+
diff --git a/worksheets/1-introduction/index.md b/src/docs/cookie-clicker-java.md
similarity index 92%
rename from worksheets/1-introduction/index.md
rename to src/docs/cookie-clicker-java.md
index 8765bdb..e2ec9b4 100644
--- a/worksheets/1-introduction/index.md
+++ b/src/docs/cookie-clicker-java.md
@@ -1,8 +1,10 @@
---
-layout: page
-title: Introduction to Android Development
+id: cookie-clicker-java
+title: Cookie Clicker (Java)
---
+# Introduction to Android Development
+
## 1. Intro
The aim of this worksheet is to create a [cookie clicker game](http://orteil.dashnet.org/cookieclicker/), with a cookie image that can be tapped to increase the score.
@@ -11,11 +13,11 @@ To follow this tutorial, you will need to [get set up for Android development]({
Feel free to chose a different topic other than cookies, we really like the popular pokémon Goomy Clicker - what things do you like?
-
+
## 2. Create New Project
-
+
> Set the name of your app, this is what people will see when they install your app. The company name, and the resulting package name, is how Google keeps track of apps - it needs to be unique, so maybe use something with your name?
@@ -23,7 +25,7 @@ Next, we set the SDK level to `14` - It'll give you a helpful guide for how many
Finally, we want to create an `Empty Activity`
-
+
> We are going to keep the default of MainActivity.java and activity_main.xml :smile:
@@ -68,7 +70,7 @@ Next, we want to save the following cookie image into our project. You can eithe
Because android has different density devices, we usually need to provide different resolution images for all those different devices. If we only provide it in one folder, Android will scale the image for other devices, but this might cause make the image look bad!
-
+
If we want to then use that image in our Android app we can use an attribute `android:src="@drawable/cookie"` - autocomplete will be your friend here!
@@ -78,7 +80,7 @@ Next, we want to look at having a TextView for to keep track of how many cookies
Another neat feature of using a RelativeLayout is how we can position things **in relation** to other things. So we can say that this TextView should `appearAbove` the image's id. In order for this to work, the TextView needs to know where the ImageView is, so the code for the TextView needs to go below the ImageView.
-
+
> this is how our layout code finally looked :smile:
@@ -104,11 +106,11 @@ protected void onCreate(Bundle savedInstanceState) {
After, we can set an onClickListener, which is again similar to the JavaScript element.click() method. The trick with Android Studio is to let it write as much code as possible, it has an extremely powerful auto completer! When you start typing onClickListener, you should see a suggestion with curly brackets on it. If you press tab at this point, it'll auto complete the entire code that you need!
-
+
Inside our method we're going to put a Toast. These are those little messages at the bottom of the phone that show for a short period of time. They're really good!
-
+
Run your app now, and see what happens when you tap on the cookie!
diff --git a/worksheets/espresso-testing/index.md b/src/docs/espresso.md
similarity index 95%
rename from worksheets/espresso-testing/index.md
rename to src/docs/espresso.md
index 674daee..ced5a0c 100644
--- a/worksheets/espresso-testing/index.md
+++ b/src/docs/espresso.md
@@ -1,12 +1,12 @@
---
-layout: page
+id: espresso
title: Espresso UI Testing
---
-## Introduction
-This tutorial follows on from the [first one where you built a cookie clicker]({{ site.baseurl }}/worksheets/1-introduction/). If you worked on that tutorial already, follow along using the code you wrote previously.
+# Espresso UI Testing
-If you didn't work on that tutorial, or you don't have the code anymore, you can download a completed project to follow along with [here](downloads/cookie-clicker.zip). Download the file, unzip it and then open it with Android Studio using the *Open an existing Android Studio project* button on the welcome screen.
+## Introduction
+This tutorial follows on from the [first one where you built a cookie clicker](cookie-clicker-java). If you worked on that tutorial already, follow along using the code you wrote previously.
## What is UI testing?
To make sure your software works properly you need to test it whenever you make a change that you want to release to your users. To do this manually for even a small app this is a boring, repetitive, and time-consuming job. That's precisely the sort of thing which we use computers for! Automated tests are pieces of code which test that your software is working correctly. You can set them up to run regularly and on many devices so you don't have to manually test your app every time you make a change. Plus they're usually simple and fun to create!
@@ -162,11 +162,11 @@ public class CookieClickerTest {
Let's run our test to make sure the app is working correctly. Press the "play" button to the left of the method and pick your Android device or emulator to run the tests on. This might take a short amount of time but the app should appear and then quickly disappear, and Android Studio should show a "Tests passed" message. This might even be too quick to see, and that's the advantage of using automated tests! Run it a few times if you want to test it is working all the time.
-
+
Just to see what happens when a test fails, change the check to look for `"1"` and run the test again. You should see an error message saying what happened and some hints on how to fix it. There's a lot of information there, but there's normally enough to know what went wrong.
-
+
Change you test back to check for `"0"` so that it passes again.
@@ -238,7 +238,7 @@ If you run this test it should take long enough that you can see what's going on
As well as running the tests one by one, you can run all your apps tests by pressing on the "double play" icon next to the `public class CookieClickerTest` line. This will run all the tests in this file one by one and let you know which ones pass and fail.
-
+
## Further information
You have now tested your cookie clicker app!
diff --git a/worksheets/kotlin/1-krumble/index.md b/src/docs/krumble.md
similarity index 99%
rename from worksheets/kotlin/1-krumble/index.md
rename to src/docs/krumble.md
index 21fe1b2..aac6a18 100644
--- a/worksheets/kotlin/1-krumble/index.md
+++ b/src/docs/krumble.md
@@ -1,8 +1,10 @@
---
-layout: page
-title: Introduction to Kotlin by building a cookie themed tinder
+id: krumble
+title: Krumble
---
+# Introduction to Kotlin by building a cookie themed tinder
+
The aim of this tutorial is to build a dating like app for cookies! We'll have a list of cookies to either like or dislike!
diff --git a/worksheets/2-layouts/index.md b/src/docs/layouts.md
similarity index 98%
rename from worksheets/2-layouts/index.md
rename to src/docs/layouts.md
index 99c9157..93590c6 100644
--- a/worksheets/2-layouts/index.md
+++ b/src/docs/layouts.md
@@ -1,8 +1,10 @@
---
-layout: page
-title: Android Dev - Layouts
+id: layouts
+title: Android Layouts
---
+# Android Dev - Layouts
+
(this is a mini tutorial that can be completed at any time)
## 1. Intro
diff --git a/worksheets/4-maps/index.md b/src/docs/maps.md
similarity index 99%
rename from worksheets/4-maps/index.md
rename to src/docs/maps.md
index cfa9dc5..be83a41 100644
--- a/worksheets/4-maps/index.md
+++ b/src/docs/maps.md
@@ -1,8 +1,9 @@
---
-title: Android Dev - Google Maps
-layout: page
+id: maps
+title: Google Maps
---
+# Android Dev - Google Maps
## Introduction
diff --git a/worksheets/0-resources.md b/src/docs/more-resources.md
similarity index 94%
rename from worksheets/0-resources.md
rename to src/docs/more-resources.md
index af80c14..b169cb2 100644
--- a/worksheets/0-resources.md
+++ b/src/docs/more-resources.md
@@ -1,7 +1,8 @@
---
layout: page
-title: Resources for Android Development
+title: Other Resources
---
+# Resources for Android Development
Everyone will need **Android Studio** - https://developer.android.com/studio/index.html
diff --git a/worksheets/0-setup/index.md b/src/docs/setup.md
similarity index 88%
rename from worksheets/0-setup/index.md
rename to src/docs/setup.md
index a5132e5..ec0e795 100644
--- a/worksheets/0-setup/index.md
+++ b/src/docs/setup.md
@@ -1,7 +1,7 @@
---
-layout: page
-title: Getting set up for Android development
+id: setup
---
+# Setting up Android Studio
*This tutorial will guide you through the process of setting up Android Studio, a phone or emulator, and then making sure it is all working by running an app on it. If you are attending an Android workshop at Codebar, we encourage you to work through this tutorial before you come along. If you get stuck, don't worry, just stop where you are, and a coach can help you on the day. It is very useful, however, if you can at least download Android Studio before you arrive as it is a big download and the internet can become a problem if too many people try and download it at once.*
@@ -12,7 +12,7 @@ You first need to [download the installer from this page](https://developer.andr
Once you have finished the installation, you will be greeted with this lovely welcome screen!
-
+
## 2. Creating your first Android project
We are now going to create an Android project within Android Studio. On the welcome screen, press *Start a new Android Studio project*. This will open a window which will ask you for a few things about your new application. Give it a name such as *My First App* and then fill in the company domain box. If you have your own website (such as `adalovelace.co.uk`) you can use that. If not, use something like `yourname.codebar.com`. It doesn't matter if this is a real website, this is just a way for Android to give your app a unique identifier.
@@ -21,21 +21,21 @@ We are now going to create an Android project within Android Studio. On the welc
You should also choose a location for the project which is where the files will be stored. When you're done, press the next button.
-
+
On the next screen, you are asked which Android phones you want to support. You can leave that at the default (which in my case is Android 4.4, KitKat). If you are interested, you can click on the *Help me choose* link to see what percentage of users run each version of Android. Make sure only *Phone & tablets* is checked and press *Next*.
> Did you notice that different versions of Android have different names? The third version of Android was called *Cupcake*. The fourth version was called *Doughnut*. Every version since has carried on with a "sweet treat" starting with the next letter of the alphabet. You can see a list of all the names [here](https://en.wikipedia.org/wiki/Android_version_history).
-
+
Once the downloads have completed, press *Next* again and then choose the type of *Activity* you want your app to use. An Activity is how Android refers to a screen within apps. Your app can have multiple activities, and you can move between them to see different parts of the app. For now, we want to create an app with a *Empty activity*. Make sure that is selected and then press *Next*.
-
+
Leave the next screen with all the default options (these are the names of the files Android Studio will create for you) and press *Finish*. In a few seconds, the main Android Studio window will open. For now, it will look blank, but we will be able to build and run our app from here in a minute.
-
+
First, we need to set up a phone for it to run on.
@@ -47,7 +47,7 @@ Grab you Android phone and plug it into your computer with a USB cable. If you a
Now, on your Android phone you need to make sure *USB debugging* is turned on. Go to the phone settings and then scroll down to *About phone*. On this screen, continue to tap on the *Build number* section until it shows a message saying *You are now a developer* (if only it were always that easy!).
-
+
Now you are in developer mode, press back and you should see a new *Developer options* menu. Tap into there and make sure the switch at the top of the screen is turned on. Then scroll down and make sure *USB Debugging* is also turned on.
@@ -58,29 +58,29 @@ First, in Android Studio with your project open, Launch the Android Virtual Devi
On this screen, you need to pick which type of device you want to create. Feel free to browse around, but we are going to choose the *Phone* category and then the *Pixel* device. Press *Next*.
-
+
We are now asked to choose which version of Android we want to use. Make sure the recommended tab is selected and then select any of the options by pressing the *Download* link. You might be asked to accept some terms to continue. Once the download is complete you can press *Finish* to go back to the screen and select that version of Android and press *Next* again.
-
+
On the next screen leave everything as it is and press *Finish*. This will finish creating the emulator and add it to the list with a name like *Pixel API 23* (your name might be slightly different if you chose a different Android version).
-
+
You can now start the emulator by pressing the play button next to your newly created emulator. It will take a few minutes to start but will eventually show an Android phone in a window on your computer.
-
+
Having troubles setting up the emulator? Check out this [troubleshooting guide](https://developer.android.com/studio/run/emulator-troubleshooting).
## 4. Running the app on your phone/emulator
We are now going to run your first application to make sure everything is working. All you need to do is press the run button in the toolbar of your Android Studio project window and then make sure your phone or emulator is selected in the window which pops up.
-
+
After a short time, the app will be built and run on your phone or emulator. It should look like this:
-
+
That's it! You're all set up and ready for the [first tutorial]({{ site.baseurl }}/worksheets/1-introduction/)! You can also view some more links over on the [resources page]({{ site.baseurl }}/worksheets/0-resources.html).
diff --git a/src/website/README.md b/src/website/README.md
new file mode 100644
index 0000000..7391779
--- /dev/null
+++ b/src/website/README.md
@@ -0,0 +1,193 @@
+This website was created with [Docusaurus](https://docusaurus.io/).
+
+# What's In This Document
+
+* [Get Started in 5 Minutes](#get-started-in-5-minutes)
+* [Directory Structure](#directory-structure)
+* [Editing Content](#editing-content)
+* [Adding Content](#adding-content)
+* [Full Documentation](#full-documentation)
+
+# Get Started in 5 Minutes
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ yarn
+```
+2. Run your dev server:
+
+```sh
+# Start the site
+$ yarn start
+```
+
+## Directory Structure
+
+Your project file structure should look something like this
+
+```
+my-docusaurus/
+ docs/
+ doc-1.md
+ doc-2.md
+ doc-3.md
+ website/
+ blog/
+ 2016-3-11-oldest-post.md
+ 2017-10-24-newest-post.md
+ core/
+ node_modules/
+ pages/
+ static/
+ css/
+ img/
+ package.json
+ sidebar.json
+ siteConfig.js
+```
+
+# Editing Content
+
+## Editing an existing docs page
+
+Edit docs by navigating to `docs/` and editing the corresponding document:
+
+`docs/doc-to-be-edited.md`
+
+```markdown
+---
+id: page-needs-edit
+title: This Doc Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Editing an existing blog post
+
+Edit blog posts by navigating to `website/blog` and editing the corresponding post:
+
+`website/blog/post-to-be-edited.md`
+```markdown
+---
+id: post-needs-edit
+title: This Blog Post Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+# Adding Content
+
+## Adding a new docs page to an existing sidebar
+
+1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
+
+```md
+---
+id: newly-created-doc
+title: This Doc Needs To Be Edited
+---
+
+My new content here..
+```
+
+1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
+
+```javascript
+// Add newly-created-doc to the Getting Started category of docs
+{
+ "docs": {
+ "Getting Started": [
+ "quick-start",
+ "newly-created-doc" // new doc here
+ ],
+ ...
+ },
+ ...
+}
+```
+
+For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding a new blog post
+
+1. Make sure there is a header link to your blog in `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+headerLinks: [
+ ...
+ { blog: true, label: 'Blog' },
+ ...
+]
+```
+
+2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
+
+`website/blog/2018-05-21-New-Blog-Post.md`
+
+```markdown
+---
+author: Frank Li
+authorURL: https://twitter.com/foobarbaz
+authorFBID: 503283835
+title: New Blog Post
+---
+
+Lorem Ipsum...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+## Adding items to your site's top navigation bar
+
+1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+{
+ headerLinks: [
+ ...
+ /* you can add docs */
+ { doc: 'my-examples', label: 'Examples' },
+ /* you can add custom pages */
+ { page: 'help', label: 'Help' },
+ /* you can add external links */
+ { href: 'https://github.com/facebook/docusaurus', label: 'GitHub' },
+ ...
+ ],
+ ...
+}
+```
+
+For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding custom pages
+
+1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
+1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
+
+`website/siteConfig.js`
+```javascript
+{
+ headerLinks: [
+ ...
+ { page: 'my-new-custom-page', label: 'My New Custom Page' },
+ ...
+ ],
+ ...
+}
+```
+
+For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
+
+# Full Documentation
+
+Full documentation can be found on the [website](https://docusaurus.io/).
diff --git a/src/website/core/Footer.js b/src/website/core/Footer.js
new file mode 100644
index 0000000..497af51
--- /dev/null
+++ b/src/website/core/Footer.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+class Footer extends React.Component {
+ docUrl(doc, language) {
+ const baseUrl = this.props.config.baseUrl;
+ const docsUrl = this.props.config.docsUrl;
+ const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
+ const langPart = `${language ? `${language}/` : ''}`;
+ return `${baseUrl}${docsPart}${langPart}${doc}`;
+ }
+
+ pageUrl(doc, language) {
+ const baseUrl = this.props.config.baseUrl;
+ return baseUrl + (language ? `${language}/` : '') + doc;
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
+
+module.exports = Footer;
diff --git a/src/website/package.json b/src/website/package.json
new file mode 100644
index 0000000..b012923
--- /dev/null
+++ b/src/website/package.json
@@ -0,0 +1,14 @@
+{
+ "scripts": {
+ "examples": "docusaurus-examples",
+ "start": "docusaurus-start",
+ "build": "docusaurus-build",
+ "publish-gh-pages": "docusaurus-publish",
+ "write-translations": "docusaurus-write-translations",
+ "version": "docusaurus-version",
+ "rename-version": "docusaurus-rename-version"
+ },
+ "devDependencies": {
+ "docusaurus": "^1.14.0"
+ }
+}
diff --git a/src/website/pages/en/help.js b/src/website/pages/en/help.js
new file mode 100644
index 0000000..2b790e4
--- /dev/null
+++ b/src/website/pages/en/help.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+function Help(props) {
+ const {config: siteConfig, language = ''} = props;
+ const {baseUrl, docsUrl} = siteConfig;
+ const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
+ const langPart = `${language ? `${language}/` : ''}`;
+ const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
+
+ const supportLinks = [
+ {
+ content: `Learn more using the [documentation on this site.](${docUrl(
+ 'doc1.html',
+ )})`,
+ title: 'Browse Docs',
+ },
+ {
+ content: 'Ask questions about the documentation and project',
+ title: 'Join the community',
+ },
+ {
+ content: "Find out what's new with this project",
+ title: 'Stay up to date',
+ },
+ ];
+
+ return (
+
+
+
+
+
Need help?
+
+
This project is maintained by a dedicated group of people.
+
+
+
+
+ );
+}
+
+module.exports = Help;
diff --git a/src/website/pages/en/index.js b/src/website/pages/en/index.js
new file mode 100644
index 0000000..60ddb09
--- /dev/null
+++ b/src/website/pages/en/index.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react');
+
+const CompLibrary = require('../../core/CompLibrary.js');
+
+const MarkdownBlock = CompLibrary.MarkdownBlock; /* Used to read markdown */
+const Container = CompLibrary.Container;
+const GridBlock = CompLibrary.GridBlock;
+
+class HomeSplash extends React.Component {
+ render() {
+ const {siteConfig, language = ''} = this.props;
+ const {baseUrl, docsUrl} = siteConfig;
+ const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`;
+ const langPart = `${language ? `${language}/` : ''}`;
+ const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
+
+ const SplashContainer = props => (
+
As you write a log message inside each method, speak to your coach about when you think this might get called!
Speak to your coach about your coach and see where they’ve learned the hard way about the activity lifecycle! Has it ever caused an app they’ve written to crash, or behave in a way they didn’t intend?
Try to work through positioning an element once on your own, then ask your coach for some feedback on how they might’ve positioned it. Learn from that and then work on the next element!
Speak to your coach if you’d like advice on how we handle supporting many different device sizes. For more information take a look at 
in the toolbar. On the screen which opens, press the Create Virtual Device button.
next to your newly created emulator. It will take a few minutes to start but will eventually show an Android phone in a window on your computer.
in the toolbar of your Android Studio project window and then make sure your phone or emulator is selected in the window which pops up.
- 
-