Jember Developer

AndBlog v1.1 - Make Android App for Blogger Blog

noreply@blogger.com (Admin) — Sat, 25 May 2019 18:36:00 +0000

Andblog adalah aplikasi android yang dibuat untuk blogger. Dengan aplikasi ini pembaca blog anda bisa lebih mudah untuk membuka blog. Andblog dibuat menggunakan Android Studio dengan memanfaatkan Blogger API yang disediakan oleh Google. Berikut ini beberapa fitur yang ada di Andblog.

26 Mei 2019

Versi 1.1
Desian baru
Penambahan fitur bookmark
Penambahan fitur app indexing
Perbaikan beberapa bug

01 Januari 2019

Initial release.

Fitur Andblog

App indexing
Admob ready
Fast load
Search view
Share button
About
Onboarding
Shimmer animation

200.000 Beli Demo

KPU Real Count Pemilu 2019

noreply@blogger.com (Admin) — Wed, 24 Apr 2019 16:03:00 +0000

KPU Real Count adalah aplikasi yang dibuat untuk melihat Real Count Pemilu 2019. Pengguna dapat melihat hasil di setiap provinsi di Indonesia. Data yang dimuat pada aplikasi ini berasal dari website resmi KPU yang menggunakan API dari kpu.nyandev.id

24 April 2019

Initial release.

Fitur

Chart
Hasil per Provinsi

Unduh

Andblog - Create Native Android Apps for Blogger Blog

noreply@blogger.com (Admin) — Wed, 02 Jan 2019 14:53:00 +0000

01 Januari 2019

Initial release.

Fitur Andblog

Build using Blogger API V3
Admob ready
Fast load
Firebase Cloud Messaging
Chrome Custom Tab
Search view
Rate app
Infinite scroll
Share button
About
Onboarding
Lottie animation

200.000 Demo

Cara Mudah Membuat Sliding TabLayout di Android Studio 3

noreply@blogger.com (Admin) — Sat, 24 Nov 2018 00:00:00 +0000

Assalamualaikum... setelah sekian lama tidak update pada posting kali ini Jember Developer akan berbagi cara membuat sliding tablayout di android studio. Di tutorial ini kita akan membuat sliding tablayout seperti pada aplikasi whatsapp. Ok langsung saja berikut tutorialnya.

Pertama silahkan buat projek baru dan tambahkan librai berikut ini;

Kemudian ubah file sytles.xml menjadi seperti berikut, tujuannya untuk menghapus toolbar atau action bar, nantinya kita akan membuat toolbar secara manual agar lebih mudah untuk diubah-ubah.

Kemudian buat toolbar, klik kanan di layout > new layout resources, berinama dengan toolbar.xml dan paste kode berikut ini.
Kemudian buka activity_main.xml kemudian edit menjadi seperti berikut.
Setelah itu buat java class baru untuk tab adapter.
Selanjutnya buat 3 fragment baru untuk menampilkan konten tiap tab. Berikut ini xml untuk fragment.
Terakhir buka MainActivity.java lalu ubah menjadi seperti berikut ini.

Jangan lupa untuk menambahkan icon yang dibutuhkan di drawable nya.

Demikain tutorial kali ini, jika ada pertanyaan atau kritik dan saran bisa ditulis di kolom komentar di bawah. Jika kuran jelas bisa tonton video tutorial.

Mantaps Material Design Blogger Template

noreply@blogger.com (Admin) — Sun, 18 Jun 2017 13:50:00 +0000

Deskripsi

Mantaps adalah template blogger yang dibuat untuk website atau blog streaming movie atau drama. Template ini menggunakan konsep material design.

Screenshot

Fitur

Responsive Layout - Cek
Google Testing Tool Validator - Cek
Mobile Friendly - Cek
Navigation Drawer on Mobile
Popular Post
Related Post
Disqus Comment System
Search Box
Custom Error Page
Social Share Button
Artists Widget Tag Conditional
Include Documentation
2 Colum

Pengenalan CSS untuk Pemula

noreply@blogger.com (Admin) — Tue, 14 Mar 2017 08:29:00 +0000

Halo, pada posting sebelumnya kita sudah bahas tentang Struktur Dasar HTML, nah pada posting ini kita akan membahas tentang Cascadin Style Sheet atau CSS. HTML dan CSS saling berkaitan, HTML tidak akan terlihat bagus tanpa CSS. Peran CSS di sini sebagai pengatur tampilan suatu website, ibarat lukisan HTML adalah kanvas dan CSS adalah cat.

Di dalam CSS terdiri dari Selektor, deklarasi, Properti dan Nilai. Class dan id merupakan selektor pada CSS. Berikut ini perbedaan dari class dan id.

CLASS

Selector Class adalah selector yang digunakan untuk grup elemen, atau penamaan yang bisa di gunakan dilebih dari satu elemen. Berikut ini syarat menggunakan selector Class.

