Reputation: 2785

Text TOP Right on Image in Android

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!

Upvotes: 0

Answers (6)

SaravInfern

Reputation: 3388

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>

Upvotes: 0

Phoenix

Reputation: 238

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.

Upvotes: 1

the-ginger-geek

Reputation: 7081

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>

Upvotes: 0

MurugananthamS

Reputation: 2405

  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"
    />

Upvotes: 0

Rustam

Reputation: 6515

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

Upvotes: 0

Ugurcan Yildirim

Reputation: 6132

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"

Upvotes: 0

Text TOP Right on Image in Android

Answers (6)

Related Questions