Angka notifikasi | Actionbar | UI

Halo para developer, bagaimana kabarnya? Setelah beberapa minggu tidak update, kali ini saya akan berbagi tentang bagaimana cara membuat icon notifikasi di-actionbar dengan tambahan angka. Kenapa ditambahin dengan angka? Agar user tau, ada berapa sih notifikasi yang belum dibaca, sehingga lebih menambah user experience-nya.

Tutorial kali ini simple banget, tidak butuh library apa-apa, cukup satu buah activity saja. Bagi yang sudah menggunakan android studio versi terbaru, bisa menggunakan template blank activity untuk pertama kalinya. Nanti akan terdapat sebuah fab button yang akan saya gunakan untuk menambah jumlah angka diicon notifikasinya.

Template Post 3

Akan terlihat seperti diatas tampilan awal ketika menggunakan template blank activity. Kemudian langkah-langkah yang akan kita kerjakan adalah sebagai berikut:

  1. Buat background berbentuk lingkaran sebagai background dari angka notifikasi.
  2. Mengambil icon bell dari vector asset
  3. Mendisain tampilan untuk notifikasi secara keseluruhan, background lingkaran digabung dengan notifikasi dan sebuah text untuk angkanya
  4. Coding Time 😀

Ini adalah tampilan hasil dari tutorial kali ini, biar ada pandangan apa yang mau dikerjakan

device-2016-02-26-174915

Background Lingkaran

Background lingkarang ini digunakan untuk memberikan kejelasan angka dari notifikasi. Kodenya sebagai berikut:

count_notification.xml(ditaruh difolder drawable)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="@color/colorAccent"/>
</shape>\

 

Icon Notifikasi

Icon notifikasi yang akan saya gunakan menggunakan vector asset, berformat xml. Kelebihannya, icon ini tidak akan pecah gambarnya walaupun ukurannya bertambah. Fitur ini bisa digunakan dengan gradle 1.4 ke atas(kalau gak salah ya), jadi yang belum update gradlenya bisa segera update ya, karena vector asset ini sangat-sangat diperlukan untuk membangun aplikasi dengan kualitas yang bagus. Untuk sementara bagi yang belum bisa update gradlenya, bisa menggunakan icon notifikasi yang png ataupun icon apa saja. Berikut cara untuk mengambil icon dari vector asset:

  • Klik kanan sembarang pada folder dibagian projek.
  • Lalu pilih New kemudian pilih Vector Asset.

2

  • Setelah itu pilih choose pada bagian Material Icon, lalu cari icon bell, klik icon tersebut dan tekan ok, setelah itu tekan next dan finish. Maaf ngga pakai gambar yak, ribet hehehe tapi mudeng kan?

Default warna dari vector asset adalah berwarna hitam, biar lebih jelas dilihat di-actionbar, ganti warnanya dengan putih, caranya dengan mengganti fillColor menjadi #FFF, seperti kode dibawah:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFF"
        android:pathData="M11.5,22c1.1,0 2,-0.9 2,-2h-4c0,1.1 0.9,2 2,2zm6.5,-6v-5.5c0,-3.07 -2.13,-5.64 -5,-6.32V3.5c0,-0.83 -0.67,-1.5 -1.5,-1.5S10,2.67 10,3.5v0.68c-2.87,0.68 -5,3.25 -5,6.32V16l-2,2v1h17v-1l-2,-2z"/>
</vector>

Desain Tampilan

Icon notifikasi dan background lingkaran yang sudah dibuat, dijadikan satu agar dapat digunakan sebagai actionLayout yang nantinya akan digunakan di-actionbar, berikut kodenya:

actionbar_notification.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:clickable="true">

    <ImageView
        android:layout_centerInParent="true"
        android:id="@+id/notification"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_notifications_24dp"/>

    <RelativeLayout
        android:layout_alignRight="@+id/notification"
        android:layout_alignTop="@+id/notification"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:background="@drawable/count_notification">
        <TextView
            android:layout_centerInParent="true"
            android:id="@+id/count"
            android:text="1"
            android:textColor="@android:color/white"
            android:textSize="8sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </RelativeLayout>



</RelativeLayout>

Kode untuk halaman utama

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="andevindo.com.angkanotifikasi.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email"/>

</android.support.design.widget.CoordinatorLayout>

 

Lalu untuk tampilan utamanya dibutuhkan sebuah button yang berfungsi untuk mereset angka notifikasi. Ubah layout content_main.xml menjadi seperti:

content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="andevindo.com.angkanotifikasi.MainActivity"
    tools:showIn="@layout/activity_main">

    <Button
        android:id="@+id/reset"
        android:text="Reset"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</RelativeLayout>

Untuk menunya sebagai berikut:

menu_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      tools:context="andevindo.com.angkanotifikasi.MainActivity">
    <item
        android:id="@+id/notification"
        android:actionLayout="@layout/actionbar_notification"
        android:icon="@drawable/ic_notifications_24dp"
        android:title="Notification"
        />
</menu>

 

Coding Time 😀

 

Kodenya semua berada diclass MainActivity.java dan sangat sederhana sekali. Penjelasan sudah saya taruh didalam kode

package andevindo.com.angkanotifikasi;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TextView mCount;

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

        //Digunakan untuk menambah angka pada notifikasi
        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int count = Integer.parseInt(mCount.getText().toString());
                //bertambah ketika diklik
                mCount.setText(++count+"");
            }
        });

        //Digunakan untuk mereset angka pada notifikasi menjadi 0
        Button resetButton = (Button)findViewById(R.id.reset);
        resetButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //berubah menjadi 0 ketika direset
                mCount.setText("0");
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        MenuItem menuItem = menu.findItem(R.id.notification);//Mendapatkan menu notifikasi
        MenuItemCompat.setActionView(menuItem, R.layout.actionbar_notification);//mendefinisikan set action view untuk menu notifikasi dengan actionbar_notification
        RelativeLayout relativeLayout = (RelativeLayout)MenuItemCompat.getActionView(menuItem);//parent dari actionbar_notification adalah relativelayout, kita tangkap parentnya untuk digunakan mencari childnya
        mCount = (TextView)relativeLayout.findViewById(R.id.count);//mendeklarasikan count textview
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement


        return super.onOptionsItemSelected(item);
    }
}

 

Sekian dulu tutorial kali ini, semoga dapat membantu teman-teman dalam mempercantik tampilan aplikasinya ketika membuat aplikasi yang menggunakan notifikasi, ataupun dapat diterapkan juga untuk yang lain seperti jumlah chat yang belum terbaca dan lain-lain.