Pemberian Class pada suatu elemen boleh menggunakan kata atau angka apa saja
Class bisa digunakan dilebih dari satu elemen
Bisa menggunakan lebih dari satu nama Class pada satu elemen
Tidak boleh diawali oleh angka
Tidak boleh mengandung special characters

Penulisan CSS

Penulisan Class pada CSS diawali oleh "." titik diikuti oleh selector Class nya.


.sidebar{float: left; background: white;}
.sidebar1{width: 100px}
.sidebar2{width: 200px}

ID

Selector ID adalah selector yang hanya bisa dimiliki oleh satu elemen pada halaman website, sama halnya seperti National ID, atau nomor KTP yang hanya dapat dimiliki oleh satu orang saja. Berikut ini syarat menggunakan selector ID.

Pemberian ID pada suatu elemen boleh menggunakan kata atau angka apa saja
Tidak boleh ada ID lebih dari satu
Tidak boleh diawali oleh angka
Tidak boleh mengandung special characters (~ ! @ # $ %)


#header{margin: auto; width:100%; height: 100px; background:#3F51B5}

Penulisan ID

Yaitu diawali dengan karakter "#" pagar kemudian diikuti ID nya.

Nah, sekarang bagaimana memangil CSS pada HTML? Perhatikan dan pelajari kode sederhana berikut ini!


<html>
<head>
<title>Pengenalan CSS untuk Pemula - Jember Developer</title>
<style type="text/css"> /* tag pembuka untuk menempatkan CSS internal */
body{width:100%; margin:auto;}
h1, h2{margin:auto; color:#FFFFFF; font-size:24px; text-align:center;}
#header{margin: auto; width:100%; height: 100px; background:#3F51B5}
#konten {width:750px; height:500px; float:left; background:#CFD8DC;}
.sidebar{float: right;}
.sidebar1{width: 300px; height:500px; background:#E91E63}
.sidebar2{width: 250px; height:500px; background:#4CAF50}
</style>
<head>
<body>
<!-- Pemanggilan CSS ID -->
<div id="header">
<h1>Ini tampilan dari CSS header</h1>
</div>
<!-- Pemanggialan CSS ID untuk konten -->
<div id="konten"><h1>Ini bagian konten</h1></div>
<!-- Pemanggilan CSS Class -->
<div class="sidebar sidebar1"><h2>Ini sidebar 1</h2></div>
<div class="sidebar sidebar2"><h2>Ini sidebar 2</h2></div>
</body>
</html>

Simpan kode di atas dengan ekstensi .html lalu buka dengan browser dan lihat tampilannya.

Bagaimana kalo tanpa CSS? Silahkan dicoba hapus CSS nya dan lihat perbedaannya.

Mungkin itu saja postingan kali ini, semoga bermanfaat. Apabila ada pertanyaan silahkan bertanya pada kolom komentar di bawah. Selamat belajar! 😀

Sumber

Struktur Dasar HTML

noreply@blogger.com (Admin) — Sat, 11 Mar 2017 15:44:00 +0000

Hallo.. Pada kesempatan kali kita akan belajar HTML dasar. Kerangka dasar dari HTML untuk membangun sebuah website. Seperti yang sudah teman-teman ketahui HTML merupakan bahasa pemrograman yang biasa digunakan untuk website. Baca juga postingan sebelumnya tentang bahasa pemrograman untuk membangun webiste. Oke berikut ini struktur dasar dari HTML.


<html>
<head>
<title></title>
<head>
<body>
</body>
</html>

Penjelasan:


<html>
......
</html>

Tag <html> ini digunakan untuk menyatakan bahwa halam website menggunakan bahasa HTML.


<head>
......
</head>

Tag <head> adalah kepala dari halaman website. Pada tag ini anda bisa menambahkan banyak informasi seperti meta, css, javascript, font dan lain lain.

Contoh, memanggil external file css, javascript dan font dari google webfont.


<head>
<title>
Struktur Dasar HTML - Jember Developer
</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" >
<script type="text/javascript" href="script.js"></script>
</head>


<title>
.......

</title>

Tag <title> digunakan untuk menyatakan title website anda. Tag ini disimpan didalam tag <head></head>


<body>
.......
</body>

Tag <body> ini digunakan untuk menampilkan isi dari website anda. Semua yang ingin anda tampilkan, dimasukan dalam tag <body> ini, bisa image, teks, video, musik dan lain-lain.

Demikian posting kali ini tentang Struktur Dasar HTML, semoga bermanfaat.

Bahasa Pemrogrmaan Untuk Membangun Website

noreply@blogger.com (Admin) — Sat, 11 Mar 2017 14:35:00 +0000

Hai... Pada kesempatan kali ini saya akan berbagi tentang bahasa pemrograman apa saja sih yang perlu dipelajari untuk membangun sebuah website. Pada postingan sebelumnya saya sudah berbagi tentang CMS Populer Untuk Membuat Website. Pemrograman website bisa dibagi menjadi dua yaitu Front-End dan Back-End. Nah apa perbedaan dari keduanya? Berikut penjelasan singkatnya.

Front-End adalah bagian utama dari sebuah website yang terhubung langsung dengan pengguna atau lebih sederhananya adalah tampilan antarmuka sebuah website tersebut. Front-End lebih mengarah ke pengalaman pengguna.

Back-End adalah bagian dari pengambilan data yang akan ditampilkan pada sebuah website. Sederhananya Back-End lebih cenderung ke bagian server dan database sebuah website.

Lalu bahasa pemrograman apa saja yang biasa dipakai untuk membangun website? Baiklah, berikut ini bahasa pemrograman yang biasa dipakai pada sebuah website, di sini kita bagi menjadi dua seperti penjelasan sebelumnya agar lebih mudah dipahami.

Bahasa Pemprograman untuk Front-End :

HTML (HyperText Mark up Language)
CSS (Cascading Style Sheet)
SASS (Syntactically Awesome StyleSheets)
JavaScript

Bahasa Pemrograman untuk Back-End :

PHP (PHP: Hypertext Prepocessor)
Ruby
Python
Java
Net

Nah itu dia bahasa pemrograman yang perlu kalian pelajari untuk membangun sebuah website. Demikian posting kali ini, sampai jumpa di posting selanjutnya ya!

Tutorial Navigation Drawer Material Design Android Studio

noreply@blogger.com (Admin) — Tue, 23 Feb 2016 05:12:00 +0000

Pada posting kali ini kita akan membahas tentang tutorial navigation drawer material design menggunakan Android Studio. Sebelumnya kita jelaskan dulu apa itu navigation drawer. Navigation adalah panel navigasi utama pada aplikasi android yang tersembunyi di sisi kiri layar dan akan terbuka ketika pengguna menarik layar dari kiri ke kanan, untuk lebih jelasnya bisa baca di sini.

Sebenarnya ada cara cepat untuk membuat navigation drawer pada aplikasi android yang kita buat yaitu menggunakan library, namun pada tutorial ini kita tidak akan menggunakan library. Mungkin di posting selanjutnya kita akan berikan tutorial membuat navigation drawer menggunakan library. Oke kita langsung simak tutorial berikut.

Buka projek yang sebelumnya sudah dibuat.

Baca juga

Buka build.gradle (module:app) lalu tambahkan dependencies berikut ini:

compile 'de.hdodenhof:circleimageview:1.2.1'
compile 'com.android.support:recyclerview-v7:22.0.+'

Kemudian klik Sync Now dan tunggu hingga proses building selesai.
Jika sudah buka ActivitySatu.java lalu salin kode berikut ini setelah kode private SlidingTabLayout mTabs;

String TITLES[] = {"Overview","Portofolio","Team"};
int ICONS[] = {R.mipmap.ic_info_grey600_36dp,R.mipmap.ic_perm_contact_cal_grey600_36dp,R.mipmap.ic_account_child_grey600_36dp};
int PROFILE = R.mipmap.ic_launcher;
RecyclerView mRecyclerView;
RecyclerView.Adapter mAdapter;
RecyclerView.LayoutManager mLayoutManager;
DrawerLayout Drawer;
ActionBarDrawerToggle mDrawerToggle;

Masih di ActivitySatu.java tambahkan kode berikut ini tepat di bawah kode setSupportActionBar(toolbar);

 mRecyclerView = (RecyclerView) findViewById(R.id.RecyclerView);
mRecyclerView.setHasFixedSize(true);
mAdapter = new NavAdapter(TITLES,ICONS,getString(R.string.app_name),getString(R.string.email),PROFILE);
mRecyclerView.setAdapter(mAdapter);
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
Drawer = (DrawerLayout) findViewById(R.id.DrawerLayout);
mDrawerToggle = new ActionBarDrawerToggle(this,Drawer,toolbar,R.string.openDrawer,R.string.closeDrawer){
    @Override
    public void onDrawerOpened(View drawerView) {
        super.onDrawerOpened(drawerView);

    }

    @Override
    public void onDrawerClosed(View drawerView) {
        super.onDrawerClosed(drawerView);

    }
};
Drawer.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();

Buat class baru dan berinama dengan NavAdapter. Lalu salin kode berikut ini.

 import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Taufan F on 12/02/2016.
 */
public class NavAdapter extends RecyclerView.Adapter<NavAdapter.ViewHolder> {
    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;
    private String mNavTitles[];
    private int mIcons[];
    private String name;
    private int profile;
    private String email;

    public static class ViewHolder extends RecyclerView.ViewHolder {
        int Holderid;

        TextView textView;
        ImageView imageView;
        ImageView profile;
        TextView Name;
        TextView email;


        public ViewHolder(View itemView,int ViewType) {
            super(itemView);

            if(ViewType == TYPE_ITEM) {
                textView = (TextView) itemView.findViewById(R.id.rowText);
                imageView = (ImageView) itemView.findViewById(R.id.rowIcon);
                Holderid = 1;
            }
            else{
                Name = (TextView) itemView.findViewById(R.id.name);
                email = (TextView) itemView.findViewById(R.id.email);
                profile = (ImageView) itemView.findViewById(R.id.circleView);
                Holderid = 0;
            }
        }
    }

    NavAdapter(String Titles[],int Icons[],String Name,String Email, int Profile){
        mNavTitles = Titles;
        mIcons = Icons;
        name = Name;
        email = Email;
        profile = Profile;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == TYPE_ITEM) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.nav_items,parent,false);
            ViewHolder vhItem = new ViewHolder(v,viewType);
            return vhItem;
        } else if (viewType == TYPE_HEADER) {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.header,parent,false);
            ViewHolder vhHeader = new ViewHolder(v,viewType);
            return vhHeader;
        }
        return null;
    }

    @Override
    public void onBindViewHolder(NavAdapter.ViewHolder holder, int position) {
        if(holder.Holderid ==1) {
            holder.textView.setText(mNavTitles[position - 1]);
            holder.imageView.setImageResource(mIcons[position -1]);
        }
        else{

            holder.profile.setImageResource(profile);
            holder.Name.setText(name);
            holder.email.setText(email);
        }

    }

    @Override
    public int getItemCount() {
        return mNavTitles.length+1;
    }

    @Override
    public int getItemViewType(int position) {
        if (isPositionHeader(position))
            return TYPE_HEADER;

        return TYPE_ITEM;
    }

    private boolean isPositionHeader(int position) {
        return position == 0;
    }
}

