Dasar Material Design Android

          Halo, kamu pasti sudah pernah dengar Material Design yang diperkenalkan di Android lolipop dan masih digunakan sampai sekarang. Di Material Design banyak sekali fiture baru seperti Material Theme, Widgets, Custom Shadows, Vector Drawable dan Custom Animation. Jika kamu belum pernah buat material design mungkin artikek ini dapat membantu untuk memulai membuat aplikasi Android.

          Pada tutotorial ini kita akan membuat step dasar pada Material Design, untuk lebih detail tentang Material Design bisa kunjungi link di bawah

Spesifikasi Material Design
Membuat Aplikasi Material Design




Sebelum mulai tutorial :
Pengenalan AIDE


Buat Project baru
Tambahkan liblary :
compile 'com.android.support:appcompat-v7:25.+'

Setelah membuat project Buat file baru  res/value/colors.xml ,

colorPrimaryDark = Warna untuk di notifikasi
colorPrimary = Diaplikasikan di toolbar
textColorPrimary = Text pada toolbar
windowBackground = Background aplikasi
colorAccent = Untuk text Accent

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#03a9f4</color>
    <color name="colorPrimaryDark">#0288d1</color>
    <color name="textColorPrimary">#ffffff</color>
    <color name="windowBackground">#ffffff</color>
    <color name="colorAccent">#03a9f4</color>
</resources>

Buat file baru lagi di res/value/dimens.xml, copy code di bawah.
# untuk membuat setting dimensi default

 
	
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="nav_drawer_width">260dp</dimen>
    
</resources>

tambahkan string seperti di bawah di res/value/strings.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MaterialDesign</string>
    <string name="hello_world">Hello world!</string>

    <string name="action_settings">Settings</string>
    <string name="action_search">Search</string>
    
    
</resources>

Masih di folder res/value buka style.xml tambahkan code berikut

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="KrisoftTheme.Base">

    </style>

    <style name="KrisoftTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>



</resources>

Setelah itu buka folder res/value-21 dan copy code di bawah

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="KrisoftTheme.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

    </style>
</resources>

Membuat Toolbar

          Seteleh beres membuat settingan di res/value kita pindah ke res/layout dan buat file baru

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Buka layout main xml dan include toolbar yang tadi di buat

 

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
>

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:layout_alignParentTop="true">

        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"
        />



    </LinearLayout>

    
</RelativeLayout>

Dan sekarang kita masuk ke pemrograman javanya buka MainActivity dan copy code di bawah

 

import android.app.*;
import android.os.*;
import android.support.v7.widget.Toolbar;
import android.support.v7.app.*;
import android.view.*;

public class MainActivity extends AppCompatActivity
{
    private Toolbar mToolbar;
    
    
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
       
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        
        int id = item.getItemId();

        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
    }

Kita selesai menerapkan atau include toolbar ke main.xml lalu kita buat menu action di toolbarnya, buat folder baru di res/menu menu_main.xml

 


<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity">

    <item
        android:id="@+id/action_search"
        android:title="@string/action_search"
        android:orderInCategory="100"
        android:icon="@drawable/ic_action_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="never" />
</menu>

         

Sekarang jalankan aplikasinya dan kamu akan lihat tampilan material design, 
Kamu bisa memanfaatkan sourcedenya sebagai templates karena AIDE gak ada templates Material Desaign dan biar gak cape buat dari awal Kamu tinggal gunakan sourcode dibawah dan tinggal ganti nama aplikasi dan packagenamenya sesuai kebutuhan Kamu dengan cara Refactor lihat caranya disini

Cara Refactoring Menggunakan AIDE

Download Source Code