Tugas mobile

 Nama : Arsyah kumlasari

NIM    : 18.01.013.023

MK     : pemrograman mobile 

Kelas  : D

Kivy / kivyMD Tutorial

User Input With text field

 

Cara membuat user input with text field adalah sebagai berikut:

1.      Kita buat tampilannya dengan source code seperti gambar di bawah:

Kita tambah sintak username = MDTextField(text='enter username', pos_hint={'center_x':0.5,'center_y':0.5})

Maka outputnya akan menjadi seperti ini:

2.       Untuk menambah ukuran hint kita tambahkan source code di bawah:

username = MDTextField(text='enter username',pos_hint={'center_x':0.5,'center_y':0.5},size_hint=(0.5,1))

 

Outputnya akan menjadi seperti ini, bisa dilihat di situ ada jarak di kiri dan di kanan. Ditampilan sebelumnya tidak ada jarak dan panjangnya itu mentok sampai ujung kiri maupun kanan.

 

Ini tampilannya Ketika di perkecil:

3.       Sekarang coba kita tambahkan source code:

username = MDTextField(text='enter username', pos_hint={'center_x':0.5,'center_y':0.5},size_hint_x=None,width=200)

maka hasilnya Ketika tampilan di perkecil ukuran samping kanan dan kiri tetap dan tidak akan mengecil

4.       Supaya tampilan lebih menarik seperti gambar di bawah

Masukkan source code seperti tampilan di bawah:

5.       Menambahkan forgot username

Masukkan sintak di bawah lalu run

Maka ini tampilannya:

Supaya tampilan lebih menarik saat di klik masukkan source code seprti gambar di bawah ini:

Dan ini tampilannya:

Untuk menambah icon android, ketik source code dibawah:

Jika sudah, akan tampil ikon android seperti ini:

Untuk mengubahnya ke warna hijau, masukkan source code di bawah:

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
import helpers
from kivy.lang import Builder


class DemoApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette="Green"
        screen = Screen()

        # username = MDTextField(
        #     pos_hint={'center_x': 0.5, 'center_y': 0.5},
        #     size_hint_x=None, width=200)

        username = Builder.load_string(helpers.username_input)
        screen.add_widget(username)
        return screen


DemoApp().run()

namun harus menambahkan python file yang bernama helpers, berikut sintaknya:

username_input = """
MDTextField:
    hint_text: "Enter username"
    helper_text: "or click on forgot username"
    helper_text_mode: "on_focus"
    icon_right: "android"
    icon_right_color: app.theme_cls.primary_color
    pos_hint:{'center_x': 0.5, 'center_y': 0.5}
    size_hint_x:None
    width:300
"""

 

atau bisa juga dengan sintak seperti gambar di bawah:

Maka tampilannya akan menjadi seperti ini: