Is there any possible way to put Items inside of ImageView in Android

Question

I'm working on an App, it has two ImageView one of them is for background which load the image with Blur effect with Picasso, and the second one shows the Poster in normal shape, I wanna know how I can put some content such as textView on the layer below which is my Blurry Image?

Here's a picture of my Layout and the Codes:

I wanna put those IMDB, Watched and Want TextViews with their count on the second ImageView which is Blur right now, How Can I Do That?

<RelativeLayout
            android:id="@+id/pallet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@color/transparent"
            android:transitionName="profile">

            <ImageView
                android:id="@+id/blur"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="centerInside"
                android:transitionName="profile">
            </ImageView>


            <android.support.v7.widget.CardView
                android:id="@+id/cardView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="20dp"
                android:elevation="0dp"
                app:cardCornerRadius="10dp"
                android:transitionName="profile">

                <ImageView
                    android:id="@+id/posterImage"
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:scaleType="fitXY"
                    android:transitionName="profile"
                    android:layout_gravity="center"/>

                <ImageButton
                    android:id="@+id/playTrailer"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_alignParentBottom="true"
                    android:layout_alignParentRight="true"
                    android:baselineAlignBottom="true"
                    android:layout_gravity="bottom|end"
                    android:layout_marginRight="35dp"
                    android:layout_marginBottom="35dp"
                    android:background="@drawable/play_circle"
                    android:elevation="10dp"
                    android:scaleType="fitCenter"/>

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

        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/cardView"
            android:background="@color/transparent">

            <TextView
                android:id="@+id/movieTitle"
                style="@style/movieTitleFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:textAlignment="center"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="22dp"
                android:textStyle="bold" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp">

            <TextView
                android:id="@+id/watchNum"
                style="@style/movieTitleFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="25dp"
                android:text="341"
                android:textAlignment="viewStart"
                android:textSize="26dp" />

            <TextView
                android:id="@+id/wantNum"
                style="@style/movieTitleFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="880"
                android:textAlignment="center"
                android:textSize="26dp" />

            <TextView
                android:id="@+id/imdbNum"
                style="@style/movieTitleFont"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="25dp"
                android:textAlignment="viewEnd"
                android:textSize="26dp" />
        </RelativeLayout>


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp">

            <TextView
                android:id="@+id/watchNumtxt"
                style="@style/subText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:text="Watched"
                android:textAlignment="viewStart"
                android:textColor="@color/cardview_dark_background"
                android:textSize="18dp" />

            <TextView
                android:id="@+id/wantNumtxt"
                style="@style/subText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:text="Want"
                android:textAlignment="center"
                android:textSize="18dp" />

            <TextView
                android:id="@+id/imdbNumtxt"
                style="@style/subText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="20dp"
                android:text="IMDB"
                android:textAlignment="viewEnd"
                android:textColor="@color/cardview_dark_background"
                android:textSize="18dp" />
        </RelativeLayout>

and also is there anyway that I can give Radius to that below blurry image to show the corner in White? its now white just because the poster is white in the bottom, can I do it with picasso?

You can superpose both elements for example with a `ConstraintLayout`. One can `match_parent` and the other positioned at the bottom. Not tested but should work with that logic. :-) — Joachim Huet, Nov 10 '17 at 08:59
In fact with `RelativeLayout` it's even simpler [see this](https://stackoverflow.com/questions/23564824/superpose-many-image-view-on-an-imageview-in-a-customview). Last element will simply be over all previous, so you insert your image view and all text views in the same `RelativeLayout` — Joachim Huet, Nov 10 '17 at 09:04
why you are using imageview blur? Can't u directly set blur as a background for xml? — Murat Güç, Nov 10 '17 at 09:14
no I wanna load the poster image in Blur for the background, Blur item is the exact poster of every post and the only difference is it will load with Blur effect for the background @MuratGuc — Arash Afsharpour, Nov 10 '17 at 09:19

score 0 · Answer 1 · answered Nov 10 '17 at 09:33

Okay try something like this, I simplified just for lisibility, you should just get the logic and then place your items correctly.

Your problem for now is that you have a Layout superposing the blur and the CardView but then you have another one for the Informations. You should either put them all in the same Relative Layout in order to allow superposition or create subelements.

<RelativeLayout> <!-- Contains background (blur + infos) and CardView -->
    <RelativeLayout> <!-- Contains blur image and text informations (Not even necessarily needed depends on you) -->
        <ImageView
            android:id="@+id/blur" />

        <YourInformationsView/>
    </RelativeLayout>

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

</RelativeLayout>

There already are a lot of questions of this type on SO : This or this one for example. Try looking into thoses too.

score 0 · Accepted Answer · edited Nov 10 '17 at 10:03

Why not just add your imageView and your textView inside a frameLayout and give the frameLayout background according to your imageView's image.

<RelativeLayout>
    <FrameLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <ImageView android:id="@+id/blur" .../>

        <TextView ... />
    </FrameLayout>

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

</RelativeLayout>

score 0 · Answer 3 · answered Nov 10 '17 at 09:52

Don't think about how to add something to your ImageView, think about how to add something above your ImageView at the place you need it to be.

<ImageView
   android:id="@+id/blur"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:adjustViewBounds="true"
   android:scaleType="centerInside"
   android:transitionName="profile">
</ImageView>

becomes something along the lines of

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

    <ImageView
      android:layout_alignParentTop="true"
      ...your ImageView/>

   <View
      this is your blurred view
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      do something to blur this />

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       >

       your textviews...

   </RelativeLayout>

Of course the top RelativeLayout can't be wrap_content for height anymore if you put a match_parent into it, but your Image doesn't look like that. It even looks like the blurred layer above above the ImageView but below the text. It doesn't look like its the ImageView thats blurred, but rather like theres a blurred layer above it.

Is there any possible way to put Items inside of ImageView in Android

3 Answers3