Build Your First App : Android Studio

rinaldy js

11 min readJan 25, 2019

1.1 Android Studio and Hello World

Download Android Studio di https://developer.android.com/studio/

2. Buka file yang telah di download untuk memulai instalasi, lalu klik next

3. Halaman untuk memilih komponen yang akan di install, Klik next untuk melanjutkan proses instalasi

4. Pilih lokasi penginstalan, lokasi default adalah C:\Program Files\Android\Android Studio, lalu next

5. Pilih Install, maka proses pengintalan akan dimulai

6. Setelah proses instalasi selesai, klik next

7. Lalu pilih finish dengan mencentang start android studio, untuk memulai android studio

8. Pilih do not import setting, lalu ok

9. Pilih next

9. Pilih tipe setup standart, lalu klink next

10. Pilih UI atau tampilan yang diinginkan

11. Kemudian pilih finish, android studio akan mendownload komponen yang dibutuhkan, tunggu sampai selesai

CREATE HELLO WORLD

Pilih start a new Android Studio Project, untuk membuat project baru pada android studio

2. Pilih layout project yang akan dibuat

3. Pada halaman ini kita akan menkonfigurasi project yang akan kita buat, seperti mengubah nama, menentukan minimum API level, dan menentukan lokasi penyimpanan

4. Setelah itu android studio akan mengintall komponen yang dibutuhkan untuk pembuatan aplikasi yang akan kita buat

5. Setelah itu kita akan masuk pada tampilan pada halaman pembuatan aplikasi

USE A VIRTUAL DEVICE

Masuk ke Tools > Android > AVD Manager, Lalu pilih Create Virtual Device

2. Kemudian pilih device yang ingin digunakan

3. Pilih versi android yang akan digunakan, lalu download

4. Pilih accept lalu next untuk melakukan proses download

5. Tunggu proses download sampai selesai

6. Setelah proses selesai klik finish

7. Setelah itu di halaman ini kita bias mengubah nama AVD kita dan mengganti orientasi layernya

8. Setelah berhasil membuat AVD Klik icon start untuk menjalankan aplikasi, lalu setelah itu pilih device yang telah dibuat yang digunakan untuk menjalankan aplikasi

9. Maka aplikasi hello world yang kita buat akan dijalankan pada device virtual yang kita buat

USE PHYSICAL DEVICE

Pertama — tama aktifkan dulu usb debugging pada smartphone untuk mengaktifkannya, masuk ke setting > developer menu, lalu sambungkan device atau smartphone kita ke laptop dengan menggunakan usb

Note: developer menu bias diaktifkan dengan mengklik build number pada menu about 7 kali

2. Lalu jalankan aplikasi dengan mengklik icon start, setelah itu pilih connected device lalu pilih ok

3. Setelah itu kita akan mengintall komponen yang dibutuhkan tunggu sampai selesai

4. Maka setelah itu aplikasi yang kita buat akan muncul pada smartphone kita

Change the app Gradle Configuration

Double klik pada build.gradle(Module: app)

2. Lalu ubah minSdkVersion menjadi 17, klik Sync Now yang muncul ketika melakukan perubahan

1.2 Part A: Your First Interface UI

Create And Explore New Project

Pilih file > new > new project

2.Pilih template sesuai kebutuhan

3. Buat project dengan nama Hello Toast

Add View Element In the Layout Editor

Masuk ke tab activity_main.xml

2. Delete element textview untuk menghilangkan tulisan

3. Drag and drop button dari palette ke layer

4. Drag and drop lagi button

Change UI Element Attribute

1. Klik button 2 kali maka attributes akan muncul di sisi kanan

2. Lalu atur button dengan klik 2 kali button yang telah dibuat

Change the Buttoh Attributes

Klik Button dan edit Attributnya dengan parameter di bawah ini

ID : button _toast

background : @color/colorPrimary

textColor : @android:color/white

text : Toast

2. Lakukan hal yang sama pada Button ke-dua dengan ketentuan

ID : button_count

text: Count

3. Lakukan juga pada button kedua namun Namanya saja yang diganti menjadi button_count

Add a TextEdit And Set Its Attributes

Drag and drop TextView ke dalam layout, lalu hubungkan constraint atas TextView ke contraint bawah Button Toast. Hubungkan juga constraint bawah TextView dengan constraint atas Button Count.

2. Ubah Attributes pada TextView seperti di bawah ini di bawah ini

ID : show_count

text : 0

textSize : 160sp

textStyle : B (Bold)

textAlignment : ALIGNCENTER

layout_width & layout_height : match_constraint

textColor : @color/colorPrimary

background : #FFFF00

gravity : center_ver

Edit The Layout In XML

Pada kata “Toast”, tekan Alt+Enter, dan pilih Extract string resource. Lalu masukkan “button_label_toast” pada “Resource name”. Kemudian klik OK, ulangi pada button count dan text 0 dengan resource name count_initial_value

Masuk ke app > res > values > String.xml, lalu sesuaikan kodingan seperti ini

Add onClick handlers for the button

Pada xml editor, tambahkan android:onClick=”showToast” pada baris terakhir, lalu klik red bulb yang muncul dan pilih create showToast(View) in MainActivity

