TUGAS

PEMROGRAMAN MOBILE 1

Disusun Oleh Kelompok 5 dengan anggota :

Charir Maulana Achsan 16.11.0217Bagus Anjas P 16.11.0221Mustofa Bayu Rahmat 16.11.0245Esa Rizki Anandrian 16.11.0248Danang Aldy Kurniawan 16.11.0267Tri Wahyono 16.11.0284Sarif Hidayatulloh 16.11.0286Muchamad Arief Sidik 16.11.0296Adent Bima Prasetya 16.11.0301Dhimas Galih Prasetyo 16.11.0308Eva Faiza 16.11.0317Ikhsan Setiawan 16.11.0344

STMIK AMIKOM PURWOKERTO

2017/2018

1. DASAR PEMBUATAN WIDGET

Pada dasarnya widget memiliki fungsi sebagai antarmuka untuk berinteraksi dengan pengguna. Tujuannya yaitu untuk memberikan suatu proses pada aplikasi hasil dari aksi yang dilakukan pengguna seperti menekan tombol, memilih menu, dan sebagainya.

2. MACAM-MACAM WIDGET VIEW

terdiri dari banyak jenis seperti TextView, EditText, Button, RadioButton, dan sebagainya. Gambar dibawah ini merupakan komponen-komponen widget yang disediakan oleh android studio.

3. CARA MEMBUAT WIDGET DI ANDROID STUDIO

Terdapat 2 cara dalam pembuatan widget di android studio, yaitu:

a. Drag and Dropb. Mengedit dengan XML

1. TextView

TextView adalah salah satu widget yang digunakan untuk menampilkan Text ataupun angka serta simbol lainnya.

Cara membuat textview di android studio

a. Di android studio buatlah projek baru dengan parameter berikut :

Atribut Nilai

Application Name Scrolling Text

Company Name android.example.com (atau domain Anda sendiri)

Phone and Tablet Minimum SDK API15: Android 4.0.3 IceCreamSandwich

Template Empty Activity

Generate Layout File checkbox Dicentang

b. Pada folder app > res > layout, buka file activity_main.xml, dan klik tab Text untuk melihat kode XML jika belum dipilih. Di bagian atas, atau root, hierarki tampilan adalah ViewGroup yang disebut RelativeLayout. Seperti ViewGroup lainnya, RelativeLayout adalah tampilan yang berisi tampilan lainnya. Selain itu, tampilan ini juga memungkinkan Anda untuk memposisikan Tampilan anak relatif terhadap satu sama lain atau relatif terhadap RelativeLayout induk itu sendiri. Elemen TextView "Hello World" default yang dibuat oleh template Empty Layout adalah Tampilan anak dalam grup tampilan RelativeLayout. Untuk informasi selengkapnya tentang cara menggunakan RelativeLayout, lihat Panduan API RelativeLayout.

c. Tambahkan elemen TextView di atas TextView "Hello World". Saat Anda memasukkan <TextView to start a TextView, Android Studio automatically adds the ending />, which is shorthand for </TextView> . Tambahkan atribut-atribut berikut ke TextView:

Atribut #1 TextView Nilai

android:id "@+id/article_heading"

layout_width "match_parent"

layout_height "wrap_content"

android:background "@color/colorPrimary"

android:textColor "@android:color/white"

android:padding "10dp"

android:textAppearance "@android:style/TextAppearance.Large"

android:textStyle "bold"

android:text "Article Title"

d. Ekstrak sumber daya string untuk string yang di-hardcode "Article Title" atribut android:text dalam TextView untuk membuat entri untuknya di strings.xml Letakkan kursor di string yang di-hardcode, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract string resource. Lalu edit nama sumber daya untuk nilai string ke article_title.

e. Ekstrak sumber daya dimensi untuk string "10dp" hard-code atribut android:padding dalam TextView untuk membuat entri di dimens.xml.Letakkan kursor di string hard-code, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract dimension resource. Lalu edit name Sumber Daya ke padding_regular.

f. Tambahkan elemen TextView TextView di atas "Hello World" TextView bawah TextView yang Anda buat pada langkah sebelumnya. Tambahkan atribut-atribut berikut ke TextView:

Atribut #2 TextView Nilai

android:id "@+id/article_subheading"

layout_width "match_parent"

layout_height "wrap_content"

android:layout_below "@id/article_heading"

android:padding "@dimen/padding_regular"

android:textAppearance "@android:style/TextAppearance"

android:text "Article Subtitle"

Perhatikan karena Anda mengekstrak sumber daya dimensi untuk string "10dp" ke padding_regular pada TextView yang sebelumnya dibuat, Anda bisa menggunakan "@dimen/padding_regular" untuk atribut android:padding dalam TextView ini.

