TUGAS RELATIVE LAYOUT 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    tools:context=".MainActivity">

    <!-- Header / AppBar -->

    <!-- Blue balance card -->
    <LinearLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingStart="12dp"
        android:paddingEnd="12dp">

        <ImageView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="logo"
            android:src="#FBB165" />

        <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:visibility="gone" />

        <ImageView
            android:id="@+id/logo_profile"
            android:layout_width="36dp"
            android:layout_height="36dp"
            android:layout_marginRight="8dp"
            android:layout_toRightOf="@id/profile"
            android:contentDescription="profile"
            android:src="@drawable/logo" />

        <ImageView
            android:id="@+id/profile"
            android:layout_width="120dp"
            android:layout_height="40dp"
            android:contentDescription="profile"

            android:src="@drawable/gojek2" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/balance_card"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@id/header"
        android:layout_margin="12dp"
        android:orientation="vertical"
        android:padding="12dp"
        android:background="#00BFFF">

        <!-- top row of card: saldo + icon -->

        <!-- buttons row -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/tv_saldo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-PAY"
                android:textSize="14sp"
                android:textStyle="bold"
                android:textColor="@color/white"
                />

            <TextView
                android:id="@+id/tv_amount"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:text="Rp100.000.000.000"
                android:textSize="18sp"
                android:textStyle="bold"
                android:textColor="@color/white"
                />
        </RelativeLayout>

        <LinearLayout
            android:id="@+id/balance_buttons"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="12dp"
            android:weightSum="4">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:clickable="true"
                android:focusable="true"
                android:onClick="onTransferClick">

                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/rumah" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="transfer"

                    android:textSize="14sp"
                    android:textColor="@color/white"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:clickable="true"
                android:onClick="onScanClick">
                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/qr"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Scan QR"
                    android:textSize="14sp"
                    android:textColor="@color/white"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:clickable="true"
                android:onClick="onTopUpClick">
                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/saldo"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Isi Saldo"
                    android:textSize="14sp"
                    android:textColor="@color/white"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="center"
                android:clickable="true"
                android:onClick="onHomeClick">
                <ImageView
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/beranda"/>
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Beranda"
                    android:textSize="14sp"
                    android:textColor="@color/white"/>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <!-- Services grid -->
    <GridLayout
        android:id="@+id/services_grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/balance_card"
        android:rowCount="2"
        android:columnCount="4"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:layout_marginTop="4dp">

        <!-- 8 service items (icon + label). Duplicate / edit as needed -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="GO-FOOD">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/garpu"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-FOOD"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:padding="8dp"
            android:tag="GO-RIDE">

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/motor" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="6dp"
                android:text="GO-RIDE"
                android:textSize="15sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="2"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="GO-CAR">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/gocar"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-CAR"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="0"
            android:layout_column="3"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="GO-POINTS">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/gopoints"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-POINTS"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <!-- second row -->
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="PULSA">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/pulsa"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-PULSA"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="1"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="BILLS">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/goblis"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-BILLS"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="2"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="SEND">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/gosend"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="GO-SEND"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_row="1"
            android:layout_column="3"
            android:layout_columnWeight="1"
            android:orientation="vertical"
            android:gravity="center"
            android:padding="8dp"
            android:onClick="onServiceClick"
            android:tag="LAINNYA">
            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/lainnya"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="LAINNYA"
                android:textSize="15sp"
                android:layout_marginTop="6dp"/>
        </LinearLayout>
    </GridLayout>

    <!-- Horizontal promo / images (simple) -->

    <!-- Main content placeholder (below promo) -->

    <!-- Bottom navigation bar -->
    <HorizontalScrollView
        android:id="@+id/promo_scroll"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@id/services_grid"
        android:layout_marginTop="43dp"
        android:paddingStart="12dp"
        android:paddingEnd="12dp"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="240dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="8dp"
                android:scaleType="centerCrop"
                android:src="@drawable/foto1" />

            <ImageView
                android:layout_width="240dp"
                android:layout_height="match_parent"
                android:layout_marginEnd="8dp"
                android:scaleType="centerCrop"
                android:src="@drawable/foto2" />

            <ImageView
                android:layout_width="240dp"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/foto3" />
        </LinearLayout>
    </HorizontalScrollView>

    <TextView
        android:id="@+id/section_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/promo_scroll"
        android:layout_marginStart="16dp"
        android:layout_marginTop="-148dp"
        android:text="gopayy"
        android:textSize="16sp"
        android:textStyle="bold" />

    <LinearLayout
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:background="#F7F7F7"
        android:padding="8dp"
        android:gravity="center">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:onClick="onBottomNavClick"
            android:tag="Beranda">

            <ImageView
                android:layout_width="24dp"
                android:layout_height="21dp"
                android:src="@drawable/beranda" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Beranda"
                android:textSize="10sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:onClick="onBottomNavClick"
            android:tag="Pesanan">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/pesanan"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Pesanan"
                android:textSize="12sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:onClick="onBottomNavClick"
            android:tag="Diskon">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/inbox"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Inbox"
                android:textSize="12sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical"
            android:onClick="onBottomNavClick"
            android:tag="Inbox">
            <ImageView
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:src="@drawable/akun"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Akun"
                android:textSize="12sp"/>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>

    </RelativeLayout>

