UI help for Notification on icon

Question

Quiero diseñar la siguiente IU. ¿Alguien puede darme un ejemplo o sugerir algún código fuente para la implementación?

Answer 1

Here is Project on Git Hub respecto mostrando insignias en diversos artículos, pero dentro de su aplicación (es decir TextView, TabHost, ImageView etc)

trata de mostrar la insignia en icono de la aplicación, esto no es posible, porque este no es el camino androide de mostrar notificaciones. El marco de android admite el manejo de notificaciones usando Status bar Notifications

Answer 2

Puede utilizar un RelativeLayout con dos hijos, uno para el icono y uno para la placa. El ícono necesita relleno extra para que la insignia quede ligeramente fuera de él. La insignia se posiciona alineada con parentTop y parentRight.

Answer 3

Si desea configurar el icono de notificación en la esquina superior izquierda es tan simple como el siguiente fragmento de código:

Bitmap1 debe ser más grande que bitmap2, y en su caso, yo aconsejaría a ser una imagen PNG con fondo transparente para permitir que la burbuja de notificación esté fuera del resto de la imagen.

 private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) { 
      Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig()); 
      Canvas canvas = new Canvas(bmOverlay); 
      canvas.drawBitmap(bitmap1, new Matrix(), null); 
      canvas.drawBitmap(bitmap2, new Matrix(), null); 
      return bmOverlay; 
     } 

De lo contrario si lo desea en la esquina superior derecha usted debe tratar cualquiera de las otras especificaciones para Canvas.drawBitmap.

Por ejemplo:

canvas.drawBitmap(Bitmap bitmap, float left, float top, Paint paint); 

Trate de hacer algo como:

private Bitmap overlay(Bitmap bitmap1, Bitmap bitmap2) { 
      Bitmap bmOverlay = Bitmap.createBitmap(bitmap1.getWidth(), bitmap1.getHeight(), bitmap1.getConfig()); 
      Canvas canvas = new Canvas(bmOverlay); 
      canvas.drawBitmap(bitmap1, new Matrix(), null); 
      canvas.drawBitmap(bitmap2, bitmap1.getWidth()-bitmap2.getWidth(), 
           0,null); 
      return bmOverlay; 
     } 

Si todo lo que quería era cómo hacerlo en XML, entonces se debe crear un RelativeLayout y luego en ella añadir tanto imágenes y alinear la burbuja de notificación a la derecha. Y eso debería hacer el truco. Aún tendría que tener una imagen PNG con el fondo transparente.

Espero que sea suficiente para lo que quiere hacer.

Answer 4

Aquí está su código fuente para mostrar esta aplicación icono insignia insignia cuenta.

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:id="@+id/main_widget" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:layout_gravity="center_horizontal" 
android:layout_marginTop="20dip" 
android:focusable="true" > 

<ImageView 
    android:id="@+id/icon" 
    android:layout_width="60dip" 
    android:layout_height="60dip" 
    android:layout_marginTop="8dp" 
    android:background="@drawable/logo" 
    android:contentDescription="image" 
    android:scaleType="center" /> 

<TextView 
    android:id="@+id/title" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/icon" 
    android:gravity="center" 
    android:paddingLeft="3dp" 
    android:paddingTop="10dp" 
    android:shadowColor="#000000" 
    android:shadowDx="1" 
    android:shadowDy="1" 
    android:shadowRadius="1.5" 
    android:text="@string/app_name" 
    android:textColor="#FFF" /> 

<TextView 
    android:id="@+id/txt_count" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="-10dip" 
    android:layout_toRightOf="@+id/icon" 
    android:background="@drawable/badge_count2" 
    android:contentDescription="badge" 
    android:gravity="center" 
    android:text="1" 
    android:textColor="@color/White" 
    android:textStyle="bold" /> 

</RelativeLayout> 

y también necesita este archivo badge_count2.xml dibujable.

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 

<solid android:color="@color/red" > 
</solid> 

<stroke 
    android:width="2dp" 
    android:color="#FFFFFF" > 
</stroke> 

<padding 
    android:bottom="2dp" 
    android:left="7dp" 
    android:right="7dp" 
    android:top="3dp" /> 

<corners android:radius="10dp" > 
</corners> 

Answer 5

aquí es un simple biblioteca de soporte disponible en múltiples dispositivos como Sony, Samsung, moto, etc ... probar esto ... esto va a funcionar ... he intentado y está trabajando muy bien .. http://github.com/leolin310148/ShortcutBadger