Search code examples
androidxmlimageviewpositionwatermark

Position imageview relative to another imageview

I am having trouble with adding watermark to bottom right of imageview.

So, the idea is to add imageview (watermark) at bottom of another imageview(image i am editing).

Problem is, Photos I am trying to edit have different sizes (vertical, horizontal, big, small).

Here is what I have:

<RelativeLayout
android:id="@+id/relativelayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:mobfox="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="64dp"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:id="@+id/tb_buy"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@null"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:textColor="@color/icons"
        android:text="BUY PRO"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:id="@+id/tb_save"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@null"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:textColor="@color/icons"
        android:text="SAVE"/>

</android.support.v7.widget.Toolbar>


<FrameLayout
    android:id="@+id/framelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/toolbar"
    android:layout_above="@+id/banner">

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <!--<ImageView-->
        <!--android:id="@+id/iv_watermark"-->
        <!--android:layout_width="wrap_content"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:layout_gravity="bottom|right"-->
        <!--android:alpha="0.7"-->
        <!--android:src="@drawable/watermark"/>-->

</FrameLayout>

<com.mobfox.sdk.bannerads.Banner
    android:layout_height="50dp"
    android:layout_width="320dp"
    android:id="@+id/banner"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">
</com.mobfox.sdk.bannerads.Banner>

This puts watermark imageview at the bottom right of FrameLayout.

enter image description here

and in this case, I want it at the bottom right of imageview i am editing.

P.S. I also tryed adding it programmatically which i think is 'way to go' approach, but I don't know all the functionalities and what's possible.

I tried something like

        //#### WATERMARK ####
    ImageView watermark = new ImageView(this);
    watermark.setImageResource(R.drawable.watermark);
    watermark.setBottom(editPhoto.getBottom());
    watermark.setRight(editPhoto.getRight());
    mLayout.addView(watermark);

But that doesn't work. It just stretches watermark imageview in center of the screen.

Solution

  • You can achieve that by replacing FrameLayout with RelativeLayout and the height and the width of the parent layout should be wrap_content

    Something like this:

    <RelativeLayout
android:id="@+id/relativelayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
xmlns:mobfox="http://schemas.android.com/apk/res-auto">

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="64dp"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:id="@+id/tb_buy"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@null"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:textColor="@color/icons"
        android:text="BUY PRO"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:id="@+id/tb_save"
        android:textSize="18sp"
        android:textStyle="bold"
        android:background="@null"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:textColor="@color/icons"
        android:text="SAVE"/>

</android.support.v7.widget.Toolbar>


<RelativeLayout
    android:id="@+id/framelayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/toolbar"
    android:layout_above="@+id/banner">

    <ImageView
        android:id="@+id/iv_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/iv_watermark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alighRight="@id+/iv_photo"
        android:layout_alighBottom="@id+/iv_photo" 
        android:alpha="0.7"
        android:src="@drawable/watermark"/>

</RelativeLayout>

<com.mobfox.sdk.bannerads.Banner
    android:layout_height="50dp"
    android:layout_width="320dp"
    android:id="@+id/banner"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true">
</com.mobfox.sdk.bannerads.Banner>