Membuat Aplikasi Android Sistem Informasi DesaKu - Part 7

android Dec 13, 2019

Aplikasi Android Sistem Informasi Desaku ini merupakan tutorial Part 7, jadi jika anda belum mengikuti Part 6 diharapkan anda untuk mengikuti tutorial  Part 6 terlebih dahulu untuk memudahkan anda dalam memahami tutorial Part 7 ini.

Pada  Tutorial Part 6 kita telah melakukan pembuatan File Screen Component dan pengimplementasian React Navigation . Pada Tutorial Part 7 kita akan membuat header dan menginstall dan menggunakan react-native-slideshow.

react-native-slideshow sebuah library untu menampilkan gambar dalam bentuk slide untuk berganti gambar selanjutkan dengan jeda waktu tertentu. Baiklah mari kita awali Tutorial Part 7 ini dengan membuat Header di File Home.js yang berada difolder screen.

Menambahkan Header di Screen Home

  • Sebelum kita hide dulu header default dari react navigation stack dengan cara buka file index.js yang berada difolder navigasi.
satu1
index.js difolder navigasi
  • Setelah itu rubah dan tambahkan code berikut.
Home: {
    	screen: Home,
    	 navigationOptions: () => ({
                header: null,
              }),
    },
Rubah dan Tambahkan Code
dua
Rubah dan Tambahkan Code
  • Setelah kita Rubah seperti code diatas, maka tampilan di aplikasi header nya sudah tidak ada lagi.
hideheader
Header Telah di Hide

Sekarang kita akan membuat header untuk file Home , maka dari itu ikuti langkah - langkah berikut ini.

  • Mengmasukan Component - Component React Native yang kita butuhkan yaitu View, Text, StyleSheet, Image, StatusBar pada file Home.js
import {
    View,
    Text,
    StyleSheet,
    Image,
    StatusBar
} from 'react-native'
Import Component React Native
  • Kemudian ganti code didalam retrun() dengan code berikut.
<View style={styles.Container}>
     <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
        </View>
</View>
Code didalam return
  • Setelah itu buat variabel styles dengan menggunakan const dan letakan di bagian atas sebelum export default Home. Kemudian tambahkan code berikut, StyleSheet ini berfungsi untuk mengatur UI( User Interface) seperti mengatur warna , ukuran text, image dll.
const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
})
  • Berikut Code lengkap Header.
import React, {Component} from 'react'
import {
    View, 
    Text, 
    StyleSheet, 
    Image, 
    StatusBar
} from 'react-native'

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  render () {
    return (
      <View style={styles.Container}>
        <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
})

export default Home
Code Lengkap Header
UI
Code Lengkap Header
  • Berikut Tampilan di Aplikasi dari Code Header diatas.
headerui
Tampilan Hasil Code Header
  • Sekarang kita akan menambahkan Icon Admin pada header di sebelah kanan. Sebelum kita ngoding, kita siapkan terlebih dahulu Icon Admin anda bisa download atau membuat sendiri untuk Icon Admin setelah memiliki Icon Admin diharapkan dengan format .png saja dan letakan Icon Admin tersebut difolder src/assets .
iconadmin
Icon Admin
  • Setelah itu Buka file Home.js dan buat variabel Icon_Admin diatas class.
const Icon_Admin = require('../assets/icon_admin.png')
Variable Icon Admin
panggilicon
Variable Icon Admin
  • Kemudian Tambahkan code berikut ini di dalam return() .
<Image source={Icon_Admin} style={styles.img_style}/>
Menampilkan Image
  • Dan tambahkan juga code pada styles untuk mengatur tinggi dan lebar image Icon Admin nya.
img_style:{
    height: 30,
    width:30
  }
Mengatur Tinggi dan Lebar Image 
sty
Code Header
  • Ini Code Header Lengkap
import React, {Component} from 'react'
import {
    View, 
    Text, 
    StyleSheet, 
    Image, 
    StatusBar
} from 'react-native'

const Icon_Admin = require('../assets/icon_admin.png')

class Home extends Component {
  constructor (props) {
    super(props)
    this.state = {}
  }
  render () {
    return (
      <View style={styles.Container}>
        <StatusBar backgroundColor='#009688'/>
        <View style={styles.MainContainer}>
          <Text style={styles.font}>Sistem Informasi DesaKu</Text>
          <Image source={Icon_Admin} style={styles.img_style}/>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  Container: {
      flex:1
  },
  MainContainer: {
    flexDirection:'row',
    height: 40,
    width: '100%',
    backgroundColor: '#009688',
    justifyContent: 'space-between',
  },
  font: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    textAlignVertical:'center',
    marginLeft:5
  },
  img_style:{
    height: 30,
    width:30
  }
})

export default Home
Code Lengkap Header
  • Dan ini tampilan di aplikasi android nya.
header
Tampilan UI Header Dengan Icon Admin

Demikan untuk Tutorial Part 7 jangan lupa untuk mengikuti Tutorial Part 8

Wandi Pratama

Saya seorang Developer Mobile menggunakan Framework React Native dan saya juga memiliki pengalaman dibidang SYS Admin