Membuat Aplikasi Android Sistem Informasi DesaKu - Part 9

Aplikasi Android Sistem Informasi Desaku ini merupakan Tutorial Part 9, jadi jika anda belum mengikuti Tutorial Part 8 diharapkan anda untuk mengikuti Tutorial Part 8 terlebih dahulu untuk memudahkan anda dalam memahami Tutorial Part 9 ini.

Pada Tutorial Part 8 kita telah membuat Header dan Galeri Slide didalam file Home. Sekarang kita akan menambahkan Fitur Lainnya dan letak posisi Fitur Lainnya berada di bagian akhir setelah Galeri Slide. Didalam Fitur Lainnya ini memiliki 3 Fitur Utama yaitu Daftar DesaKu , Suara DesaKudan  Wisata DesaKu.

Sebelum kita memulai ngoding, ada beberapa hal yang perlu kita siapkan yaitu Icon untuk Daftar DesaKu , Suara DesaKudan  Wisata DesaKu. Anda bisa membuat sendiri Icon atau anda juga bisa mendownload Icon Gratis yang ada diinternet sudah banyak. Setelah anda mendapatkan Icon untuk Daftar DesaKu , Suara DesaKudan  Wisata DesaKu, sekarangletakkan Icon - Icon tersebut didalam folder src/assets.

Icon - Icon Fitur Lainnya

Kemudian kita sudah bisa untuk memulai ngoding untuk membuat Fitur Lainnya . Baiklah sekarang buka file Home  kemudian buat Variabel Daftar DesaKu , Suara DesaKudan  Wisata DesaKu menggunakan  const untuk memanggil Icon - Icon yang telah kita letakkan di folder src/assets. Jadi berikut Code nya dan Letakkan setelah variabel Icon_Admin seperti berikut,

const Daftar_DesaKu = require('../assets/Daftar_DesaKu.png')
const Suara_DesaKu = require('../assets/Suara_DesaKu.png')
const Wisata_DesaKu = require('../assets/Wisata_DesaKu.png')

Buat Ketiga Variabel Tersebut

Buat Ketiga Variabel Tersebut

Kemudian kita tambahkan codingan berikut ini kedalam retrun dan letakkan posisi nya setelah Slideshow . Perhatikan gambar di bawah ini untuk lebih jelasnya.

Tampilan Fitur Lainnya

Kemudian Tambahkan style untuk mengatur tampilan Judul Fitur Lainnya. Codingan nya seperti ini.

FiturLainnya:{
    margin:10
  },
  textNamaFiturLainnya:{
    fontSize: 20,
    fontWeight:'bold'
  }

Styling Fitur Lainnya

Untuk posisi peletakannya bisa perhatikan gambar dibawah ini.

Posisi Styling Fitur Lainnya

Berikut tampilan nya di aplikasi android.

Tampilan Fitur Lainnya

Baiklah sekarang kita lanjutkan membuat 3 button yaitu Daftar DesaKu , Suara DesaKu dan Wisata DesaKu dengan menampilkan juga Icon dari masing - masing ketiga button tersebut. Tambahkan Code dibawah ini setelah </View> penutup dari <Text>Fitur Lainnya</Text> .

<View style={styles.buttonFiturLainnya}>
            <View style={styles.flex}>
              <View style={styles.flexContainer}>
                <Image source={Daftar_DesaKu} style={styles.IconFitur} />
                <Text>Daftar DesaKu</Text>
              </View>
              <View style={styles.flexContainer}>
                <Image source={Suara_DesaKu} style={styles.IconFitur} />
                <Text>Suara DesaKu</Text>
              </View>
              <View style={styles.flexContainer}>
                <Image source={Wisata_DesaKu} style={styles.IconFitur} />
                <Text>Wisata DesaKu</Text>
              </View>
            </View>
          </View>

Menambahkan Icon Button Fitur Lainnya

Menambahkan Icon Button Fitur Lainnya

Setelah menambakan Code diatas selanjutnya kita akan menambahkan styling untuk mengatur tinggi, lebar, ukuran text dan yang lainnya.

 buttonFiturLainnya: {
    margin: 10,
  },
  flex: {
    flexDirection: 'row',
    justifyContent:'space-between'
  },
  flexContainer:{
    height:80,
    width:'30%',
    justifyContent:'center',
    alignItems:'center'
  },
  IconFitur: {
    height: 50,
    width: 50,
    borderRadius:15
  }

Styling Button Fitur Lainnya

Letakan  Code Style Button Fitur Lainnya di dalam Variabel styles dengan posisi setelah textNamaFiturLainnya.

Styling Button Fitur Lainnya

Setelah beberapa Code tersebut tambahkan sesuai dengan langkah - langkah yang telah selesai dibahas diatas. Sekarang kita lihat tampilan di android nya dengan menjalankan Server Debug jika belum paham silakan anda baca lagi di Tutorial Part 4 mengenai menjalankan Server Debug.

Tampilan Button Fitur Lainnya

Baiklah untuk membuat button fitur lainnya sudah selesai. Sekarang  kita tambahkan action . Action adalah apa yang terjadi jika button - button tersebut diklik. Jadi kita akan menambahka Action pada setiap Button Fitur Lainnya tersebut akan masukan File Component sesuai Nama Button dan Nama File Componet yang pernah kita difolder src/screen yang pernah kita buat pada Tutorial Part 6.

File Componet

Kemudian kita juga telah mengimport file component ke dalam file index.js difolder src/navigasi.

File Componet Di File index.js difolfer navigasi

Sekarang buka file Home dan tambahkan TouchableOpacity dibagian import component.

Import TouchableOpacity

Kemudian tambahkan ini code ini pada button fitur lainnya.

Penambahan Action pindah ke file component

Ketika anda klik button Daftar DesaKu akan ditampilkan File Component Daftar_DesaKu.js yang berada difolder src/screen.

Daftar DesaKu

Ketika anda klik button Suara DesaKu akan ditampilkan File Component Suara_DesaKu.js yang berada difolder src/screen.

Suara DesaKu

Ketika anda klik button Wisata DesaKu akan ditampilkan File Component Wisata_DesaKu.js yang berada difolder src/screen.

Wisata DesaKu

Demikianlah Tutorial Part 9 ini, silakan lanjut ke Tutorial Part 10

Catatan: tulisan ini dipindahkan dari cloudborneo.com, terbit pertama 13 Desember 2019.