Materialize Part I

Pada kesempatan kali ini saya akan membahas mengenai Materialize. Materialize merupakan salah satu dari product google. Materialize merupakan responsive front-end framework yang menggunakan Material Design sebagai dasarnya.

Material Design sendiri merupakan dasar design yang di berikan google sebagai acuan dalam membuat sebuah visualisasi yang memiliki dasar- dasar design. 

Source : https://www.google.com/design/spec/material-design/introduction.html

Apabila kita pernah mencoba membuat android project, maka google juga memberikan atribut- atribut untuk mendukung material design yang diusung oleh google.

Materialize sendiri memiliki fungsi yang mirip seperti boostrap. Ke dua framework tersebut memiliki atribut- atribut yang memiliki UX yang kaya dan mudah di aplikasikan. Mengapa saya membahas materialize? Karena menurut saya pribadi materialize memiliki memiliki atribut- atribut yang lebih cantik di banding beberapa framework lain.

Setelah pembicaraan di atas, mari kita mulai mencoba menggunakan Materialize.
apabila memiliki bower dapat langsung run command : bower install materialize





Atau dapat mendownloadnya dari : http://materializecss.com/getting-started.html

Berikutnya saya akan memperlihatkan atribut- atribut yang mudah dibuat menggunakan materialize :

1. Wave
   Merasa repot menambahkan efek kepada button yang akan di klik? Materialize menyiapkan wave effect untuk membuat button terlihat interaktif ketika di klik. hanya perlu menambahkan class  : waves-effect dan effect type seperti waves-light atau  waves-teal.
   

   <a class="waves-effect waves-light btn-large" href="#">Wave</a>
   
   

2. Floating Button
   Seperti halnya floating button yang bisa di temukan pada android material view. Materialize menyediakan floating button untuk digunakan dalam web view.
   

   <a class="btn-floating btn-large waves-effect waves-light red">
     <i class="material-icons">add</i>
   </a>
   
   

3. Horizontal Fixed Floating Button
   Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
   

     <div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
       <a class="btn-floating btn-large red">
         <i class="large material-icons">mode_edit</i>
       </a>
       <ul>
         <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
         <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
         <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
         <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
       </ul>
     </div>

   
   
4.  Chips
   Chips merupakan sebuah tempat kecil yang bisa memberikan informasi kita. Lebih cocok untuk digunakan sebagai list contact atau label.
   

   <div class="class="chip waves-effect waves-light"">
       <img src="images/cutecat.jpg">
       Cute Cat
   </div>
   <div class="chip pink yellow accent-2">
       Tag
       <i class="material-icons mdi-navigation-close"></i>
   </div>

Dan masih banyak sekali atribut- atribut menarik yang disediakan oleh materialize.
Atribut lain dapat dilihat pada http://materializecss.com/
Sekian dulu untuk blog kali ini. Happy eksploring~

Android - Adaptive Color

Dengan rilisnya Android Lollipop, beberapa support libraries pun telah release. Salah satu library-nya adalah Palette API. Palette membantu kita untuk mempermudah mengekstrak warna yang menonjol dari gambar bitmap.

Google telah mempermudah kita untuk melakukan adaptive theming di Android berdasarkan warna dalam gambar dan sangat mudah untuk di implementasikan. Yang kita butuhkan adalah gambar bitmap dan Palette API. Dengan ini Android aplikasi kita bisa memiliki banyak warna sesuai dengan pedoman Material Design. Contoh seperti gambar dibawah:

Tambahkan dependecy di gradle anda:

compile 'com.android.support:palette-v7:21.0.0'

Untuk men-generate warna menggunakan Palette hanya berlaku untuk Bitmap. Dan dapat di generate secara synchronous dan asynchronous.

 // Synchronous
 Palette p = Palette.from(bitmap).generate();
 // Asynchronous
 Palette.from(bitmap).generate(new PaletteAsyncListener() {
     public void onGenerated(Palette p) {
         // Use generated instance
     }
 }); 

Secara default Palette object(Swatch) akan mencari 16 warna dari sebuah gambar dan ada 6 method untuk mendapatkan warna, yaitu:

• Vibrant dark. Palette.getDarkVibrantSwatch()
• Vibrant light. Palette.getLightVibrantSwatch()
• Muted. Palette.getMutedSwatch()
• Muted dark. Palette.getDarkMutedSwatch()
• Muted light. Palette.getLightMutedSwatch()
• Vibrant. Palette.getVibrantSwatch()

Dan setiap Swatch memiliki method:

