アイコン/イメージのような通知を実装する方法

Question

モバイルデバイスで一般的な通知スタイルでやや動的なアイコン/イメージを作成する必要があります。プライマリディスプレイはデスクトップ上にあるはずですが、私は明確にする必要があります。望遠鏡とギアプラス動的である番号：画像がテキスト

例えばテキスト 前

があるだろうこれは、2枚の画像から成ります。

私はほとんど完全にcssに慣れているので、私は望遠鏡に関してどのようにギアを配置するのかと、数字に応じてギアをどのようにスケールするのかに苦労しています（例えば、10000ならばギアを大きくする必要がありますそれが3である場合よりも）。

もちろん、コンボ全体が画面のサイズに合わせて適切に拡大縮小する必要があります。 これについてはいくらかエレガントな方法でどうやって行くのですか？

私のhtmlが

<div class="sidebar-item active"> 
      <a href="#"> 
       <img class="lab-image"/> 
       <span class="sidebar-item-title">Labs</span> 
      </a> 
</div> 

のように見えますが、今の私の研究室 - 画像は、ちょうど望遠鏡の画像です。あなたが探しているものを

Answer 1

はthisに基づいて、だから、カスタムの背景画像 とバッジで使用している場合は、私はこのフィドル

$(document).ready(function(){ 
 
var cw = $('.inner-badge').width(); 
 
$('.inner-badge').css({'height':cw+'px'}); 
 
})

body { 
 
    margin: 25px 
 
} 
 
.outter-badge { 
 
    position: relative; 
 
    margin: 10px; 
 
    background: #fff; 
 
    width: 64px; 
 
} 
 
.inner-badge { 
 
    display: table; 
 
    position: absolute; 
 
    top: -15px; 
 
    right: -25px; 
 
    background-image: url('https://openclipart.org/image/2400px/svg_to_png/174149/fancy-badge.png'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    text-align: center; 
 
} 
 
.inner-badge p{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
padding: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outter-badge"> 
 
    <img src="http://www.iconarchive.com/download/i88396/icons8/ios7/Industry-Microscope.ico" alt="" height="64"> 
 
    <div class="inner-badge"> 
 
    <p>1000</p> 
 
    </div> 
 
</div>

Answer 2

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(intent); 
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon + "_transparent", "drawable", intent.getPackageName())); 
}else{ 
    notificationBuilder.setSmallIcon(intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName())); 
} 
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
    Bitmap icon = BitmapFactory.decodeResource(intent.getResources(), intent.getResources().getIdentifier(appIcon, "drawable", intent.getPackageName())); 
    notificationBuilder.setLargeIcon(icon); 
} 
notificationBuilder.setContentTitle(title) 
     .setStyle(new NotificationCompat.BigTextStyle().bigText(message)) 
     .setContentText(message) 
     .setSound(defaultSoundUri) 
     .setPriority(NotificationCompat.PRIORITY_HIGH) 
     .setVisibility(NotificationCompat.VISIBILITY_PUBLIC) 
     .setAutoCancel(true) 
     .setContentIntent(pendingIntent);