2017-08-08 130 views
0

的通知計數器我想有對ImageView的右側類似的通知計數器的應用程序:這是我的佈局的照片:Android的 - 如何在右邊添加上述的ImageView

MyPhoto.png

我想有這樣的通知計數器:

OriginalApp.png

這裏是我的activity_menu佈局:

<?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:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    tools:context="datasite.com.konnex.Menu" 
    android:background="#ffffff"> 

    <android.support.v7.widget.Toolbar 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#3fc0ea"> 

     <ImageButton 
      android:layout_width="120dp" 
      android:layout_height="38dp" 
      android:background="@drawable/lg1" 
      android:layout_marginLeft="130dp" /> 

     <SearchView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="90dp"/> 
    </android.support.v7.widget.Toolbar> 

    <FrameLayout 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1"> 

     <GridLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:columnCount="2"> 
     <ImageView 
      android:layout_width="90dp" 
      android:layout_height="90dp" 
      android:src="@drawable/cases" 
      android:layout_marginLeft="60dp" 
      android:layout_marginTop="40dp" 
      android:id="@+id/img_cases"/> 
      <ImageView 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       android:src="@drawable/invoices" 
       android:layout_marginLeft="80dp" 
       android:layout_marginTop="40dp" /> 

      <ImageView 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       android:src="@drawable/announcement" 
       android:layout_marginLeft="60dp" 
       android:layout_marginTop="40dp" /> 
      <ImageView 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       android:src="@drawable/users" 
       android:layout_marginTop="40dp" 
       android:layout_marginLeft="80dp"/> 
      <ImageView 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       android:src="@drawable/document" 
       android:layout_marginTop="60dp" 
       android:layout_marginLeft="60dp" /> 
      <ImageView 
       android:layout_width="90dp" 
       android:layout_height="90dp" 
       android:src="@drawable/meetings" 
       android:layout_marginTop="60dp" 
       android:layout_marginLeft="80dp"/> 

     </GridLayout> 
    </FrameLayout> 

    <android.support.design.widget.BottomNavigationView 
     android:id="@+id/navigation" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="#fffafa" 
     app:menu="@menu/navigation" 
     app:itemIconTint="@color/dark" 
     app:itemTextColor="@color/dark" /> 

</LinearLayout> 

這裏是我menu.java類:

public class Menu extends AppCompatActivity { 

      private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener 
        = new 

BottomNavigationView.OnNavigationItemSelectedListener() { 

      @Override 
      public boolean onNavigationItemSelected(@NonNull MenuItem item) { 

       switch (item.getItemId()) { 
        case R.id.nav_about: 
         return true; 
        case R.id.nav_location: 
         return true; 
        case R.id.nav_phone: 
         return true; 
        case R.id.nav_home: 
         return true; 
       } 
       return false; 
      } 
     }; 

      @Override 
      protected void onCreate(Bundle savedInstanceState) { 
       super.onCreate(savedInstanceState); 
       setContentView(R.layout.activity_menu); 

      } 
    } 

請幫忙找到解決這個問題。我已經搜索了很多答案,但還沒有找到針對我的案例的解決方案。提前致謝!

+0

你可以試試這個[Android的viewbadger(https://github.com/jgilfelt/android-viewbadger)庫 –

回答

0

更新它們包裹你的每一個的ImageView中的FrameLayout這樣。

<GridLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:columnCount="2"> 
     <FrameLayout 
      android:layout_width="90dp" 
      android:layout_height="90dp"> 
      <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:src="@drawable/cases"/> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="1" 
      android:background="@android:color/red" 
      android:layout_gravity="top|end"/> 
     </FrameLayout> 
</GridLayout> 
+0

Ahsan謝謝。現在它的工作。欣賞 – Zoffa

0
<RelativeLayout 
    android:layout_width="100dp" 
    android:layout_height="100dp"> 

    <ImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="#fc0505" 
     android:text="10" 
     android:layout_alignParentRight="true" 
     android:textSize="18sp"/> 

</RelativeLayout> 
+0

阿維納什?它是與textview工作,但不能獲得設置徽章(。你能請幫忙做到這一點 – Zoffa

0

環繞你的圖像內GridLayoutRelativeLayout,把notificaton指標內的RelativeLayout。 例子:

<RelativeLayout 
    android:layout_width="90dp" 
    android:layout_height="90dp"> 
<ImageView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:src="@drawable/cases" 
    android:layout_marginLeft="60dp" 
    android:layout_marginTop="40dp" 
    android:id="@+id/img_cases"/> 
<TextView 
    android:id="@+id/item1" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textColor="#FFFFFF" 
    android:background="#FF0000"/> 
</RelativeLayout> 

並且你可以通過

GridLayout gridLayout.... 
TextView item1 = (TextView) gridLayout.findViewById(R.id.item1); 
item1.setText("3"); // 3 notifications 
+0

謝謝幫助textview。但如何使圖標上方的徽章櫃檯? – Zoffa