Nama : RONI RAHMANSYAH
NIM
: 161021450204
KELAS : 06TPLE003
TUGAS
UAS
Membuat
Aplikasi Penjualan dengan login Menggunakan Android Studio
1. Buat Project Baru
Buka android studio kemudian buat
sebuah project baru dengan nama project ” Uilogin ” . Jika belum bisa
silahkan pelajari tautan dibawah ini.
2. Library Material Design
Kita akan membuat design UI login
dengan tambahan material design agar tampilan lebih kekinian. Tambahkan kode
berikut pada build.gradle(module.app).
compile 'com.android.support:design:24.2.0'
3. Tambahkan Icon
Tambahkan 3 icon dari android
studio pada drawable dengan cara :
- klik
kanan pada drawable
- pilih
new > pilih image asset
- icon
type > pilih Action bar dan Tab icon
- Name :
user_icon
- Clip
art : ic_circle_black (seperti tampilan pada gambar )
Ulangi langkah diatas dengan menambahkan 2 icon lagi. Dengan
nama icon user_icon dan password (icon
user dan lock) seperti pada gambar diatas.
4. Background Lingkaran
Buat background lingkaran dengan
cara :
- klik
kanan pada drawable
- pilih
New > Drawable Resource File
- pada
file name isikan background_profile
- klik
ok
Masukan kode-kode berikut pada
file background_profile.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#5EAE9E" />
<stroke
android:width="5dip"
android:color="#5EAE9E" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>
5. Buat Layout
Buka activity_main.xml. Disini kita
akan membuat layout UI login menggunakan kode-kode xml. Layout yang akan
digunakan yaitu : Relative layout dan Linear Layout.
Kita akan membuat layout seperti
gambar berikut :
Penjelasan :
- Layout utama ditandai dengan
box no. 1 adalah Relative Layout. Kode xml yang digunakan :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4A9586"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
</RelativeLayout>
- Background putih ditandai
dengan box no. 2 adalah Relative Layout. Kode xml yang digunakan :
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_title"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp"
android:id="@+id/relativeLayout">
</RelativeLayout>
- Untuk menempatkan button,
textview dan edit text ditandai dengan box no. 3 adalah Linear Layout :
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
</Linear Layout>
6. Tambahkan Widget
Setelah kita mengetahui layout apa
saja yang dibutuhkan.
Perhatikan gambar
diatas, kita perlu menambahkan beberapa komponen widget :
- TextView : untuk membuat login
& forgot password.
- EditText : untuk membuat username
& password
- TextInputLayout : widget dari
material design yang diletakan sebelum EditText
- Button : untuk membuat
tombol sign in
- ImageButton : untuk
membuat lingkaran icon user profile
Langsung saja kode
lengkapnya digabungkan dengan layout yaitu :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4A9586"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_title"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp"
android:id="@+id/relativeLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/username"
android:hint="User Name"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:drawableLeft="@drawable/password"
android:hint="Password"
android:inputType="numberPassword" />
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingTop="5dp"
android:text="Forgot Password?" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="22dp"
android:background="#d67601"
android:text="Sign in"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="18sp"
/>
</LinearLayout>
</RelativeLayout>
<ImageButton
android:id="@+id/user_profile_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/login_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:background="@drawable/background_profile"
android:elevation="4dp"
android:src="@drawable/user_icon"
/>
<TextView
android:id="@+id/login_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:gravity="center_horizontal"
android:text="Login "
android:textColor="#fff"
android:textSize="26sp"
android:textStyle="bold"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
7. Running Aplikasi
Jika sudah tidak ada error silahkan
running melalui android virtual device (AVD), emulator genymotion,
atau langsung ke smartphone android yang
kamu punya.
1. Deskripsi Singkat Aplikasi
Kali ini kia akan belajar membuat
aplikasi penjualan sederhana menggunakan android studio. Aplikasi nantinya
berupa form isian yang terdiri dari :
- Nama pelanggan
- Nama barang
- Jumlah beli
- Harga
- Uang bayar
Setelah form diisi maka selanjutnya
tekan tombol proses dan akan menampilkan :
- Total belanja
- Uang kembali
- Bonus
- Keterangan
2. Buat Project Baru
Buka android studio > buat
project baru dengan cara klik create new project > beri
nama project “penjualan” (disesuaikan) > tentukan target
sdk nya> pilih empty activity > lanjutkan sampai
dengan finish. Ukuran device yang saya gunakan pada emulator adalah
5.1 ” WVGA .
3. Buat Layout
Jika workspace android studio sudah
terbuka klik activity_main.xml. Disini kita akan membuat layout
aplikasi dengan menggunakan Linearlayout dan beberapa widget :
- ScrollView
- TextView
- Button
- EditText
Untuk kode-kode xmlnya sebagai
berikut :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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:padding="30dp"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nama Pembeli :
"
android:textStyle="bold"
android:textColor="@color/colorPrimary"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/namapelanggan"
android:text="" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Judul Ebook :
"
android:textStyle="bold"
android:textColor="@color/colorPrimary"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/namabarang"
android:text="" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Jumlah Beli:
"
android:textStyle="bold"
android:textColor="@color/colorPrimary"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/jumlahbeli"
android:text=""
android:inputType="number"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Harga : Rp "
android:textStyle="bold"
android:textColor="@color/colorPrimary"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/harga"
android:text=""
android:inputType="number"
android:layout_marginBottom="8dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Uang Bayar: Rp
"
android:textStyle="bold"
android:textColor="@color/colorPrimary"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/uangbayar"
android:text=""
android:inputType="number"/>
</LinearLayout>
<Button
android:layout_marginTop="30dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tombol1"
android:text="PROSES"
android:background="@color/colorAccent"
android:textStyle="bold"
android:textColor="#ffffff"
android:layout_marginBottom="8dp" />
<TextView
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total
Belanja "
android:textColor="@color/colorPrimary"
android:id="@+id/totalbelanja"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginBottom="8dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Uang Kembali "
android:textColor="@color/colorPrimary"
android:id="@+id/uangkembali"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginBottom="8dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bonus"
android:textColor="@color/colorPrimary"
android:id="@+id/bonus"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginBottom="8dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Keterangan "
android:textColor="@color/colorPrimary"
android:id="@+id/keterangan"
android:textStyle="bold"
android:textSize="18dp"
android:layout_marginBottom="8dp"/>
<LinearLayout
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="@+id/tombol2"
android:text="RESET DATA"
android:background="@color/colorAccent"
android:textStyle="bold"
android:textColor="#ffffFF"/>
<Button
android:layout_width="200dp"
android:layout_marginLeft="20dp"
android:layout_height="wrap_content"
android:id="@+id/tombol3"
android:text="KELUAR"
android:background="@color/colorAccent"
android:textColor="#FFFFFF"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
Jika tidak ada
error maka layout akan tampil seperti gambar dibawah ini :
4. Berikan kodingan java
Selanjutnya berikan perintah pada
textview, button, dan komponen lainnya menggunakan bahasa pemrograman java
pada MainActivity.java. Untuk kode-kode lengkapnya seperti
dibawah ini, pastikan diletakan dibawah nama package (contoh package
badoystudio.com.penjualan; / sesuaikan dengan nama package projectmu).
package badoystudio.com.penjualan;
import
android.support.v7.app.AppCompatActivity;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.Button;
import
android.widget.EditText;
import
android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private EditText
edtnamapel, edtnamabar, edtjumlahbel, edtharga, edtuangbay;
private Button
btnproses;
private Button
btnhapus;
private Button
btnexit;
private TextView txtnamapel;
private TextView txtnamabar;
private TextView
txtjumlahbel;
private TextView
txtharga;
private TextView
txtuangbay;
private TextView
txtbonus;
private TextView
txttotalbelanja;
private TextView txtuangkembali;
private TextView
txtketerangan;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setTitle("Badoy Shop");
edtnamapel =
(EditText) findViewById(R.id.namapelanggan);
edtnamabar =
(EditText) findViewById(R.id.namabarang);
edtjumlahbel =
(EditText) findViewById(R.id.jumlahbeli);
edtharga =
(EditText) findViewById(R.id.harga);
edtuangbay =
(EditText) findViewById(R.id.uangbayar);
btnproses =
(Button) findViewById(R.id.tombol1);
btnhapus =
(Button) findViewById(R.id.tombol2);
btnexit = (Button)
findViewById(R.id.tombol3);
txtnamapel =
(TextView) findViewById(R.id.namapelanggan);
txtnamabar =
(TextView) findViewById(R.id.namabarang);
txtjumlahbel =
(TextView) findViewById(R.id.jumlahbeli);
txtharga =
(TextView) findViewById(R.id.harga);
txtuangbay = (TextView)
findViewById(R.id.uangbayar);
txtbonus =
(TextView) findViewById(R.id.bonus);
txttotalbelanja =
(TextView) findViewById(R.id.totalbelanja);
txtuangkembali =
(TextView) findViewById(R.id.uangkembali);
txtketerangan = (TextView)
findViewById(R.id.keterangan);
//memberikan
action pada tombol proses
btnproses.setOnClickListener(new View.OnClickListener() {
@Override
public void
onClick(View view) {
String namapelanggan
= edtnamapel.getText().toString().trim();
String
namabarang = edtnamabar.getText().toString().trim();
String
jumlahbeli = edtjumlahbel.getText().toString().trim();
String
harga = edtharga.getText().toString().trim();
String
uangbayar = edtuangbay.getText().toString().trim();
double jb
= Double.parseDouble(jumlahbeli);
double h =
Double.parseDouble(harga);
double ub = Double.parseDouble(uangbayar);
double
total = (jb * h);
txttotalbelanja.setText("Total Belanja : " + total);
//pemberian if dan else untuk aturan pemberian bonus
if (total >=200000){
txtbonus.setText("Bonus :
Mouse");
} else if
(total >=50000){
txtbonus.setText("Bonus : Keyboard");
}
else if (total >=40000){
txtbonus.setText("Bonus : Harddisk");
} else {
txtbonus.setText("Bonus : Tidak Ada Bonus");
}
double
uangkembalian = (ub - total);
if (ub
< total){
txtketerangan.setText("Keterangan
: uang bayar kurang Rp " + (-uangkembalian));
txtuangkembali.setText("Uang Kembali : Rp 0" );
}else{
txtketerangan.setText("Keterangan : Tunggu Kembalian");
txtuangkembali.setText("Uang
Kembali : " + uangkembalian);
}
//memberikan action pada tombol reset data
}
});
btnhapus.setOnClickListener(new View.OnClickListener() {
@Override
public void
onClick(View view) {
txtnamapel.setText(" ");
txtnamabar.setText(" ");
txttotalbelanja.setText(" Total Belanja : Rp 0");
txtharga.setText(" ");
txtuangbay.setText("
");
txtuangkembali.setText("Uang
Kembali : Rp 0");
txtbonus.setText("Bonus : - ");
txtjumlahbel.setText(" ");
txtketerangan.setText("Keterangan : - ");
Toast.makeText(getApplicationContext(),"Data
sudah direset", Toast.LENGTH_LONG).show();
//
memberikan action pada tombol keluar
}
});
btnexit.setOnClickListener(new View.OnClickListener() {
public void
onClick(View view) {
moveTaskToBack(true);
}
});
}
}
Penjelasan kode if dan else
untuk pemberian bonus :
- Jika belanja lebih dari atau
sama dengan 200.000 diberikan bonus Mouse
- Jika belanja lebih dari atau
sama dengan 50.000 diberikan bonus Keyboard
- Jika belanja lebih dari atau
sama dengan 40.000 diberikan bonus Harddisk
5. Running Aplikasi
Jika sudah tidak ada error pada
kodingan java di MainAcivity.java. Terakhir adalah running project menggunakan
emulator atau langsung ke ponsel android yang kamu miliki.
Maka hasilnya jika kita isi formnya
akan seperti gambar dibawah ini.
Mungkin ini saja yang bisa saya
bagikan, semoga bermanfaat buat diri saya dan juga buat yang membaca.
Best Regards,
Roni Rahmansyah
