Panduan Lengkap Android Studio Pemula
Panduan Lengkap Android Studio Pemula
CHAPTER 1
1
BAB 1
MEMBANGUN APLIKASI PERTAMA
1
Gambar 1.3. Folder instalasi JDK
5. Setelah menemukan folder bin copy alamat folder lalu masuk pada menu
control panel dan cari advance system setting seperti pada alamat berikut
Control Panel\System and Security\System. Klik pada menu tersebut maka
akan muncul System Properties lalu mencari tombol environment variable
seperti yang ditampilkan pada Gambar 1.4.
6. Setelah muncul seperti tampilan Gambar 1.4 maka klik tombol environment
variables kemudian pada menu system variables mencari menu path
kemudian klik edit.
7. Maka akan terbuka window baru yaitu edit system variable. arahkan kursor
pada box bagian variable value dan arahkan kursor kebagian paling kanan.
tambahkan titik koma (;) dan paste alamat lokasi folder JDK yang telah
kita copy sebelumnya dan klik ok seperti yang ditampilkan pada Gambar
1.5.
2
Gambar 1.5. Pemasangan alamat bin JDK
3
11. Tunggu sampai proses downloading component selesai dan proses instalasi
selesai.
12. Kemudian untuk jangan lupa melakukan installasi pada SDK untuk
komponen tambahan lainnya.
13. Setelah installasi selesai maka secara otomatis akan muncul jendela
welcome to android studio kemudian untuk memulai sebuah projek klik
start a new android studio project seperti pada Gambar 1.7.
14. Setelah itu akan muncul jendela untuk pemilihan projek. Pilih empty activity
yang ditunjukkan pada Gambar 1.8.
4
Gambar 1.9. Konfigurasi projek
16. Kemudian akan muncul halaman utama pada android studio, tunggu sampai
gradle sync selesai. Kemudian untuk menampilkan tulisan hello world pada
layar aplikasi tidak memerlukan edit dimana-mana hanya saja masuk pada
code activity_main. Disini saya menambahkan nama saya diatas tulisan
hello world dengan menambahkan menu text view seperti yang ditampilkan
pada Gambar 1.10.
5
17. Kemudian untuk melakukan desain pada tampilan pada masuk ke menu
design disebelah menu text dibagian bawah. Maka akan muncul tambilan
berikut untuk melakukan perubahan tata letak tulisan seperti yang
ditunjukkan pada Gambar 1.11.
20. Setelah diketuk 7 kali, jika terdapat notifikasi untuk melakukan otosisasi
tekan saja ok. lalu, masuk ke opsi pengembangan kemudian setting seperti
Gambar 1.13.
6
Gambar 1.13. Opsi pengembang
21. Setelah itu lakukan running program pada android studio dan pastikan
device android sudah terpasang, kemudian setelah melakukan run program
tunggu sampai aplikasi muncul di android seperti pada Gambar 1.14.
22. Kemdian untuk melihat logcat atau aktivitas pada saat aplikasi di run dapat
dilihat pada menu logcat dibagian bawah kemudian klik bagian tersebut
pada awalnya pada bagian log level pada bagian drop down masih terpilih
verbose kemudian pada pilihan tersebut ganti ke debug. Maka dapat dilihat
seperti Gambar 1.15.
7
Gambar 1.15. Logcat
23. Untuk dapat menambahkan pernyataan log ke aplikasi maka pertama harus
merubah pada menu setting di file > setting sesuai dengan Gambar 1.16.
8
Gambar 1.18. Logcat MainActivity
26. Kemudian pada Gradle Scripts pada module:app dan pada Android
Manifest tidak perlu menambahkan program.
27. Selesai
2. Setelah itu akan muncul jendela untuk pemilihan projek. Pilih empty activity
seperti pada Gambar 1.20.
9
3. Kemudian, akan muncul jendela penamaan projek, tempat penyimpanan
dan minimal OS android yang digunakan. Saya memberi nama pada projek
saya “Hello Toast” seperti yang ditunjukkan pada Gambar 1.21.
5. Lalu yang kedua yaitu membuat program untuk button, yang pertama yaitu
untuk button toast yang kedua yaitu digunakan untuk button count. Di
dalam program button ini juga terdapat beberapa variabel untuk
10
perumpamaan yang nantinya akan diterjemahkan pada program xml nya.
Button yang pertama ini digunakan untuk button Toast seperti pada Gambar
1.23.
6. Kemudian, untuk mengatur font angka untuk counting akan diatur dalam
program TextView dan dilanjut dengan pemrograman button kedua yaitu
button count.sama halnya yang sebelumnya pada program Text View dan
Button untuk Count terdapat beberapa variabel atau perumpamaan yang
nantinya akan diisi pada program xml yang dituju. Seperti pada Gambar
1.24.
7. Lalu Pada Fungsi Xml nya pada program untuk membuat Hello Toast saya
membuat 3 buah program xml yang pertama yaitu dimens.xml, color.xml,
string.xml yang akan digunakan untuk program sebagai pendeklarasian
variabel pada Activity_Main.xml. Pertama yaitu program xml untuk
dimensi yaitu disini saya menggunakan program xml dimens dengan nama
11
dimens.xml dan untuk mengatur layout pada aplikasi maka tulis program
seperti pada Gambar 1.25.
9. Kemudian untuk mengatur angka atau tulisan untuk counting, yaitu tulislah
program pada string.xml untuk dapat mengatur angka pada counting, angka
permulaan dan juga notice pada saat button Toast di klik. Seperti pada
Gambar 1.27.
12
Gambar 1.29. Tampilan design program
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mShowCount = (TextView) findViewById(R.id.show_count);}
13
mShowCount.setText(Integer.toString(mCount)); }
12. Tetapi, ketika menambahkan fungsi dimens, color dan string pada program
ActivityMain.xml kemudian warna pada program merah, maka bukan
berarti program yang di input-kan salah untuk me-resolve masalah tersebut
yaitu klik pada program yang merah tersebut kemudian akan muncul lampu
merah atau notifikasi eror disisi kiri program kemudian klik lampu tersebut
kemudian pilih opsi pertama untuk menambahkan dan juga memberikan
inisialisasi program tersebut pada fungsi xml. Sehingga file program xml
akan terbentuk seperti yang ditunjukkan pada Gambar 1.30.
13. Setelah program selesai semua dibuat dan tidak eror pada program,
kemudian lakukan proses running program pada emulator android. Disini
saya langsung saja di run pada handphone atau android saya, yaitu saya
menggunakan Xiaomi Redmi 4A. untuk dapat connect dengan android
studio maka hp harus dalam opsi pengembangan.
14. Setelah masuk dalam opsi pengembangan, jika terdapat notifikasi untuk
melakukan otosisasi tekan saja ok. lalu, masuk ke opsi pengembangan
kemudian setting seperti gambar 1.31.
14
Gambar 1.31. Opsi Pengembang
15. Setelah itu akan muncul jika device sudah ditemukan yaitu Xiaomi Redmi
4A kemudian langsung saja untuk melakukan running program seperti pada
Gambar 1.32.
16. Untuk memastikan bahwa running program telah berhasil. Maka bisa
dilihat pada tab run seperti yang ditunjukkan pada Gambar 1.33.
15
Gambar 1.33. Tab run
17. Kemudian setelah melakukan run program tunggu sampai aplikasi muncul
di android seperti yang ditampilkan pada Gambar 1.34.
2. Setelah itu akan muncul jendela untuk pemilihan projek. Pilih empty activity
seperti yang ditampilkan pada Gambar 1.36.
16
Gambar 1.36. Template projek
4. Kemudian akan muncul halaman utama pada android studio, tunggu sampai
gradle sync selesai.
5. Kemudia terdapat 3 buah Text View dan 1 Buah Scroll Text. Untuk Text
view pertama yaitu untuk mengatur heading, lalu Text View yang kedua
digunakan untuk membuat Sub Heading dan mengatur tata letaknya
dibawah heading dan untuk segala text pengisi dari Heading, Sub Heading
dan didalam Artikel dapat diisi pada file String.xml Kemdian yang ketiga
yaitu membuat sebuah teks panjang menggunakan menggunakan Scroll
17
View yang didalamnya terdapat Text View dan button untuk mengantur
artikel dan membuat button toast. Sehingga untuk keseluruhan program dari
activity_main adalah seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="@dimen/padding_regular"
tools:context=".MainActivity">
<TextView
android:id="@+id/article_Heading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="@dimen/padding_regular"
android:text="@string/article_title"
android:textAppearance="@android:style/TextAppearance.Large"
android:textColor="@android:color/white"
android:textColorHighlight="@color/colorAccent"
android:textSize="19sp"
android:textStyle="bold"
app:fontFamily="serif-monospace" />
<TextView
android:id="@+id/article_Subheading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/article_Heading"
android:padding="@dimen/padding_regular"
android:text="@string/article_subtitle"
android:textAppearance="@android:style/TextAppearance"
android:textStyle="bold" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
18
android:layout_below="@id/article_Subheading">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/txtV_Article"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:autoLink="web"
android:lineSpacingExtra="5sp"
android:scrollbars="vertical"
android:text="@string/article_content"
app:fontFamily="casual"/>
<Button
android:id="@+id/btn_Toast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="YuliaEka"
android:paddingTop="@dimen/padding_regular"
android:text="@string/toast_eka" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
6. Kemudian menambahkan file xml pada app -> Res -> Values. Yaitu untuk
menambahkan file dimens.xml yang digunakan untuk mengisi padding pada
variabel @dimen yang dibuat pada tab activity_main. Xml. Maka untuk
programnya seperti yang ditampilkan pada Gambar 1.38.
19
7. Kemudian untuk mengisikan teks pada content dan mengganti teks pada
heading dan sub heading dilakukan pada file string.xml. maka tuliskan
program seperti berikut atau sesuai dengan keinginan.
<resources>
<string name="app_name">Scroll Text</string>
<string name="article_title">Mechatronics
Engineering</string>
<string name="article_subtitle">About
Mechatronics</string>
<string name="article_content">
<b>Hello</b> I\'m Writer : <i>Yulia Eka Mawarni</i>
\n
Ceck My Blog at https://freak.home.blog/
\n\n
<b><i>Mechatronics Engineering ;</i></b>
\n
<b><i>Mechatronics</i></b>, which is also called
Mechatronics Engineering, is a multidisciplinary branch of
engineering thas focuses on the engineering of both
electrical and mechanical systems, and also includes a
combination of robotics, electronics, computer,
telecommunications, system, control, and product engineering.
As technology advanse over time, various subfields of
engienering have succeeded in both adapting and multiplying.
The intention og Mechatronics is to produce a design solution
that unifies each of these various subfields. Originally, the
field of mechatronics was intended to be nothing more than
combination of mechanics and electronics, hence the name
being a portmanteau of mechanics and electronics; however, as
the complexity of technical systems continued to evolve, the
definition had been broadened to include more technical
areas.
\n\n
The word mechatronics originated in japanese-english
and was created by Tetsuro Mori, an engineer of Yaskawa
Electric Corporation. The Word mechatronics was registered as
trademark by the company in Japan with the registration
number of "46-32714" in 1971. However, the company later
released the right to use the word to public whereupon the
word began being used across the world. Nowadays, the word is
translated into many languages and is considered an essential
term for industry.
20
\n\n
</string>
<string name="toast_eka">Hello Writer!!</string>
<string name="toast_content">Yulia Eka</string>
</resources>
10. Tetapi, ketika menambahkan fungsi dimens dan string pada program
ActivityMain.xml kemudian warna pada program merah, maka bukan
berarti program yang di input-kan salah untuk me-resolve masalah tersebut
yaitu klik pada program yang merah tersebut kemudian akan muncul lampu
merah atau notifikasi eror disisi kiri program kemudian klik lampu tersebut
kemudian pilih opsi pertama untuk menambahkan dan juga memberikan
21
inisialisasi program tersebut pada fungsi xml. Sehingga file program xml
akan terbentuk.
11. Setelah program selesai semua dibuat dan tidak eror pada program,
kemudian lakukan proses running program pada emulator android. Disini
saya langsung saja di run pada handphone atau android saya, yaitu saya
menggunakan Xiaomi Redmi 4A. untuk dapat connect dengan android
studio maka hp harus dalam opsi pengembangan.
12. Setelah masuk dalam opsi pengembangan, jika terdapat notifikasi untuk
melakukan otosisasi tekan saja ok. lalu, masuk ke opsi pengembangan
kemudian setting seperti Gambar 1.41.
13. Setelah itu akan muncul jika device sudah ditemukan yaitu Xiaomi Redmi
4A kemudian langsung saja untuk melakukan running program seperti pada
Gambar 1.42.
22
14. Untuk memastikan bahwa running program telah berhasil. Maka bisa
dilihat pada tab run seperti pada Gambar 1.43.
23
Gambar 1.45. Tampilan menu awal
2. Setelah itu akan muncul jendela untuk pemilihan projek. Untuk mencoba
template yang ada misalnya pilih fragment + ViewModel seperti yang
ditampilkan pada Gambar 1.46.
24
Gambar 1.47. Konfigurasi projek
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
25
app:menu="@menu/bottom_nav_menu" />
<fragment
android:id="@+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="@id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="@navigation/mobile_navigation" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:ignore="MissingConstraints" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tekan Tombol Bawah Ini : "
android:textSize="90px"
android:textAlignment="center"
tools:ignore="MissingConstraints" />
<Button
android:id="@+id/Tekan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Press"
android:textSize="20dp"
android:background="@android:color/holo_blue_dark"
android:onClick="press"
tools:ignore="MissingConstraints" />
<TextView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="//"
android:textSize="30dp"
android:textAlignment="center"
tools:ignore="MissingConstraints" />
</LinearLayout>
26
</androidx.constraintlayout.widget.ConstraintLayout>
17. Setelah program selesai semua dibuat dan tidak eror pada program,
kemudian lakukan proses running program pada emulator android. Disini
saya langsung saja di run pada handphone atau android saya, yaitu saya
menggunakan Xiaomi Redmi 4A. untuk dapat connect dengan android
studio maka hp harus dalam opsi pengembangan.
18. Setelah masuk dalam opsi pengembangan, jika terdapat notifikasi untuk
melakukan otosisasi tekan saja ok. lalu, masuk ke opsi pengembangan
kemudian setting seperti Gambar 1.49.
27
Gambar 1.49. Opsi pengembang
19. Setelah itu akan muncul jika device sudah ditemukan yaitu Xiaomi Redmi
4A kemudian langsung saja untuk melakukan running program seperti pada
Gambar 1.50.
20. Untuk memastikan bahwa running program telah berhasil. Maka bisa
dilihat pada tab run seperti pada Gambar 1.51.
21. Kemudian setelah melakukan run program tunggu sampai aplikasi muncul
di android dan jika berhasil maka akan muncul aplikasi Template pada
Android seperti pada Gambar 1.52.
28