2. Lakukan hal yang sama tambahkan countUp pada button count

3. Tambahkan code pada mainActivity.java seperti gambar dibawah ini

4. Setelah selesai sekarang coba run aplikasi, maka hasilnya akan seperti ini

Ketika button toast di klik akan muncul tulisan hello toast

Ketika button count di klik maka angka akan bertambah

1.2 Part B: The Layout Editor

Create Layout Variants

klik tab Design Pada activity_main.xml,. lalu Klik Orientation in Editor pada toolbar dan ubah menjadi landscape

2. Create landscape orientation pada orientation toolbar

3. Ubah device menjadi nexus 5

4. Masuk ke mode text lalu ubah textSize menjadi 120sp

5. Kembali ke mode Design, klik Orientation in Editor pada toolbar, pilih Create layout x-large Variation(tablet mode)

6. Ubah width control menjadi wrap dan atur posisi sesuai keingan

7. Ubah ukuran button dan letak constraint, lalu ubah ubah textview sehinga hasilnya seperti ini

8. Ubah orientasi menjadi landscape

Change The Layout To LinearLayout

Buka activity_main.xml, ubah <android.support.constraint.ConstraintLayout menjadi <LinearLayout. Dan tambahkan android:orientation=”vertical” di bawah android:layout_height.

Pada button_toast, ubah android:layout_width=”0dp” menjadi android:layout_widht=”match_parent”.

lalu hapus beberapa attribute ini.

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toTopOf=”parent”

2. pada element button_count, ubah android:layout_width=”0dp” menjadi android:layout_width=”match_parent”.

hapus beberapa attribute ini.

app:layout_constraintBottom_toBottomOf=”parent”

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

3. pada element show_count, udah attribute :

android:layout_width=”0dp” menjadi android:layout_width=”match_parent”

android:layout_height=”0dp” menjadi android:layout_height=”wrap_content”

hapus beberapa attribute ini.

app:layout_constraintBottom_toTopOf=”@+id/button_count”

app:layout_constraintEnd_toEndOf=”parent”

app:layout_constraintStart_toStartOf=”parent”

app:layout_constraintTop_toBottomOf=”@+id/button_toast”

4. Pindahkan code button_count dengan semua attributesnya di antara tag /> dari TextView dan </LinearLayout>

5. Pada Textview tambahkan android layout weight = 1

Change The Layout To RelativeLayout

Pada main.xml ubah <LinearLayout manjadi <RelativeLayout

2. Tambahkan android:layout_below dan android:layout_centerHorizontal=”true” di dalam element button_count

3. Lalu tambahkan beberapa attribute pada show_count, diantaranya:

android:layout_below=”@+id/button_toast

android:layout_alignParentLeft=”true”

android:layout_alignParentStart=”true”

4. hapus attribute android:layout_weight=”1" pada show_count

1.3 Text and Scrolling Views

Add And Edit TextView Elements

Buat Project Baru

2. Masuk ke activity_main.xml, ubah android.support.constraint.ConstraintLayout manjadi RelativeLayout lalu hapus semuakodingan yang berhubungan dengan ConstraintLayout.

3. Buat element Textview seperti dibawah ini

4. Buat string resource untuk android:text dengan value article_title

5. Buat dimension resource untuk padding dengan value padding_reguler

6. Tambahkan kembali Textview diatas hello world dengan kodingan seperti dibawah ini

7. Buat String Resource untuk article subtitle

8. Lalu pada textview hello world masukan kodingan seperti ini

9. Extrack dimension resource untuk line spacing

10. Extract Resource pada article text

11. Reformat kodingan agar lebih dimengerti dengan masuk menu > code > reformat code

12. Masukan article kedalam Strings.xml pada tag article text

13. Jalankan aplikasi dengan klik icon start, maka hasilnya akan seperti ini

Add a ScrollView And an Active Web Link

1. Tambahkan attribute android:autoLink=”web” pada element article

2. Tambahkan element ScrollView siantara element article_subheading dan element article dengan attribute seperti di bawah ini. Namun penutup tag </ScrollView ditambahkan setelah element Article, sehingga semua attribute element article termasuk ke dalam ScrollView.

3. Pada element article, hapus attribute android:layout_below=”@id/article_subheading” dan pindahkan ke dalam attribute element ScrollView.

4. Setelah itu jalankan aplikasi,, maka aplikasi akan bias melakukan scroll

Scroll Multiple Elements

1. Pada activity_main.xml, tambahkan elemen LinearLayout di atas element article dengan ketentuan tag penutup </LinearLayout berada di anatara element article dan tag penutup </ScollView, sehinggaelement article dan LinearLayout berada di dalam ScrollView.

2. Lalu pindahkan an element article_subheading di atas element article, sehingga element article_subheading masuk ke dalam element Linear Layout.

3. Hapus attibure android:layout_below=”@id/article_heading” dari element article_subheading karena attribute tersebut mengalami konflik dengan attribute LinearLayout.

4. Dan ubah attribute android:layout_below=”@id/article_subheading” menjadi android:layout_below=”@id/article_heading”.