g. Ekstrak sumber daya string untuk string "Article Subtitle" yang di-hardcode atribut android:text dalam TextView ke article_subtitle.

h. Tambahkan atribut-atribut TextView berikut ke elemen TextView "Hello World", dan ubah atribut android:text:

Atribut TextView Nilai

android:id "@+id/article"

android:lineSpacingExtra "5sp"

android:layout_below "@id/article_subheading"

android:text Ubah ke "Article text"

i. Ekstrak sumber daya string untuk "Article text" ke article_text, dan ekstrak sumber dimensi "5sp" ke line_spacing.

j. Format ulang dan ratakan kode dengan memilih Code > Reformat Code. Sebaiknya format ulang dan ratakan kode agar memudahkan Anda dan orang lain memahaminya.

2. Edit Text

EditText adalah cara standar untuk memasukkan teks diaplikasi Android. Jika pengguna diminta untuk memasukkan suatu teks, maka View ini lah yang menjadi sarana utama untuk melakukannya.

Cara membuat Edit text di android studio

Kita akan belajar untuk mem-format EditText supaya bisa menerima inputan text berupa :

text biasa

angka

nomor telepon

password

email

url web

a. memulai dengan membuat project Android baru di Android Studio terlebih dahulu.b. Jika sudah, bisa langsung buka file activity_main.xml pada project yang telah kalian

buat, dan masukkan kode berikut :

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:padding="15dp">

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan Text Biasa"

android:inputType="text" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan Angka"

android:inputType="number" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan Nomor Telepon"

android:inputType="phone" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan Password"

android:inputType="textPassword" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan Email"

android:inputType="textEmailAddress" />

<EditText

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:hint="Masukkan URL"

android:inputType="textUri" />

</LinearLayout>

Kode di atas sudah lumayan jelas, jadi untuk menerima berbagai macam jenis text, kita bisa menggunakan attribut inputType pada EditText, dan mengubahnya sesuai dengan data text yang ingin kita masukkan.

Lebih jelasnya untuk masing-masing tipe text di bawah ini, kita harus mengubah inputType seperti berikut :

- text biasa => inputType : text- angka => inputType : number- nomor telepon => inputType : phone- password => inputType : password- email => inputType : textEmailAddress- url web => inputType : textUri

Dengan menggunakan InputType, selain berfungsi untuk menspesifikasikan data yang ingin kita inputkan, InputType juga akan mengubah bermacam hal, seperti layout keyboard, dan tampilan text. Untuk InputType number, maka layout keyboard Android kita akan berubah hanya menampilkan angka, begitu halnya dengan InputType email, layout keyboard kita akan menampilkan simbol ‘@’ yang mudah diakses. Sedangkan untuk InputType password, maka apa yang kita ketikkan tidak akan tampil pada EditText, hanya ada titik-titik.

Berikut tampilannya:

3. ButtonButton adalah sebuah Elemen antarmuka pengguna yang dapat diketuk atau klik oleh pengguna untuk melakukan suatu tindakan. Sebuah tombol terdiri dari teks atau ikon (atau teks dan ikon) yang mengkomunikasikan tindakan apa yang terjadi ketika pengguna menyentuhnya.

Contoh pembuatan Buttona. Pertama buat project baru pada Android Studiob. Untuk contoh sederhananya, kita akan menggunakan 1 Button terlebih dahulu, cara

membuatnya kita perlu menambahkan tag <Button> menggunakan kode xml atau bisa langsung mendragnya, pada activity_main.xml.

Berikut contoh kodingnya :<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

<Button android:id="@+id/testing" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Klik Disini" /> </LinearLayout>

Tampilan sebagai berikut:

Ada beberapa atribut yang di gunakan pada button tersebut, diantaranya:

- android:id: Untuk menginisialisasi id pada Button tersebut.- android:layout_width: Untuk mengatur lebar widget.- android:layout_height: Untuk mengatur tinggi widget.- android:text: Untuk menambahkan text pada widget.

4. RADIO BUTTONRadio Button adalah salah satu elemen layout di Android yang sering dipakai, yang biasanya berfungsi untuk menginputkan data yang berupa pilihan dan hanya satu saja yang bisa dipilih, contoh: memilh Jenis Kelamin atau pilihan Yes or No

Contoh Pembuatan Radio Buttona. pertama kita buat project baru di Android Studio kita seperti biasab. lalu kita masuk ke activity_main.xml dan masukkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="app.com.example.android.image.MainActivity" android:orientation="vertical">

<TextView android:layout_width="match_parent" android:layout_height="wrap_content"

android:layout_gravity="center_horizontal" android:textColor="#000000" android:textSize="30dp" android:text="Siapa nama tokoh utama di Anime Naruto"/>

