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
Posting Komentar