Buka activity_satu.xml lalu salin kode berikut.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/DrawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="7dp">

    <LinearLayout xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".ActivitySatu">

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

        <com.developer.jember.jdapps.Tabs.SlidingTabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"

        android:background="#ffffff"
        android:scrollbars="vertical">

    </android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>

Buka direktori res > values > strings.xml lalu tambahkan kode berikut ini.

 <string name="email">jemberdeveloper@gmail.com</string>

Buat layout baru dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama header. Lalu salin kode berikut ini

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="178dp"
    android:background="@color/colorPrimary"
    android:orientation="vertical"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:textColor="#ffffff"
            android:text="@string/app_name"
            android:textSize="14sp"
            android:textStyle="bold"
            />

        <TextView
            android:id="@+id/email"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="5dp"
            android:text="@string/email"
            android:textSize="14sp"
            android:textStyle="normal"

            />
    </LinearLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@mipmap/ic_launcher"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="38dp"
        android:id="@+id/circleView"
        />
</RelativeLayout>

Buat layout baru lagi dengan cara klik kanan pada direktori layout > New > Layout resource file, berinama nav_items. Lalu salin kode berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/nav_bg"
    android:clickable="true"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/rowIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:src="@mipmap/ic_info_white_18dp"
        android:contentDescription="ikon" />

    <TextView
        android:id="@+id/rowText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="72dp"
        android:text="Medium Text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

