Langsung ke konten utama

Membuat Tampilan Notifikasi Toolbar di Android Studio


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.

Komentar

Postingan populer dari blog ini

Inilah Kelebihan dan Kekurangan Ruby

Ruby merupakan salah satu bahasa pemrograman berorientasi objek berbasis skrip yang dikembangkan oleh Yukihiro Matsumoto yaitu seorang programer asal Jepang. Untuk mengetahui lebih jauh tentang bahasa Ruby silahkan baca postingan sebelumnya : Mengenal Bahasa Pemrograman Ruby  Sesuai judul postingan kali ini kita hanya akan membahas mengenai Kelebihan serta Kekurangan Bahasa Pemrograman Ruby. Berikut beberapa point yang telah kami jabarkan. Kelebihan Bahasa Pemrograman Ruby 1. Kode sederhana  Dibandingkan dengan bahasa pemrograman lainnya, yang kebanyakan untuk menulis kode dibutuhkan sekitar 10 baris, pada Ruby hanya butuh 1 atau 2 baris. Inilah kenapa Ruby dikatakan memiliki kode yang sederhana. Karena kesederhanaan dalam kodenya, akan mengurangi jam kerja programmer. 2. Multi-platform Ruby dapat berjalan di berbagai sistem operasi seperti Mac, Windows, hingga Linux. 3. Tingkat kebebasan yang tinggi Salah satu bentuk kebebasan programer dalam menuliska kode Ruby seperti tidak...

Cara Mengamankan Aplikasi Android dengan Proguard di Android Studio

Keamanan suatu aplikasi merupakan sebuah kebutuhan utama yang harus dipenuhi sebelum dapat dirilis ke public. Aplikasi dengan keamanan yang rendah akan mengundang banyak masalah dikemudian hari. Salah satu kelemahan aplikasi android yang dibangun menggunakan Android Studio adalah proses decompile atau bahasa kasarnya membongkar apk yang sudah jadi sangat mudah. Bahkan orang awam dalam pemrograman sekalipun dapat melakukannya dikarenakan adanya tools yang menyediakan fitur decompile ini. Salah satu tools yang biasa digunakan adalah jadx (Harap tidak menggunakannya untuk merugikan orang lain). Membuat aplikasi bebas dari proses decompile tidak bisa dihindari akan tetapi kita bisa melindungi kode hasil decompile agar tidak mudah dibaca oleh orang lain. Meskipun orang lain bisa membongkar aplikasi tersebut, mereka tidak akan mudah untuk melakukan modifikasi ataupun menemukan apa yang mereka cari. Alih alih menemukan apa yang dicari mereka akan merasa pusing dan membatalkan niatnya. Tetapi ...

Apa Sih Itu Svelte Js? Bagaimana Cara Menjalankannya? Yuks Simak Pembahasan Berikut Ini

(Sumber : Website https://svelte.dev/)   Hallo Sahabat Coders, Semoga kita semua selalu diberikan Kesehatan dan keberlimpahan dalam pekerjaan atau usaha kita. Perkembangan dunia pemrograman semakin hari semakin menjadi-jadi. Banyak Bahasa pemrograman maupun framework baru bermunculan akhir-akhir ini. Terutama framework JavaScript yang yang banyak bermunculan. Dan semuanya sangat menarik untuk dicoba.  Framework JavaScript yang terkenal saat ini contohnya Angular JS, Vue JS, React JS dan lain sebagainya dan mungkin banyak orang sudah tahu tentang framework- framework ini. Namun, akhir-akhir ini, ada framework yang baru terkenal yaitu Svelte JS (Website : https://svelte.dev/ ). Framework ini Admin tahu dari seorang JavaScript Developer terkenal di Indonesia yaitu Mas Riza Fahmi ( Curriculum Director di Hacktiv8 Indonesia ). Svelte Js merupakan sebuah framework JavaScript untuk menulis komponen antarmuka ( user interface) yang dibuat oleh Rich Harris . Namun menurut penulisn...