<RadioGroup android:id="@+id/rbgrup" android:layout_marginTop="50dp" android:onClick="radiocheked" android:layout_gravity="center_horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButton android:id="@+id/naruto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Naruto"/> <RadioButton android:id="@+id/sasuke" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sasuke"/> <RadioButton android:id="@+id/sakura" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sakura"/> </RadioGroup></LinearLayout>

Hasil dari kode diatas sebagai berikut :

5. RATING BARWidget ini berfungsi untuk memberi nilai dalam suatu kontent. Widget ini banyak digunakan bagi penyedia konten untuk melihat, atau mereview penilaian dari user (pengguna) konten tersebut.Biasanya ini ditemukan di Play Store,

Contoh pembuatan Rating Bar menggunakan android Studioa. Pertama buat project baru pada Android Studiob. “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML.

Untuk script XML dapat dituliskan seperti berikut.

01<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

02     xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"

03

    android:layout_height="match_parent"android:paddingLeft="@dimen/activity_horizontal_margin"

04     android:paddingRight="@dimen/activity_horizontal_margin"

05     android:paddingTop="@dimen/activity_vertical_margin"

06

    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

07

08     <RatingBar

09         android:id="@+id/ratingBar1"

10         android:layout_width="wrap_content"

11         android:layout_height="wrap_content"

12         android:layout_alignParentTop="true"

13         android:layout_centerHorizontal="true"

14         android:layout_marginTop="25dp" />

15     <TextView

16         android:id="@+id/txtRatingValue"

17         android:layout_width="wrap_content"

18         android:layout_height="wrap_content"

19         android:layout_below="@+id/ratingBar1"

20         android:layout_centerHorizontal="true"

21         android:layout_marginTop="25dp"

22         android:text="Rating"

23         android:textSize="40sp" />

24 </RelativeLayout>

Bukalah MainActivity.java lalu edit seperti berikut ini

01 package com.androidnajwa.ratingbar;02  03 import android.app.Activity;04 import android.os.Bundle;05 import android.widget.RatingBar;06 import android.widget.RatingBar.OnRatingBarChangeListener;07 import android.widget.TextView;08  09 //contoh penerapan listener menggunakan implements pada class

10 public class MainActivity extends Activity implements OnRatingBarChangeListener {

11     private RatingBar ratingBar;12     private TextView txtRatingValue;13  14     @Override15     protected void onCreate(Bundle savedInstanceState) {16         super.onCreate(savedInstanceState);17         setContentView(R.layout.activity_main);18         ratingBar = (RatingBar) findViewById(R.id.ratingBar1);19         txtRatingValue = (TextView) findViewById(R.id.txtRatingValue);20  21         //menerapkan listener ketika terjadi perubahan nilai ratingBar22         ratingBar.setOnRatingBarChangeListener(MainActivity.this);23     }24  25     //method listener yang di-overide karena implements

OnRatingBarChangeListener

26     public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {

27         txtRatingValue.setText(String.valueOf(rating));

28     }29 }Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara menekan Shift+F10.

Tampilan sebagai berikut :

6. GRID VIEWGridView adalah salah satu container, yang digunakan untuk menampilkan konten View, konten View dalam GridView akan tersusun bentuk kotak-kotak seperti sebuah rak lemari, , yang dimana kita dapat menyimpan barang-barang. Penulisan coding beserta struktur datanya, hampir sama dengan ListViw, hanya saja data yang ditampilkan secara Grid atau Kotak-kotak.

Contoh pembuatan Grid Viewa. Pertama buat project baru pada Android Studiob. Buka file activity_main.xml kalian, disini kita akan mengatur layout untuk tampilan

GridView pada activity kita.<?xml version="1.0" encoding="utf-8"?><GridView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/gridview" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFF5F5F5" android:columnWidth="90dp" android:gravity="center" android:horizontalSpacing="10dp" android:numColumns="auto_fit" android:stretchMode="columnWidth"

android:verticalSpacing="10dp" tools:context="android.cianjur.developer.net.basicandroid.MainActivity"></GridView>Penjelasan pada atribut-atribut yang digunakan diatas:android:columnWidth : Menentukan lebar tetap pada masing-masing kolom.android:gravity : Menentukan gravitasi di dalam setiap sel.android:verticalSpacing : Mendefinisikan default jarak vertikal antar baris.android:stretchMode : Mendefinisikan bagaimana kolom harus meregang untuk mengisi tersedia ruang kosong, jika ada.android:horizontalSpacing : Mendefinisikan default jarak horisontal antara kolom.android:numColumns : Menentukan berapa kolom yang akan ditampilkan.

c. Selanjutnya buka file MainActiviy.java, pada layout tersebut kita akan menampilkan gambar/image, jadi saya sarankan kalian sudah menyiapkan gambarnya terlebih dahulu, gambar tersebut kalian simpan didalam dir drawable.

Masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

/* Dibuat Oleh WILDAN M ATHOILLAH */

import android.content.Context;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.ImageView;import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

//Deklarasi Variable GridView protected GridView TampilanGrid;

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); getSupportActionBar().setTitle("Image Gallery"); TampilanGrid = findViewById(R.id.gridview); //Mengset/Menerapkan adapter pada GridView TampilanGrid.setAdapter(new ImageAdapter(this));