Buat drawable baru caranya klik kanan pada direktori drawable > New > Drawable resource file, berinama nav_bg. Lalu salin kode berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorHighlight"></solid>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</selector>

Buat lagi drawable baru dengan nama yang sama tapi pada Directory name ubah menjadi drawable-v21. Lalu salin kode berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask" android:drawable="@android:color/white"/>
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorHighlight"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

Jalankan aplikasi dan lihat hasilnya.

Video Tutorial

Github
PDF

Tutorial Membuat Sliding Tab Layout Android Studio

noreply@blogger.com (Admin) — Mon, 08 Feb 2016 13:06:00 +0000

Hallo berjumpa lagi di tutorial android untuk pemula. Pada kesempatan kali ini Jember Developer akan membahasa tentang Sliding Tab Layout, kebanyakan aplikasi android sudah menerapkan sliding tab layout ini seperti aplikasi Facebook, Blackberry Messangger, Whatsapp dan masih banyak yang lain juga. Sliding tab layout memudahkan pengguna untuk berpindah dari suatu tampilan.Baiklah kita langsung saja ke tutorialnya.

Buka projek yang sudah kita buat sebelumnya! Silahkan baca posting tentang Tutorial Material Design dan Tutorial Toolbar.
Buat class baru caranya klik kanan pada package name > New > Java Class.
Berinama dengan SlidingTabLayout, lalu salin kode di bawah ini.

 import android.content.Context;
