Membuat Tampilan Notifikasi Toolbar di Android Studio

Berita Anda on

Thursday, October 17, 2019

Berita Anda, Halo Pengunjung blog dimanapun anda berada semoga kalian tetap dalam keadaan sehat, saat ini anda sedang membaca Artikel dengan judul Membuat Tampilan Notifikasi Toolbar di Android Studio, semoga bermanfaat dan selamat membaca

Pada postingan kali ini kita akan membuat ikon vector asset akan menampilkan jumlah notifikasi pada sudut kanannya. Hasil dari tampilan yang akan kita buat nantinya akan tampak seperti gambar di bawah ini.

Untuk membuat tampilan seperti di atas bisa dilakukan dengan memanipulasi layout. Terdapat layout atau widget nantinya yang akan tumpah tindi.

Silahkan buat project baru atau buka project lama yang ingin anda tambahkan notifikasi pada toolbarnya. Saya sendiri membuat project baru dengan konfigurasi seperti pada gambar di bawah ini.

Sebelum membuat tampilan dan koding pada MainActivity terlebih dahulu silahkan buat 2 icon Vector Asset yaitu more, dan notif. Bagi yang belum tahu caranya silahkan baca Cara Menggunakan Icon Vector Asset bawahan Android Studio

 
Setelah itu lanjut ke tahap pengkodean. Silahkan edit file-file dibawah ini sesuai dengan kode di bawahnya.

1. AndroidManifest.xml

 
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="codingrakitan.blogspot.com.notifikasitoolbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
 

Pada kode di atas yang diganti adalah tema dari AppTheme menjadi Theme.AppCompat.Light.NoActionBar. Hal ini di maksudkan agar nantinya tidak akan muncul toolbar bawahan dari tema.

2. activity_main.xml

 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity" >

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:contentInsetStart="0dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Coding Rakitan"
                android:textColor="@android:color/white"
                android:textSize="18sp" />

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

                <FrameLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:minWidth="35dp">

                    <ImageView
                        android:id="@+id/imageView"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="right"
                        android:tint="@android:color/white"
                        app:srcCompat="@drawable/notif"
                        tools:ignore="VectorDrawableCompat" />

                    <LinearLayout
                        android:id="@+id/ly_notif"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@android:color/holo_red_dark"
                        android:orientation="vertical"
                        android:paddingLeft="5dp"
                        android:paddingTop="3dp"
                        android:paddingRight="5dp"
                        android:paddingBottom="3dp"
                        android:visibility="gone">

                        <TextView
                            android:id="@+id/tv_notif"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="1"
                            android:textColor="@android:color/white"
                            android:textSize="10sp"
                            android:textStyle="bold" />
                    </LinearLayout>
                </FrameLayout>

            </LinearLayout>

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:tint="@android:color/white"
                app:srcCompat="@drawable/more"
                tools:ignore="VectorDrawableCompat" />

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

</LinearLayout>
 

3. MainActivity.java

 
public class MainActivity extends AppCompatActivity {

    private LinearLayout ly_notif;
    private TextView tv_notif;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        jumlah notifikasi
        int jumlah = 0;
//        tmpilkan jumlah kedalam notifikasi
        tampilNotif(jumlah);
    }

    private void tampilNotif(int i) {
        ly_notif = findViewById(R.id.ly_notif);
        tv_notif = findViewById(R.id.tv_notif);
        if (i>0){
            ly_notif.setVisibility(View.VISIBLE);
            tv_notif.setText(""+i);
        }else{
            ly_notif.setVisibility(View.GONE);
            tv_notif.setText(""+i);
        }
    }
}
 

Pada bagian tampilNotif(jumlah); berfungsi untuk menjalankan method dan mengirim jumlah angka yang akan di tampilkan pada notifikasi. Jika anda mengisinya dengan angka 0 maka notifikasi tidak akan tampil.

4. color.xml

 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#008577</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
    <color name="toolbar">#080064</color>
</resources>

 

Jika sudah selesai melakukan pengeditan silahkan jalankan aplikasi menggunakan emulator atau build langsung ke Smartphone anda menggunakan USB, bila sukses maka anda bisa melihat tampilannya seperti berikut.

Labels: Android_Studio

Thanks for reading Membuat Tampilan Notifikasi Toolbar di Android Studio. Please share...!