//Membuat Listener untuk menangani kejadian saat salah satu item di klik TampilanGrid.setOnItemClickListener(new AdapterView.OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show();

} }); }}

//Digunakan Untuk Mengatur Konten yang Akan Ditampilkanclass ImageAdapter extends BaseAdapter {

//List Konten Gambar yang akan ditampilkan pada GridView private int[] gambar = {R.drawable.kucing1, R.drawable.kucing2, R.drawable.kucing3, R.drawable.kucing4, R.drawable.kucing5, R.drawable.kucing6, R.drawable.kucing7, R.drawable.kucing8, R.drawable.kucing9, R.drawable.kucing10, R.drawable.kucing11, R.drawable.kucing12, R.drawable.kucing13, R.drawable.kucing14, R.drawable.kucing15, R.drawable.kucing16, R.drawable.kucing17, R.drawable.kucing18, R.drawable.kucing19, R.drawable.kucing20};

private Context mContext;

//Membuat Contructor, dengan parameter Context, Untuk menghubungkan Adapter dengan GridView ImageAdapter(Context c) { mContext = c; }

public int getCount() { //Menghitung Jumlah/Panjang dari Daftar Konten return gambar.length; }

public Object getItem(int position) { return null; }

public long getItemId(int position) { return 0; }

//Membuat ImageView baru untuk setiap item yang direferensikan oleh Adaptor public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; //Jika tidak di daur ulang if (convertView == null) { //Menginisialisasi beberapa atribut imageView = new ImageView(mContext); //Mengatur Panjang dan Lebar pada ImageView imageView.setLayoutParams(new GridView.LayoutParams(120, 120)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); //Mengatur Padding imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; }

//Mengset Image dari Resource/Sumber berdasarkan posisinya imageView.setImageResource(gambar[position]); return imageView; }}

Tampilan sebagai berikut :

7. IMAGE BUTTONImageButton adalah salah satu widget dari komponen User Interface yang berfungsi untuk menampilkan gambar, namun tidak hanya gambar, ImageView bisa juga kita navigasikan menjadi sebuah Button

Contoh Pembuatan Image Button pada Android Studio :a. Pertama buat project baru pada Android Studiob. buka file activity_main.xml pada project kalian, disini kita akan menambahkan 1 buah

ImageButton sebagai contohnya, sebelum itu saya sarankan kalian sudah menyiapkan gambar yang ingin digunakan, Gambar tersebut bisa kalian simpan pada direktori drawable.

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:background="#FFF5F5F5" android:gravity="center" android:orientation="vertical" tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

<ImageButton android:id="@+id/technoart" android:layout_width="match_parent" android:layout_height="wrap_content" android:elevation="4dp" android:scaleType="centerInside" app:srcCompat="@drawable/logomeduim" />

</LinearLayout>Didalam tab ImageView, jangan lupa untuk menambahkan atribut scaleType="centerInside" agar gambar didalamnya menjadi pas berada ditengah dan ukuran gambarnya juga akan menyesuaikan dengan ImageButton, Serta tambahkan juga atribut elevation supaya memberi efek pada ImageView tersebut.

Layout tersebut akan terlihat seperti berikut ini:

c. Selanjutnya buka MainActivity.java, disini kita akan menambahkan onClickListener pada ImageButton tersebut, jadi saat user mengkliknya, maka akan muncul pesan singkat dengan menggunakan Toast.

package android.cianjur.developer.net.basicandroid;

/* Dibuat Oleh WILDAN M ATHOILLAH */

import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.ImageButton;import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageButton mylogo = findViewById(R.id.logosaya); mylogo.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getBaseContext(), "Selamat Datang Di WILDAN TECHNO ART", Toast.LENGTH_LONG).show(); } }); }}

Tampilan Sebagai berikut :

Referensi :https://www.wildantechnoart.net/2017/12/belajar-membuat-imagebutton-di-android-studio.html

https://www.wildantechnoart.net/2017/12/belajar-membuat-imagebutton-di-android-studio.html

http://androidnajwa.blogspot.co.id/2015/07/tutorial-cara-membuat-rating-bar-di.html

https://www.okedroid.com/2016/01/cara-membuat-contoh-penerapan-widget-edittext-android.html