Search code examples
androidpicasso

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


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:

enter image description here

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?


Solution

  • 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>