diff --git a/assets/main.css b/assets/main.css index db8cdd7..5dedb71 100644 --- a/assets/main.css +++ b/assets/main.css @@ -25,6 +25,12 @@ h2 { color: #A4C639; } +.emoji-kotlin { + font-size: 72px; + margin-top: 22px; + color: #3BAFDA; +} + pre { background-color: #282c34; padding: 15px; diff --git a/images/java.png b/images/java.png new file mode 100644 index 0000000..0737cf5 Binary files /dev/null and b/images/java.png differ diff --git a/images/kotlin.png b/images/kotlin.png new file mode 100644 index 0000000..52a99f9 Binary files /dev/null and b/images/kotlin.png differ diff --git a/index.md b/index.md index 4d75fb7..05a38ba 100644 --- a/index.md +++ b/index.md @@ -25,79 +25,33 @@ This is the home for the codebar android tutorials! These are designed to be use
-
+

- phone_android - touch_app - cake + Java

-

Introduction

-

The best starting place to learn Android by building a cookie clicker

- Read Tutorial + +

These are where are typical android tutorials go, they use the Java Language

+ Java tutorials
-
+
-

- personal_video - touch_app - phone_android +

+ Kotlin

-

Espresso UI Testing

-

Automatically test your cookie clicker app using Espresso

- Read Tutorial + +

These are our shiny new tutorials which use the Kotlin Language instead.

+ Kotlin Tutorials
-
-
-

- view_module - person - picture_in_picture_alt -

-
-

Layouts

-

Go further into how the layout system works in Android

- Read Tutorial -
-
-
-
-
-

- stay_current_portrait - update - stay_current_landscape -

-
-

Activity Lifecycle

-

Learn how the android activity lifecycle works

- Read Tutorial -
-
-
-
-
-

- place - near_me - my_location -

-
-

Google Maps

-

Learn how to put Google Maps into your own app!

- Read Tutorial -
-
-
diff --git a/java.md b/java.md new file mode 100644 index 0000000..a1a2d88 --- /dev/null +++ b/java.md @@ -0,0 +1,103 @@ +--- +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

+ Get Set Up +
+
+
+ +## Worksheets + +
+ +
+
+

+ phone_android + touch_app + cake +

+
+

Introduction

+

The best starting place to learn Android by building a cookie clicker

+ Read Tutorial +
+
+
+ +
+
+

+ personal_video + touch_app + phone_android +

+
+

Espresso UI Testing

+

Automatically test your cookie clicker app using Espresso

+ Read Tutorial +
+
+
+ +
+
+

+ view_module + person + picture_in_picture_alt +

+
+

Layouts

+

Go further into how the layout system works in Android

+ Read Tutorial +
+
+
+ +
+
+

+ stay_current_portrait + update + stay_current_landscape +

+
+

Activity Lifecycle

+

Learn how the android activity lifecycle works

+ Read Tutorial +
+
+
+ +
+
+

+ place + near_me + my_location +

+
+

Google Maps

+

Learn how to put Google Maps into your own app!

+ Read Tutorial +
+
+
+ +
diff --git a/kotlin.md b/kotlin.md new file mode 100644 index 0000000..1054202 --- /dev/null +++ b/kotlin.md @@ -0,0 +1,45 @@ +--- +title: Codebar Android Kotlin Workshop Resources +layout: page +redirect_from: /kotlin/ +--- + +This is the home for the codebar android (Kotlin) tutorials! + +
+
+

+ star + android + star +

+
+

Getting Setup

+

All the things you need to do before attending a codebar android workshop

+ Get Set Up +
+
+
+ +## Worksheets + +
+ +
+
+

+ phone_android + touch_app + favorite +

+
+

Introduction

+

The best starting place to learn Android by building a cookie themed tinder app

+ Read Tutorial +
+
+
+ + + +
diff --git a/worksheets/kotlin/1-krumble/index.md b/worksheets/kotlin/1-krumble/index.md new file mode 100644 index 0000000..89671ae --- /dev/null +++ b/worksheets/kotlin/1-krumble/index.md @@ -0,0 +1,195 @@ +--- +layout: page +title: 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! + +![Imgur](https://i.imgur.com/3u9ATGZ.png) + +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 . + +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. + +![Imgur](https://i.imgur.com/7a8hL4R.png) + +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 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 `` and a `` 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: + +```xml + + + +``` + +One of the most important features of our cookie clicker will be our cookie - we can create an ``, 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. + +```xml + +``` +> 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 , you can also check out this stack overflow post + + +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 ``'s for this. Make sure you position them, and give them an id. + +Finally, we can add two buttons. These are `