import android.graphics.Typeface;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.SparseArray;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * To be used with ViewPager to provide a tab indicator component which give constant feedback as to
 * the user's scroll progress.
 * <p>
 * To use the component, simply add it to your view hierarchy. Then in your
 * {@link android.app.Activity} or {@link android.support.v4.app.Fragment} call
 * {@link #setViewPager(ViewPager)} providing it the ViewPager this layout is being used for.
 * <p>
 * The colors can be customized in two ways. The first and simplest is to provide an array of colors
 * via {@link #setSelectedIndicatorColors(int...)}. The
 * alternative is via the {@link TabColorizer} interface which provides you complete control over
 * which color is used for any individual position.
 * <p>
 * The views used as tabs can be customized by calling {@link #setCustomTabView(int, int)},
 * providing the layout ID of your custom layout.
 */
public class SlidingTabLayout extends HorizontalScrollView {
    /**
     * Allows complete control over the colors drawn in the tab layout. Set with
     * {@link #setCustomTabColorizer(TabColorizer)}.
     */
    public interface TabColorizer {

        /**
         * @return return the color of the indicator used when {@code position} is selected.
         */
        int getIndicatorColor(int position);

    }

    private static final int TITLE_OFFSET_DIPS = 24;
    private static final int TAB_VIEW_PADDING_DIPS = 16;
    private static final int TAB_VIEW_TEXT_SIZE_SP = 12;

    private int mTitleOffset;

    private int mTabViewLayoutId;
    private int mTabViewTextViewId;
    private boolean mDistributeEvenly;

    private ViewPager mViewPager;
    private SparseArray<String> mContentDescriptions = new SparseArray<String>();
    private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;

    private final SlidingTabStrip mTabStrip;

    public SlidingTabLayout(Context context) {
        this(context, null);
    }

    public SlidingTabLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // Disable the Scroll Bar
        setHorizontalScrollBarEnabled(false);
        // Make sure that the Tab Strips fills this View
        setFillViewport(true);

        mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);

        mTabStrip = new SlidingTabStrip(context);
        addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }

    /**
     * Set the custom {@link TabColorizer} to be used.
     *
     * If you only require simple custmisation then you can use
     * {@link #setSelectedIndicatorColors(int...)} to achieve
     * similar effects.
     */
    public void setCustomTabColorizer(TabColorizer tabColorizer) {
        mTabStrip.setCustomTabColorizer(tabColorizer);
    }

    public void setDistributeEvenly(boolean distributeEvenly) {
        mDistributeEvenly = distributeEvenly;
    }

    /**
     * Sets the colors to be used for indicating the selected tab. These colors are treated as a
     * circular array. Providing one color will mean that all tabs are indicated with the same color.
     */
    public void setSelectedIndicatorColors(int... colors) {
        mTabStrip.setSelectedIndicatorColors(colors);
    }

    /**
     * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
     * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so
     * that the layout can update it's scroll position correctly.
     *
     * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
     */
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mViewPagerPageChangeListener = listener;
    }

    /**
     * Set the custom layout to be inflated for the tab views.
     *
     * @param layoutResId Layout id to be inflated
     * @param textViewId id of the {@link TextView} in the inflated view
     */
    public void setCustomTabView(int layoutResId, int textViewId) {
        mTabViewLayoutId = layoutResId;
        mTabViewTextViewId = textViewId;
    }

    /**
     * Sets the associated view pager. Note that the assumption here is that the pager content
     * (number of tabs and tab titles) does not change after this call has been made.
     */
    public void setViewPager(ViewPager viewPager) {
        mTabStrip.removeAllViews();

        mViewPager = viewPager;
        if (viewPager != null) {
            viewPager.setOnPageChangeListener(new InternalViewPagerListener());
            populateTabStrip();
        }
    }

    /**
     * Create a default view to be used for tabs. This is called if a custom tab view is not set via
     * {@link #setCustomTabView(int, int)}.
     */
    protected TextView createDefaultTabView(Context context) {
        TextView textView = new TextView(context);
        textView.setGravity(Gravity.CENTER);
        textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
        textView.setTypeface(Typeface.DEFAULT_BOLD);
        textView.setLayoutParams(new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));

        TypedValue outValue = new TypedValue();
        getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
                outValue, true);
        textView.setBackgroundResource(outValue.resourceId);
        textView.setAllCaps(true);

        int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
        textView.setPadding(padding, padding, padding, padding);

        return textView;
    }

    private void populateTabStrip() {
        final PagerAdapter adapter = mViewPager.getAdapter();
        final View.OnClickListener tabClickListener = new TabClickListener();

        for (int i = 0; i < adapter.getCount(); i++) {
            View tabView = null;
            TextView tabTitleView = null;

            if (mTabViewLayoutId != 0) {
                // If there is a custom tab view layout id set, try and inflate it
                tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                        false);
                tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
            }

            if (tabView == null) {
                tabView = createDefaultTabView(getContext());
            }

            if (tabTitleView == null && TextView.class.isInstance(tabView)) {
                tabTitleView = (TextView) tabView;
            }

            if (mDistributeEvenly) {
                LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
                lp.width = 0;
                lp.weight = 1;
            }

            tabTitleView.setText(adapter.getPageTitle(i));
            tabView.setOnClickListener(tabClickListener);
            String desc = mContentDescriptions.get(i, null);
            if (desc != null) {
                tabView.setContentDescription(desc);
            }

            mTabStrip.addView(tabView);
            if (i == mViewPager.getCurrentItem()) {
                tabView.setSelected(true);
            }
        }
    }

    public void setContentDescription(int i, String desc) {
        mContentDescriptions.put(i, desc);
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (mViewPager != null) {
            scrollToTab(mViewPager.getCurrentItem(), 0);
        }
    }

    private void scrollToTab(int tabIndex, int positionOffset) {
        final int tabStripChildCount = mTabStrip.getChildCount();
        if (tabStripChildCount == 0 || tabIndex < 0 || tabIndex >= tabStripChildCount) {
            return;
        }

        View selectedChild = mTabStrip.getChildAt(tabIndex);
        if (selectedChild != null) {
            int targetScrollX = selectedChild.getLeft() + positionOffset;

            if (tabIndex > 0 || positionOffset > 0) {
                // If we're not at the first child and are mid-scroll, make sure we obey the offset
                targetScrollX -= mTitleOffset;
            }

            scrollTo(targetScrollX, 0);
        }
    }

    private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
        private int mScrollState;

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int tabStripChildCount = mTabStrip.getChildCount();
            if ((tabStripChildCount == 0) || (position < 0) || (position >= tabStripChildCount)) {
                return;
            }

            mTabStrip.onViewPagerPageChanged(position, positionOffset);

            View selectedTitle = mTabStrip.getChildAt(position);
            int extraOffset = (selectedTitle != null)
                    ? (int) (positionOffset * selectedTitle.getWidth())
                    : 0;
            scrollToTab(position, extraOffset);

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                        positionOffsetPixels);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {
            mScrollState = state;

            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageScrollStateChanged(state);
            }
        }

        @Override
        public void onPageSelected(int position) {
            if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
                mTabStrip.onViewPagerPageChanged(position, 0f);
                scrollToTab(position, 0);
            }
            for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                mTabStrip.getChildAt(i).setSelected(position == i);
            }
            if (mViewPagerPageChangeListener != null) {
                mViewPagerPageChangeListener.onPageSelected(position);
            }
        }

    }

    private class TabClickListener implements View.OnClickListener {
        @Override
        public void onClick(View v) {
            for (int i = 0; i < mTabStrip.getChildCount(); i++) {
                if (v == mTabStrip.getChildAt(i)) {
                    mViewPager.setCurrentItem(i);
                    return;
                }
            }
        }
    }

}

