How to put views on top of an ImageView, in relation to the ImageView's content size?

Question

Background

Suppose I want to show an image of the something using an ImageView, and I want to put new views on top of it (animated ImageViews that show pins on a world map image, for example, or a Switch view on top of a smartphone image).

This means that no matter how the ImageView shows the image, the views should be in it, inside correct spot, with the same size as specified, or in a size related to the imageView itself

The problem

As opposed to other views, the ImageView can have a certain size, but its content is something else (to keep aspect ratio).

What I tried

I tried to use ConstraintLayout, but this can't really help, because the ImageView can change its size (for example when changing orientation), and thus ruining the position I've given the views compared to the ImageView.

I've found some libraries that can handle a similar thing (like here) and I even asked a similar question before (here), but all those solutions are for a static image within the ImageView, yet what I search for is adding a view on top of an ImageView.

The question

How do I put the views on top of the ImageView's content correctly?

How do I also scale the views down/up compared to the size of the ImageView's content ?

Can ConstraintLayout be used to change the scale of the views according to the ImageView's size ?

Answer 1

Make FrameLayout with wrap_content around ImageView. Then you could set SwitchView on top of ImageView. You could align it to center, side or corners and using margins to get some fine position.

It still won't scale with image, but you can get pretty good results. If that doesn't fit you, you can programatically get width/height of ImageView and alter position (or margins) of SwitchView accordingly.

Answer 2

With below you can manage width of switch or any other view as per image view width

android:layout_alignLeft="@+id/imageView"
android:layout_alignRight="@+id/imageView"

<Switch
    android:id="@+id/swi"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView"
    android:layout_alignRight="@+id/imageView" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/swi"
    android:src="@drawable/download" />

Answer 3

As far as i get it, you need the image size displayed inside the image view and set that as the max width of your switch view right?

You need both Java and XML for this,

The XML file is basically as RelativeLayout with the view stacked as needed.

   <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:src="@drawable/nonet_icon"
            android:id="@+id/iconView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <android.support.v7.widget.SwitchCompat
            android:layout_width="wrap_content"
            android:visibility="gone"
            android:layout_centerInParent="true"
            android:layout_height="wrap_content"
            android:id="@+id/switchView"/>
    </RelativeLayout>

And the Java Code gets the imageWidth and sets it to the SwitchView.

        mSwitchCompat.setVisibility(View.VISIBLE);
//        20% x 25% of Content in ImageView
        final float x = mImageView.getDrawable().getIntrinsicWidth()*.2f;
        final float y = mImageView.getDrawable().getIntrinsicHeight()*.25f;
//        waiting for the view to be drawn
        mSwitchCompat.post(new Runnable() {
            @Override
            public void run() {
//        scale current view W.r.t. x and y values 
             mSwitchCompat.setScaleX((float)mSwitchCompat.getWidth()/x);
                mSwitchCompat.setScaleY((float)mSwitchCompat.getHeight()/y);
            }
        });
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                WindowManager.LayoutParams.WRAP_CONTENT);
//        30% x 35% of content, for location
        int xMargin  = Math.round(mImageView.getDrawable().getIntrinsicWidth()*.3f);
        int yMargin = Math.round(mImageView.getDrawable().getIntrinsicHeight()*.35f);
//      set margin values, can optionally add for top and bottom
        layoutParams.setMargins(xMargin,0,yMargin,0);
        mSwitchCompat.setLayoutParams(layoutParams);

Ref: Getting Displayed image size of an ImageView Trying to get the display size of an image in an ImageView

Ref: Dynamic size values

Do comment if you need a detailed explaination.

Example: Check this image!

Scaled View on Image: Scaled View on Image!

Answer 4

In Java,

        ImageView imgView = (ImageView) findViewById(R.id.imageView);
        imageView.setBackgroundResource(R.drawable.yourDrawable);
        int width = imgView.getDrawable().getIntrinsicWidth();

        Switch switchKey = (Switch) findViewById(R.id.switchKey);
        switchKey.setMinimumWidth(width);

And in XML, align it with alignLeft and alignRight with ImageView.

Answer 5

You can use MarginLayoutParams with Relative Layout to set left and top position in ImageView.

    image = (ImageView) findViewById(R.id.imageID);
    MarginLayoutParams marginParams = new MarginLayoutParams(image.getLayoutParams());
    marginParams.setMargins(left_margin, top_margin, right_margin, bottom_margin);
    RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(marginParams);
    image.setLayoutParams(layoutParams);

find complete information for this in below link :

MarginLayoutParams

Answer 6

Try this, may be it will help you.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/img_background"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/semi_transparent"
        android:layout_margin="@dimen/spacing_small"
        android:layout_alignTop="@+id/img_background"
        android:layout_alignBottom="@id/img_background">

        //this layout will expand according to your image size

    </RelativeLayout>

</RelativeLayout>

Answer 7

Do you want to show switch that lay on imageview ?

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_download"
    android:layout_width="100dp"
    android:layout_height="60dp"
    android:layout_centerInParent="true"
    android:orientation="vertical">

    <ImageView
        android:src="@android:drawable/btn_star_big_on"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <Switch
        android:id="@+id/mySwitch"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Switch" />
</RelativeLayout>