Android Studio: Membuat User Interface Sederhana

From OnnoWiki
Jump to navigation Jump to search

Sumber: https://developer.android.com/training/basics/firstapp/building-ui.html


Pada bagian ini, kita akan belajar membuat layout di XML termasuk kolom text dan tombol. Pada bagian selanjutnya, kita akan belajar bagaimana agar aplikasi yang kita kembangkan meresponds ke tombol yang di tekas dengan mengirimkan isi dari kolom text ke activity yang lain.

Graphical User Interface (GUI) di app Android dibangun mengunakan hirarki dari object View dan ViewGroup. Object View biasanya UI widget seperti tombol atau kolom text. Object ViewGroup biasanya container visa yang terlihat yang mendefinisikan bagaimana child view di layout, seperti berbentuk grid atau daftar vertikal.

Android memberikan vocabulary XML yang berhubungan dengan subclass dari View dan ViewGroup sehingga kita dapat mendefinisikan UI kita di XML menggunakan hirarki dari elemen UI.

Layout adalah subclass dari ViewGroup. Dalam latihan ini, kita akan bekerja dengan LinearLayout.

Viewgroup.png


Membuat Linear Layout

  • Di Android Studio, dari directory res/layout , buka activity_my.xml . Template BlankActivity yang dipilih saat kita membuat project ini termasuk di dalamnya file activity_my.xml dengan root view RelativeLayout dan child view TextView .
  • Di Preview pane, klik Hide icon untuk menutup Preview pane.
  • Di Android Studio, ketika kita membuka layout file, kita pertama kali akan di perlihatkan Preview pane. Klik elements di pane ini dan buka tool WYSIWYG tools di Design pane. Pada kesempatan ini, kita akan bekerja langsung dengan XML.
  • Delete elemen <TextView> .
  • Ubah elemen <RelativeLayout> ke <LinearLayout>.
  • Tambahkan atribut android:orientation set ke "horizontal".
  • Buang atribut android:padding dan tools:context .

Hasilnya sebagai berikut: 

res/layout/activity_my.xml

<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:orientation="horizontal" >
</LinearLayout>

LinearLayout adalah view group (subclass dan ViewGroup) yang akan me-layout child view baik orientasi vertical atau horizontal, seperti yang di spesifikasikan di atribut android:orientation . Setiap child dari LinearLayout akan muncul di layar sesuai dengan urutan dia muncul di XML.

Dua atribut lain, android:layout_width dan android:layout_height, dibutuhkan untuk semua views untuk menentukan size mereka.

Karena LinearLayout adalah root view di layout, dia harus mengisi seluruh area screen yang tersedia agar apps dengan cara menset width (lebar) dan height (tinggi) ke "match_parent". Nilai ini mendeklarasikan bahwa view harus memperlebar width atau height untuk mencocokan dengan width atau height dari parent view.

Untuk informasi lebih lanjut tentang layout properties, ada baiknya membaca Android Studio: Layout Layar


Menambahkan Text Field

Seperti semua View object, kita perlu mendefinsikan atribut XML tertentu untuk menspesifikasikan property EditText object.

  • In the activity_my.xml file, within the <LinearLayout> element, define an <EditText> element with the id attribute set to @+id/edit_message.
  • Define the layout_width and layout_height attributes as wrap_content.
  • Define a hint attribute as a string object named edit_message.

Elemen <EditText> harusnya sebagai berikut: 

res/layout/activity_my.xml

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

Disini kita menambahkan atribut <EditText> :

android:id 

   This provides a unique identifier for the view, which you can use to reference the object from your app code, such as to read and manipulate the object (you'll see this in the next lesson).

   The at sign (@) is required when you're referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name (edit_message).



   The plus sign (+) before the resource type is needed only when you're defining a resource ID for the first time. When you compile the app, the SDK tools use the ID name to create a new resource ID in your project's gen/R.java file that refers to the EditText element. With the resource ID declared once this way, other references to the ID do not need the plus sign. Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

android:layout_width and android:layout_height 

   Instead of using specific sizes for the width and height, the "wrap_content" value specifies that the view should be only as big as needed to fit the contents of the view. If you were to instead use "match_parent", then the EditText element would fill the screen, because it would match the size of the parent LinearLayout. For more information, see the Layouts guide.

android:hint 

   This is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the "@string/edit_message" value refers to a string resource defined in a separate file. Because this refers to a concrete resource (not just an identifier), it does not need the plus sign. However, because you haven't defined the string resource yet, you’ll see a compiler error at first. You'll fix this in the next section by defining the string.

   Note: This string resource has the same name as the element ID: edit_message. However, references to resources are always scoped by the resource type (such as id or string), so using the same name does not cause collisions.





   Resource Objects

   A resource object is a unique integer name that's associated with an app resource, such as a bitmap, layout file, or string.

   Every resource has a corresponding resource object defined in your project's gen/R.java file. You can use the object names in the R class to refer to your resources, such as when you need to specify a string value for the android:hint attribute. You can also create arbitrary resource IDs that you associate with a view using the android:id attribute, which allows you to reference that view from other code.

   The SDK tools generate the R.java file each time you compile your app. You should never modify this file by hand.

   For more information, read the guide to Providing Resources.

Referensi

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Android_Studio:_Membuat_User_Interface_Sederhana&oldid=42941"