Buat class baru lagi, berinama dengan SlidingTabStrip lalu salin kode berikut ini.

 import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.widget.LinearLayout;

class SlidingTabStrip extends LinearLayout {

    private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0;
    private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
    private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3;
    private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;

    private final int mBottomBorderThickness;
    private final Paint mBottomBorderPaint;

    private final int mSelectedIndicatorThickness;
    private final Paint mSelectedIndicatorPaint;

    private int mSelectedPosition;
    private float mSelectionOffset;

    private SlidingTabLayout.TabColorizer mCustomTabColorizer;
    private final SimpleTabColorizer mDefaultTabColorizer;

    SlidingTabStrip(Context context) {
        this(context, null);
    }

    SlidingTabStrip(Context context, AttributeSet attrs) {
        super(context, attrs);
        setWillNotDraw(false);

        final float density = getResources().getDisplayMetrics().density;

        TypedValue outValue = new TypedValue();
        context.getTheme().resolveAttribute(android.R.attr.colorForeground, outValue, true);
        final int themeForegroundColor =  outValue.data;

        int defaultBottomBorderColor = setColorAlpha(themeForegroundColor,
                DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);

        mDefaultTabColorizer = new SimpleTabColorizer();
        mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR);

        mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
        mBottomBorderPaint = new Paint();
        mBottomBorderPaint.setColor(defaultBottomBorderColor);

        mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
        mSelectedIndicatorPaint = new Paint();
    }

    void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) {
        mCustomTabColorizer = customTabColorizer;
        invalidate();
    }

    void setSelectedIndicatorColors(int... colors) {
        // Make sure that the custom colorizer is removed
        mCustomTabColorizer = null;
        mDefaultTabColorizer.setIndicatorColors(colors);
        invalidate();
    }

    void onViewPagerPageChanged(int position, float positionOffset) {
        mSelectedPosition = position;
        mSelectionOffset = positionOffset;
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        final int height = getHeight();
        final int childCount = getChildCount();
        final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null
                ? mCustomTabColorizer
                : mDefaultTabColorizer;

        // Thick colored underline below the current selection
        if (childCount > 0) {
            View selectedTitle = getChildAt(mSelectedPosition);
            int left = selectedTitle.getLeft();
            int right = selectedTitle.getRight();
            int color = tabColorizer.getIndicatorColor(mSelectedPosition);

            if (mSelectionOffset > 0f && mSelectedPosition < (getChildCount() - 1)) {
                int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
                if (color != nextColor) {
                    color = blendColors(nextColor, color, mSelectionOffset);
                }

                // Draw the selection partway between the tabs
                View nextTitle = getChildAt(mSelectedPosition + 1);
                left = (int) (mSelectionOffset * nextTitle.getLeft() +
                        (1.0f - mSelectionOffset) * left);
                right = (int) (mSelectionOffset * nextTitle.getRight() +
                        (1.0f - mSelectionOffset) * right);
            }

            mSelectedIndicatorPaint.setColor(color);

            canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
                    height, mSelectedIndicatorPaint);
        }

        // Thin underline along the entire bottom edge
        canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);
    }

    /**
     * Set the alpha value of the {@code color} to be the given {@code alpha} value.
     */
    private static int setColorAlpha(int color, byte alpha) {
        return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
    }

    /**
     * Blend {@code color1} and {@code color2} using the given ratio.
     *
     * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend,
     *              0.0 will return {@code color2}.
     */
    private static int blendColors(int color1, int color2, float ratio) {
        final float inverseRation = 1f - ratio;
        float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
        float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
        float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
        return Color.rgb((int) r, (int) g, (int) b);
    }

    private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer {
        private int[] mIndicatorColors;

        @Override
        public final int getIndicatorColor(int position) {
            return mIndicatorColors[position % mIndicatorColors.length];
        }

        void setIndicatorColors(int... colors) {
            mIndicatorColors = colors;
        }
    }
}

Setelah itu buka activity_satu.xml lalu tambahkan kode berikut di bawah kode Toolbar.

 <com.developer.jember.jdapps.Tabs.SlidingTabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

Ubah com.developer.jember.jdapps.Tabs.SlidingTabLayout sesuai dengan nama package sobat.

Buka ActivitySatu.java lalu tambahkan kode berikut ini di bawah kode private Toolbar toolbar.

 private ViewPager mPager;
private SlidingTabLayout mTabs;

Masih di ActivitySatu.java tambahkan kode Sliding Tab berikut kedalam onCreate method.

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_satu);
    //toolbar
    toolbar= (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //Sliding Tab
    mPager = (ViewPager) findViewById(R.id.pager);
    mPager.setAdapter(new MyAdapter(getSupportFragmentManager(),this));

    mTabs= (SlidingTabLayout) findViewById(R.id.tabs);
    mTabs.setDistributeEvenly(true);
    mTabs.setCustomTabView(R.layout.tab_view, R.id.tabTeks);
    mTabs.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
    mTabs.setSelectedIndicatorColors(getResources().getColor(R.color.colorAccent));
    mTabs.setViewPager(mPager);
}

Buta class baru dengan nama MyAdapter lalu salin kode berikut ini.

 import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.text.SpannableString;
import android.text.Spanned;
import android.text.style.ImageSpan;

public class MyAdapter extends FragmentPagerAdapter {
    private Context mContext;
    private String[] titles={"OVERVIEW","PORTOFOLIO","TEAM"};
    int[] icons= new int[]{R.mipmap.ic_info_white_48dp,R.mipmap.ic_perm_contact_cal_white_48dp,R.mipmap.ic_account_child_white_48dp};
    private int heightIcon;

    public MyAdapter(FragmentManager fm, Context c) {
        super(fm);
        mContext=c;
        double scale=c.getResources().getDisplayMetrics().density;
        heightIcon=(int)(26*scale+0.5f);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment frag=null;
        if (position==0){
            frag=new OverviewFragment();
        } else if (position==1){
            frag=new PortofolioFragment();
        } else if (position==2){
            frag=new TeamFragment();
        }

        Bundle b = new Bundle();
        b.putInt("position",position);
        frag.setArguments(b);
        return frag;
    }

    @Override
    public int getCount() {
        return titles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        Drawable d = mContext.getResources().getDrawable(icons[position]);
        d.setBounds(0,0,heightIcon,heightIcon);

        ImageSpan is = new ImageSpan(d);

        SpannableString sp = new SpannableString(" ");
        sp.setSpan(is,0,sp.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

        return (sp);
    }
}

R.mipmap.ic_info_white_48dp,R.mipmap.ic_perm_contact_cal_white_48dp,R.mipmap.ic_account_child_white_48dp adalah kode untuk icon.

Langkah selanjutnya buat tiga fragment. Caranya klik kanan di package name > New > Fragment > Fragment (Blank). Jangan lupa uncheck Include fragment factory methods dan include interface callbacks.
Buka semua fragment lalu ubah kode import android.app.Fragment menjadi seperti berikut ini.

