Text TOP Right on Image in Android

Question

I am trying to insert Text on the image top right. Something like this:

So I tried the following: custom_profile_image here is 50dp

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="@dimen/custom_profile_image"
    android:layout_height="@dimen/custom_profile_image">

    <ImageView
        android:id="@+id/image"
        android:layout_width="@dimen/custom_profile_image"
        android:padding="2dp"
        android:src="@drawable/profilepic"
        android:layout_height="@dimen/custom_profile_image" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/image"
        android:layout_alignTop="@id/image"
        android:scaleType="fitStart"
        android:layout_marginRight="0dp"
        android:padding="2dp"
        android:background="@drawable/number_round"
        android:gravity="center"
        android:minWidth="17sp"
        android:adjustViewBounds="true"
        android:minHeight="17sp"
        android:paddingBottom="1dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="0"
        android:textColor="#ffffffff"
        android:textSize="12sp"
        android:visibility="visible"
        tools:ignore="RtlHardcoded" />

</RelativeLayout>

For the above XML I am getting the following output:

The problem here is that I would like to move the orange box towards the top so that it touches the tip of a profile image similar to the screenshot above. I tried lots of things, but not able to do so.

I am not sure what to do. Can you somebody help me with this?

Thanks!

change imagview padding to marginTop = "8dp" and marginRight = "8dp" — anonymous, Jun 03 '16 at 06:17
I did that top imageview has 8dp padding but the orage box came down with it. — Sanjana Nair, Jun 03 '16 at 06:20
Use FrameLayout with specified width and height and give little lesser width and height for image view and finally aligned the textview to the right — Rustam, Jun 03 '16 at 06:28
@sanjana first understand how margin and padding work. After that you got idea your self — anonymous, Jun 03 '16 at 06:31
Try this link.. http://stackoverflow.com/questions/37159773/add-button-with-a-counter-into-the-toolbar/37160060#37160060 — Sreehari, Jun 03 '16 at 06:39

score 1 · Accepted Answer · answered Jun 03 '16 at 07:00

Give a marginTop to the imageview and then give the half of that as the marginTop of the textview.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/image"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="20dp"
    android:padding="2dp"
    android:src="@drawable/user" />

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignRight="@id/image"
    android:layout_marginRight="0dp"
    android:layout_marginTop="10dp"
    android:adjustViewBounds="true"
    android:background="@drawable/tv_circle"
    android:gravity="center"
    android:minHeight="20sp"
    android:minWidth="20sp"
    android:padding="2dp"
    android:paddingBottom="1dp"
    android:paddingLeft="4dp"
    android:paddingRight="4dp"
    android:scaleType="fitStart"
    android:text="0"
    android:textColor="#ffffffff"
    android:textSize="12sp"
    android:visibility="visible"
    tools:ignore="RtlHardcoded" />

tv_circle.xml

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

<solid android:color="#F08600" />

<padding
    android:left="1dp"
    android:right="1dp"
    android:top="1dp" />

</shape>

For the above XML the output will be as following screenshot.

score 0 · Answer 2 · answered Jun 03 '16 at 06:28

Try the following:

Set the following attrs for RelativeLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
Set padding of ImageView to 20dp
Remove the following attrs for TextView
- android:layout_alignRight="@id/image"
- android:layout_alignTop="@id/image"
Set the following attrs for TextView
- android:layout_alignParentRight="true"
- android:layout_alignParentTop="true"

score 0 · Answer 3 · answered Jun 03 '16 at 06:33

You can try this way:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="300dip"
    android:layout_height="300dip">

    <ImageView
        android:id="@+id/image"
        android:layout_width="260dip"
        android:layout_height="260dip"
        android:layout_gravity="center"
        android:padding="2dp"
        android:scaleType="fitXY"
        android:src="@android:drawable/picture_frame" />

    <TextView
        android:id="@+id/text"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:layout_gravity="right"
        android:background="@drawable/bg_button_round_center_green"
        android:padding="2dp"
        android:text="0"
        android:gravity="center"
        android:textColor="@color/black"
        android:scaleType="fitStart" />

</FrameLayout>

You can use margin and padding to adjust the position of textview

SaravInfern · Answer 4 · 2016-06-10T11:33:14.460

You can do this by adding margin to your image view

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="100dp"
    android:layout_height="100dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:padding="2dp"
        android:src="@drawable/image"
        android:layout_height="100dp"
        android:layout_margin="6dp"/>

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:layout_marginRight="0dp"
        android:padding="2dp"
        android:background="@drawable/button_pressed"
        android:gravity="center"
        android:minWidth="17sp"
        android:adjustViewBounds="true"
        android:minHeight="17sp"
        android:paddingBottom="1dp"
        android:paddingLeft="4dp"
        android:paddingRight="4dp"
        android:text="0"
        android:textColor="#ffffffff"
        android:textSize="12sp"
        android:visibility="visible"
        tools:ignore="RtlHardcoded"
        android:layout_gravity="center_horizontal"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        />

</RelativeLayout>

score 0 · Answer 5 · answered Jun 03 '16 at 06:44

  try this
        <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/layoutforprofileimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

 <ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerInParent="true"
    android:src="@drawable/bookcover"
    android:layout_marginRight="50dp"
    android:layout_marginTop="50dp"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/text"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_alignParentRight="true"
    android:layout_marginRight="7dp"
    android:scaleType="fitStart"
    android:background="@drawable/notification_small"
    android:gravity="center"
    android:adjustViewBounds="true"
    android:minHeight="17sp"
    android:text="100"
    android:textColor="#000000"
    android:textSize="25sp"
    android:visibility="visible"
    />

score 0 · Answer 6 · answered Jun 03 '16 at 06:54

I cleaned up your layout a bit and added some of the sizes and colors you used into resource files.

The following will give you what you need. You can just modify the layout to suit your needs better.

I used the new preview view in Android Studio 2.2 to see that the layout looks good. I would suggest you use the new constraint layouts to help you out with more changes to your app and then look at the xml for best practices.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layoutforprofileimage"
    android:layout_width="@dimen/profileImageLayoutSize"
    android:layout_height="@dimen/profileImageLayoutSize">

    <ImageView
        android:id="@+id/image"
        android:layout_width="@dimen/custom_profile_image"
        android:layout_height="@dimen/custom_profile_image"
        android:layout_marginTop="@dimen/profileImageSpacingForLabel"
        android:layout_marginRight="@dimen/profileImageSpacingForLabel"
        android:layout_marginEnd="@dimen/profileImageSpacingForLabel"
        android:padding="@dimen/profileImagePadding"
        android:background="#00ffff"/>  <!-- Added this background for visual debugging -->

    <TextView
        android:id="@+id/text"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:gravity="center"
        android:text="@string/profileDefaultText"
        android:textColor="@color/white"
        android:textSize="12sp"
        android:background="#ffff00" /> <!-- Added this background for visual debugging -->

</RelativeLayout>

Add this to your dimens file dimens.xml

<dimen name="custom_profile_image">50dp</dimen>
<dimen name="profileImagePadding">2dp</dimen>
<dimen name="profileImageSpacingForLabel">10dp</dimen>
<dimen name="profileImageLayoutSize">60dp</dimen>

Add this to your strings file strings.xml

<string name="profileDefaultText">0</string>

Add this to your colors file colors.xml

<color name="white">#ffffff</color>

Text TOP Right on Image in Android

6 Answers6