• getPopulation(): jumlah piksel yang mewakili swatch.
• getRgb(): nilai RGB dari warna.
• getHsl(): nilai HSL dari warna
• getBodyTextColor(): nilai RGB dari warna yang sesuai untuk body text dan dijamin memiliki cukup kontras.
• getTitleTextColor(): nilai RGB dari warna yang sesuai untuk title text dan dijamin memiliki cukup kontras.

Catatan:

The different text colors roughly match up to the material design standard styles of the same name. The title text color will be more translucent as the text is larger and thus requires less color contrast. The body text color will be more opaque as text is smaller and thus requires more contrast from color. (source https://chris.banes.me/2014/10/20/palette-v21)

Oke, saya akan memberikan contoh penggunaannya:

1. Buat Activity dan desain layout seperti dibawah dan siapkan dua bawah gambar untuk kita dapatkan nilai warnanya.

<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:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical">

    <LinearLayout
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:title="@string/app_name"
            />

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/gambar1"
            android:scaleType="fitXY"
            />

    </LinearLayout>

    <LinearLayout
        android:orientation="vertical"
        android:background="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:title="@string/app_name"
            />

        <ImageView
            android:id="@+id/image2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/gambar2"
            android:scaleType="fitXY"
            />

    </LinearLayout>
</LinearLayout>

2. Buka kelas Activity. Disini class saya bernama PaletteActivity

3. Hasilnya seperti ini:

Menarik bukan ? mau sesuatu yang lebih keren ? nantikan blog saya berikutnya. Sekian dan terima kasih.

Sumber:

https://chris.banes.me/2014/10/20/palette-v21/

http://blog.brightinventions.pl/playing-with-material-design-toolbar-palette/

http://code.tutsplus.com/tutorials/coloring-android-apps-with-palette--cms-24096

Android - Materialize your app

Android 5.0 Lollilop telah rilis dengan konsep desain baru yang bernama Material Design. Material design memberikan panduan bagaimana mengembangkan UI untuk visual, motion, action di dalam aplikasi. Jika kita ingin mengadopsi konsep ini, pertama - tama kalian harus membaca detail spesifikasinya yang bisa dilihat disini. Dan tantangannya adalah bagaimana kita mengadopsi Material Design dengan masalah utamanya adalah backward-compatibility.

Solusinya adalah menggunakan Android Design Support Library. Walaupun tidak semua spesifikasinya tersedia tetapi library ini menyediakan komponen - komponen utama Material Design untuk Android 2.1 ke atas.  Berikut daftar komponennya:

1. NavigationView

NavigationView membantu kita untuk menampilkan side navigation, widget ini memiliki 2 atribut penting, yaitu: app:headerlayout (menampilkan layout header) dan app:menu (menampilkan list menu). Berikut contoh penggunaannya:

Dan berikut cara menampilkan menu.

2. Floating Action Button

Floating Action Button berbentuk lingkaran dan menjadi primary action di tampilan layar. Berikut spesifikasinya:

Implementasinya seperti gambar dibawah.

3. Snackbar

Snackbar digunakan untuk quick feedback dan tampil dibawah layar.

Snackbar

Berikut contoh implementasinya.

3. Tabs

Tidak jauh berbeda dengan Tab menggunakan ViewPager. Tetapi dengan menggunakan Tabs komponen ini dan dikombinasikan ViewPager kalian bisa integrasi dengan komponen Collapsing Toolbar.

Tabs

Berikut contoh implementasi dengan integrasi ViewPager.

4. Floating Label dan EditText

Hint text di EditText akan hilang ketika pengguna mengetik karakter pertama. Sekarang kalian bisa membungkus TextInputLayout maka hint text tidak akan hilang melainkan menjadi Floating Label.

Berikut contoh penggunaanya.

Apakah hanya 4 komponen diatas bagaimana melakukan transisi seperti Meaningful Transition. Ya Android Design Support Library juga memberikan solusinya dengan menggunakan CoordinatorLayout, AppBarLayout dan CollapsingToolbarLayout. Berikut contoh penggunaannya:

UI yang dihasilkan kalian bisa lihat disini. Sebenarnya masih ada beberapa library yang lain seperti CardView, AppCompat v21, RecyclerView dan Palette. Yang akan saya bahas di blog berikutnya hehehe.

Download Android Design Support Library:

 compile 'com.android.support:design:22.2.0'

Sumber:
http://android-developers.blogspot.co.id/2015/05/android-design-support-library.html

https://www.google.com/design/spec/material-design/introduction.html
https://developer.android.com/design/material/index.html