Gravity for xml drawable

Question

I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:

The problems are:

• I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
• The tick sign is sometime behind the image if I set it with android:background.

---

Here are my xml files:

The current border xml drawable

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
        <stroke
            android:width="2dip"
            android:color="@color/bg_black"/>
        <padding
            android:left="3dp"
            android:right="3dp"
            android:top="3dp"
            android:bottom="3dp"
            />
    </shape>
</item>
<item >
    <layer-list >
        <item>
            <shape
                android:shape="rectangle">
                <stroke
                    android:width="2dp"
                    android:color="@color/border_yellow"/>
                <size
                    android:width="37dp"
                    android:height="37dp"/>
                <padding
                    android:bottom="3dp"
                    android:left="3dp"
                    android:right="3dp"
                    android:top="3dp"/>
            </shape>
        </item>
        <item android:drawable="@drawable/ic_tick"/>
    </layer-list>
</item>
</layer-list>

The Image Button xml layout

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/product1"
    android:background="@drawable/toggle_rectangle_check"/>

Thanks for your time.

Answer 1

I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/customWidgetBox"
      android:orientation="vertical">

      <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/customCheckmark"
       android:gravity="bottom|right" />

</LinearLayout>

And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml

customCheckmark.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <item android:drawable="@drawable/check_mark">
        <stroke android:width="3dp" android:color="@color/blue_button_border" />
   </item>
</shape>

customWidgetBox.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <item android:drawable="@drawable/camera">
        <stroke android:width="3dp" android:color="@color/blue_button_border" />
   </item>
</shape>

Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)

Some links that might be interesting for examples:

Set border and background color of textView

Drawable Resource, Android API

how to put a border around an android textview

Tips & Tricks -XML Drawables Part 1