XML Androidでシェイプに背景画像を追加する


148

どのようにして背景画像を図形に追加しますか?以下で試したが成功しなかったコード:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
//here is where i need to set the image
<solid android:color="@drawable/button_image"/>
    <corners
     android:bottomRightRadius="5dp"
     android:bottomLeftRadius="5dp"
     android:topLeftRadius="5dp"
     android:topRightRadius="5dp"/>
 </shape>

カスタム形状のクラスを拡張して作成する必要があります。たとえば、RoundedImageViewを調べます。丸いイメージビューを作成するので、背景として設定した画像は丸められて表示されます
Rahul Gupta

回答:


221

以下を使用してくださいlayerlist

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" android:padding="10dp">
            <corners
                 android:bottomRightRadius="5dp"
                 android:bottomLeftRadius="5dp"
                 android:topLeftRadius="5dp"
                 android:topRightRadius="5dp"/>
         </shape>
   </item>
   <item android:drawable="@drawable/image_name_here" />
</layer-list>

4
おかげで、これはうまくいきましたが、エッジはもはや丸められていませんか?
DevC 2014年

丸いエッジの画像が必要ですか?あなたの形には色がないようです
vipul mittal

1
私の形は白い色と丸みを帯びたエッジを持っていました。色を削除して画像を使用すると、丸みを帯びたエッジが残ると思いました。これが不可能な場合は問題ありません
DevC 2014年

角が丸い画像はありませんか?
bvsss 2014年

可能ですが、プログラムで画像の角を丸める必要があります。このstackoverflow.com/questions/2459916/…を
vipul mittal 2014年

199

背景が円形のドローアブル画像には、以下を使用しました。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_select"
        android:bottom="20dp"
        android:left="20dp"
        android:right="20dp"
        android:top="20dp"/>
</layer-list>

これは次のようになります

ここに画像の説明を入力してください

それが誰かを助けることを願っています。


画像の重力を設定するものはありますか?
Sagar Devanga

@SagarDevanga上のコードのドローアブル用、またはレイアウトに画像を含める場合?
レイハンター

最初に、高さと幅を使用して内部アイコンを24dp(実際のサイズ)に設定しようとしました。これはASのプレビューで完全にサイズ変更されましたが、タブレットには影響がありませんでした。したがって、私はあなたの方法を使いました。図形の高さと幅を40 dpに設定し、アイコン項目の上下左右をそれぞれ8 dpに設定しました。(40-24)/ 2 = 8。ただし、結果の画像は適切なサイズに見えますが、ぼやけています。これは、PNGのサイズ変更の一部が原因であると考えられます。助言がありますか?
ルークアリソン

TLDR; 画質を維持したまま、直径40 dpの円と24 dpのアイコンで上記の画像をどのように作成しますか?
ルークアリソン

@LukeAllison UIにアイコンを追加する方法と、楕円形に配置する画像の大きさを教えてください。
レイハンター

21

これは内部にアイコンが付いた円形です。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ok_icon"/>
    <item>
        <shape
                android:shape="oval">
            <solid android:color="@color/transparent"/>
            <stroke android:width="2dp" android:color="@color/button_grey"/>
        </shape>
    </item>
</layer-list>

キャレット画像と境界線を表示したい方に最適
Masum

7

コーナー画像です

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/img_main_blue"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <item>
        <shape
            android:padding="10dp"
            android:shape="rectangle">
            <corners android:radius="10dp" />
            <stroke
                android:width="5dp"
                android:color="@color/white" />
        </shape>

    </item>
</layer-list>

4

ボーダー付きのドローアブルイメージには次を使用しました。

まず、このコードを使用して.xmlファイルを描画可能なフォルダーに作成します。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="oval">
        <solid android:color="@color/orange"/>
    </shape>
</item>
<item
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">
    <shape android:shape="oval">
        <solid android:color="@color/white"/>
    </shape>
</item>
<item
    android:drawable="@drawable/messages" //here messages is my image name, please give here your image name.
    android:bottom="15dp"
    android:left="15dp"
    android:right="15dp"
    android:top="15dp"/>

次に、レイアウトフォルダーにビュー.xmlファイルを作成し、この方法で上記の.xmlファイルを呼び出します

<ImageView
   android:id="@+id/imageView2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/merchant_circle" />  // here merchant_circle will be your first .xml file name

1

これは、画像のカスタム形状を取得する最も簡単な方法です(画像ビュー)。誰かに役立つかもしれません。たった1行のコードです。

まず、依存関係を追加する必要があります。

dependencies {
    compile 'com.mafstech.libs:mafs-image-shape:1.0.4'   
}

次に、次のようなコード行を記述します。

Shaper.shape(context, 
       R.drawable.your_original_image_which_will_be_displayed, 
       R.drawable.shaped_image_your_original_image_will_get_this_images_shape,
       imageView,
       height, 
       weight);   
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.