 import android.support.v4.app.Fragment;

Sekarang kita tambahkan ripple effect ketik mengklik tab. Klik kanan di direktori drawable > New > Drawable resource file dan berinama tab_bg. Salin kode berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorHighlight"></solid>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
</selector>

Lakukan lagi klik kanan di direktori drawable > New > Drawable resource file dan berinama tab_bg pada Directory name ubah menjadi drawable-v21. Lalu salin kode berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item
        android:id="@android:id/mask"
        android:drawable="@android:color/white"></item>
</ripple>

Sekarang coba jalankan aplikasinya.

Github
PDF

Tutorial Toolbar Android Studio Untuk Pemula

noreply@blogger.com (Admin) — Fri, 05 Feb 2016 13:12:00 +0000

Hallo, di tutorial sebelumnya Jember Developer sudah membahas tentang tutorial untuk menerapkan material design pada aplikasi yang akan kita buat. Nah di tutorial kali ini akan membahas tentang cara membuat toolbar. Oke langsung saja simak tutorial berikut ini.

Buka projek yang telah dibuat sebelumnya.
Klik kanan pada direktori layout > New > Layout resource file
Berinama toolbar. Pada bagian Root element ubah menjadi android.support.v7.widget.Toolbar
Kemudian buka styles.xml lalu ubah tema menjadi NoActionBar
Buka toolbar.xml lalu edit menjadi seperti berikut ini.

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

</android.support.v7.widget.Toolbar>

Buka activity_satu.xml lalu tambahkan script berikut ini.

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

 <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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".ActivitySatu">

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"
        android:text="@string/hello_world"/>

</RelativeLayout>

Buka ActivitySatu.java lalu ubah AppCompatActivity menjadi ActionBarActivity. Tambahkan variable Toolbar sehingga hasil seperti berikut.

 public class ActivitySatu extends ActionBarActivity{
    private Toolbar toolbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_satu);
        //toolbar
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
...
...
...
}

Pasti akan muncul error karena java class nya belum di import. Lakukan import dengan cara tekan Alt+Enter di bagian yang error. Jika ada pilihan, pilih android.support.v7.
Jika sudah coba jalankan, hasilnya akan seperti ini. Kurang enak dilihat karena warna teks hitam.
Langkah selanjutnya kita akan mengubah warna teks pada toolbar, caranya buka toolbar.xml lalu edit menjadi seperti berikut ini.

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

</android.support.v7.widget.Toolbar>

Jalankan aplikasi dan lihat hasilnya, jauh lebih menarik kan dan juga lebih sesuai dengan konsep Material Design.

Github
PDF

Tutorial Material Design Android Studio untuk Pemula

noreply@blogger.com (Admin) — Thu, 04 Feb 2016 06:16:00 +0000

Halo gaes, pada posting pertama ini Jember Developer akan membagikan tutorial material design menggunakan Android Studio. Tutorial ini dibuat untuk para pemula yang ingin belajar android development. Karena admin juga masih pemula jadi kita belajar bersama di sini. Oke langsung simak tutorial berikut.

Buka Android Studio, pada tutorial ini saya menggunakan versi 1.3.2
Pilih "Start a new Android Studio project"
Kemudian atur nama aplikasi, nama package dan direktori untuk menyimpan projek aplikasi android yang akan sobat buat.
Kemudian pilih Minimum SDK untuk menjalankan aplikasi yang akan sobat buat, di sini saya pilih API 15:Android 4.0.3 (IceCreamSandwich)
Setelah itu pilih Blank Activity. Klik Next kemudian Finish.
Tunggu hingga proses building selesai.
Jika sudah klik kanan pada direktori values > New > values resource file
Berinama colors, lalu klik OK.
Jika sudah salin kode berikut ini ke file colors. Untuk mendapatkan kombinasi warna Material Design yang pas silahkan kunjungi www.materialpalette.com

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#2196F3</color>
    <color name="colorPrimaryDark">#1976D2</color>
    <color name="colorAccent">#FF4081</color>
</resources>

Selanjutnya buat file seperti langkah nomor 7, berinama styles, pada bagian Directory name ubah menjadi values-v21
Buka file styles.xml dan v21\styles.xml
Salin kode berikut ke file styles.xml

 <resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="AppTheme.Base">
        <!-- Customize your theme here. -->
    </style>
    <style name="AppTheme.Base" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

Selanjutnya salin kode berikut ke file v21\styles.xml

 <?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:colorPrimary">@color/colorPrimary</item>
        <item name="android:colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="android:colorAccent">@color/colorAccent</item>
    </style>
</resources>

Jika sudah coba jalankan menggunakan perangkat android sobat.

Github
PDF