Android : Align image on top right hand corner of button

Question

I have an image which looks like a checkbox, that i would like to align on top right hand corner of button. Have tried relative layout but could not achieve desired result. Any suggestion to achieve the desired result?

I have tried using Framelayout but the checbox image remains hidden

 <FrameLayout 
         android:layout_marginLeft="10dp"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <ImageView 
            android:id="@+id/filter_check"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:background="@drawable/checkmark"
             android:layout_gravity="right"
            />

         <Button
            android:id="@+id/filter"
            style="@style/Widget.Button.White.BlueText.BlueStroke"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Filter" />


    </FrameLayout>

After Farouk's suggestions to use Button before image. Here is the code

<FrameLayout 
     android:layout_marginLeft="10dp"
    android:layout_marginTop="20dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/filter"
        style="@style/Widget.Button.White.BlueText.BlueStroke"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Filter" />

      <ImageView 
        android:id="@+id/filter_check"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:background="@drawable/checkmark"
         android:layout_gravity="top|right"
        />

</FrameLayout>

Here is what i see on designer.

Not sure how to move the checkbox image up and right.

In case you want the solution, here it is:

<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="80dp" >

        <Button
            android:id="@+id/filter"
            style="@style/Widget.Button.White.BlueText.BlueText.FrameImage"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sort" />

        <ImageView
            android:id="@+id/widget_title_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:src="@drawable/checkmark" />
    </FrameLayout>


  <style name="Widget.Button.White.BlueText.BlueText.FrameImage" parent="@android:style/Widget.Button">
        <item name="android:background">@drawable/white_button_blue_stroke_bg_selector</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textAppearance">?android:attr/textAppearanceMedium</item>
    </style>

Solution:

Answer 1

It look like this :

Just play with the android:paddingTop="-10dp" as you like.

Here the code :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/widget_icon"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <Button
            android:id="@+id/filter"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#0000FF"
            android:gravity="center"
            android:paddingBottom="25dp"
            android:paddingTop="25dp"
            android:text="Sort"
            android:textColor="#FFFFFF" />

        <ImageView
            android:id="@+id/widget_title_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top|right"
            android:adjustViewBounds="true"
            android:paddingTop="-10dp"
            android:scaleType="fitStart"
            android:src="@drawable/checkbtn" />

    </FrameLayout>

Answer 2

Check this one, hopefully it will help you.

<?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/ic_launcher"
        android:scaleType="center" />


    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="-10dip"
        android:layout_toRightOf="@+id/icon"
        android:gravity="center"
        android:text="" />

    </RelativeLayout>

EDIT If you want to move checkbox little further to imageview then increase the android:layout_marginLeft="-10dip" to android:layout_marginLeft="-20dip" . Just play with it. :)

Answer 3

If someone wants to add the dot over a drawable (create a new drawable with layer-list with dot at right top corner)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/any_drawable">
    </item>
    <item android:drawable="@drawable/active_dot"  android:gravity="right|top"/>
</layer-list>

active_dot.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">

    <size android:height="12dip" android:width="12dip"/>

    <solid android:color="#B01212"/>
</shape>