HASILNYA :







 

Comments

Post a Comment

Popular posts from this blog

BAB I MENGENAL KOMPONEN PC

Image
  BAB I MENGENAL KOMPONEN PC Seiring dengan adanya kemajuan teknologi dan informasi yang dari setiap tahunnya  meningka mengakibatkan perkembangan dalam kebutuhan hardware komputer dengan spesifikasi tinggi sangat dibutuhkan oleh pengguna. Misalnya kebutuhan perangkat VGA card dan prosesor jenis spesifikasi   tinggi untuk digunakan pada pc gaming. Oleh  karenanya spesifikasi yang tinggi tersebut dikususkan untuk memperlancar kinerja dari software yang akan dijalankan. 1. personal komputer a.  pengertian personal komputer adalah computer yang dapat melakukan semua input,proses,output dan menyimpan data sendiri. Personal computer memiliki prosesor, memori dan juga input, satu output dan satu alat penyimpan atau lebih. Personal computer juga biasanya sudah memiliki alat komunikasi sendiri (irwansyah & moniaga, 2014). b.  contoh personal komputer contoh dari personal komputer adalah PC dan Apple MAC 2. jenis-jenis personal komputer a .  PC TOWER ...
Read more

MATERI RELATIVE LAYOUT

Image
 RELATIVE LAYOUT RelativeLayout adalah salah satu jenis ViewGroup dalam Android yang digunakan untuk mengatur tata letak (layout) elemen-elemen tampilan di dalamnya berdasarkan posisi relatif antar komponen maupun terhadap induknya (parent) . Dengan menggunakan RelativeLayout, setiap komponen seperti TextView, EditText, dan Button dapat ditempatkan di atas, di bawah, di kiri, di kanan, atau sejajar dengan komponen lainnya, tergantung pada atribut yang diberikan. Perbedaan utama antara RelativeLayout dan LinearLayout terletak pada cara penempatan komponennya. LinearLayout menata komponen secara berurutan , baik secara vertikal maupun horizontal, sedangkan RelativeLayout memungkinkan komponen ditata secara bebas dan fleksibel dengan menentukan posisinya relatif terhadap komponen lain atau parent. Hal ini membuat RelativeLayout lebih fleksibel digunakan untuk desain yang kompleks, meskipun sedikit lebih berat dalam proses perhitungannya. Kelebihan dari RelativeLayout antara lain ad...
Read more

MATERI RESPONSIVE LAYOUT ANDROID STUDIO

Image
 PEMBUATAN RESPONSIVE LAYOUT A. Jenis Dan Fungsi Layout Layout merupakan suatu tampilan tata letak di android untuk mengatur penempatan teks,gambar,ataupun komponen lainnya sehingga tampilan pada aplikasi yang dibuat terlihat rapih dan nyaman untuk dilihat oleh pengguna. Jenis dan Fungsi layout adalah sebagai berikut: 1. Linear Layout Linear layout adalah layout yang menyejajarkan semua child view-nya dalam satu arah,secara vertikal atau horizontal. penggunaan linear layout dapat menetapkan arah layout menggunakan atribut android:orientation. Jika mengggunakan android orientation vertikal maka pengaturan layout akan berurutan dari atas ke bawah secara vertikal. Jika menggunakan android orientation horizontal maka pengaturan layout akanberurutan dari kiri ke kanan secara horizontal. linear layout akan mengikuti margin dan grafitiy sejajar kanan, tengah, atau kiri. berikut ini contoh desain aplikasi android menggunakan linear layout. 2. Relative layout Relative layout merupakan penga...
Read more