ImageView overlay not working - android

I have 2 layouts in my xml, a CircularImageView and a ImageView, and the ImageView must appear on top of the CircularImageView.
I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_kids_register_ll_kid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:orientation="horizontal">
<RelativeLayout
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_toRightOf="#+id/fragment_kids_row_img_kids"
android:layout_marginLeft="-26dp"
android:layout_marginTop="-22dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_kids_row_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/md_black_1000"
android:textSize="24sp" />
<TextView
android:id="#+id/fragment_kids_row_tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="1 ano e 4 meses"
android:textColor="#808080"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And it is getting cut off:
I need the image to be shown exactly at that position in the picture, but not "cropped", what I am missing here ?
BTW, this component is part of a RecyclerView row.
EDIT ---
I forgot to mention, the image is just a placeholder to show the Avatar, but the image is dinamically populated !
Thanks !

The padding (16dp) that you are applying to the first relativeLayout makes you think that there is more place and that you can move up the imageView. Actually the margin is like a gap, it doesn't extend your layout.
This is the solution I suggest , using a FrameLayout
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_gravity = "center"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"
android:layout_gravity="right|top" />
</FrameLayout>
EDIT : You don't have to use a frameLayout, you can use a relativeLayout if you want to set different margins. The point here is really to make your containing layout bigger so you can place the imageview easily.

If you want one image to be on top of another, why you use android:layout_toRightOf?
Remove it and second image should cover first one.
Also you can try to remove margins at second image and use centerInParent, centerVertically or centerHorizontally.
Or maybe I didn't got all the problem ) then pls provide more details. Thanks.

Have you tried Using an image editor like Paint/Photoshop and merging the two images? Then you can just display one image in your view.

try using a linear layout with the orientation set to vertical.

Related

Button on bottom of image with parameter adjustViewBounds Android studio

I need a button on bottom of an image with the parameter android:adjustViewBounds="true".
This is what I'm looking for:
But this is what I'm getting:
This is the code I'm using:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true" //i really need this parameter because the height of each image is different
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="See more"/>
</RelativeLayout>
If you want your ImageView and Button to be overlapping, they either need to reference each other, or have the same layout alignment.
In this example, aligning your Button to the bottom of your ImageView will resolve this.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/idImg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/homero" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/idImg"
android:text="See more"/>
</RelativeLayout>
The way you currently have it, your button is trying to get to the bottom of your RelativeLayout. Because your RelativeLayout has a height of wrap_content, it just keeps growing as the button tries to get to the bottom, eventually filling the screen!

I want to put image over button

I want to put png image over button i tried android:background but the png takes all the button what i want exactly is to use the logo png over button like this
the info logo is my png and "about" comes from the button text
u can use this:
android:drawableTop="#drawable/SomeIcon"
so then you get this:
<Button
android:id="#+id/damage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="about"
android:drawableTop="#android:drawable/ic_menu_info_details"/>
it works for me :)
You can use a FrameLayout. In a FrameLayout, the z-index is defined by the order in which the items are added, for example
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_text" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable"
android:scaleType="fitCenter"/>
</FrameLayout>
In this instance, the ImageView would be drawn on top of the Button, along the bottom center of the Button.
You can check this thread
Basically, you can use:
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/album_icon"
android:background="#drawable/round_button" />
As the thread says.
Take a RelativeLayout, place ImageView inside it. Now set onClickListener on RelativeLayout.
By this way you can create more complex buttons.
<RelativeLayout android:id="#+id/your_btn_id"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
</RelativeLayout>
you can use
android:drawableTop
to put drawable at top of Button and use appropriate padding to make it position well.
<Buttton
android:layout_width="99dp"
android:layout_height="99dp"
android:background = "#drawable/bg" />
bg is your custom image.

Android FrameLayout makes "invisible" margins

I have a FrameLayout and I want to have as much small as possible. But that layout gives me some invisible margins from top and bottom. That's how it looks:
And should look:
My FrameLayout looks like that:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/ivPress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:background="#drawable/custom" />
<com.devadvance.circularseekbar.CircularSeekBar
android:id="#+id/circularSeekBar1"
app:circle_x_radius="147"
app:circle_y_radius="147"
app:use_custom_radii="true"
app:max="100"
app:pointer_alpha_ontouch="100"
app:pointer_color="#ffffff"
app:pointer_halo_color="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tvResult"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center"
android:text="Tap!"
android:textColor="#FFFFFF"
android:textSize="50dp" />
</FrameLayout>
Let me confirm my understanding is correct.
Blue gradation image is set to ImageView(ivPress).
CircularSeekBar class decides where draws circle.
If my understanding is true, FrameLayout has no magins. ImageView(ivPress) can be shown without margins.
So, the issue you should solve is that there are margins in top and bottom of circle, right? I don't know how you implement CircularSeekBar class but some problem is in it.

Android TextView Overflow

I am creating sort of an image gallery (with view flipper) wherein each view of viewflipper has an imageview and two textviews below it. What I want is to adjust the width of these textviews accoring to the imageviews width. These imageview and text are added dynamically to viewflipper so cannot adjust width in xml. Also the width of images is different everytime( some portrait, some landscape). Googleing did not help. So here is what I want. Any help would be appreciated.
Try like this, it may help you
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="your image" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignRight="#+id/imageView"
android:layout_below="#+id/imageView"
android:layout_marginTop="16dp"
android:text="I am creating sort of an image gallery (with view flipper) wherein each view of viewflipper has an imageview and two textviews below it. " />
</RelativeLayout>
Try This
tv.setMaxLines(2);
tv.setEllipsize(TextUtils.TruncateAt.END);
More Documentation : http://developer.android.com/reference/android/widget/TextView.html#attr_android:ellipsize

Bring an ImageView in front of another?

Is there anyway to bring an ImageView in front of another in android . For example , i have a big image and how i put a small one in the top left of the big ones. Something like the small one will overlap the bigs one . thanks for helping
Wrap the images in a RelativeLayout. Place the image you want on top last in the xml, like so:
<RelativeLayout
...>
<ImageView
android:background="#drawable/backgroundimage"
... />
<ImageView
android:background="#drawable/foreground"
... />
</RelativeLayout>
Use framelayout as your root layout and then place your big image and then your small image
like this
<framelayout
......
......
......>
<ImageView
// your big image
......
.....
.....>
</ImageView>
<ImageView
// your Small image
......
.....
.....>
</ImageView>
</framelayout>
For me frameLayout is best choose ,
Than you will need just to call this line
ImageViewSmall.bringToFront();
no need even for this line , just create from code imageViews first big after small. position x y also with :
ImageViewSmall.setX( float X );
ImageViewSmall.setY( float X );
I used this to create a video "play" overlay over a thumbnail as suggested by Randy.
Here's some slightly more complete code which also makes sure the images are centered in the parent
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/ivBackground"
android:scaleType="fitCenter"
android:layout_centerInParent="true"
android:src="#drawable/downloadplaceholder"/>
<ImageView
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:id="#+id/ivPlayOverlay"
android:src="#drawable/play_button_overlay"/>
</RelativeLayout>
You can use RelativeLayout; you can test this code, I test it and it works fine:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/a_t1"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginLeft="10dp"
android:background="#000000" />
<ImageView
android:id="#+id/a_t2"
android:layout_width="34dp"
android:layout_height="34dp"
android:layout_gravity="top|left"
android:background="#c12fff" />
I have tried to do a similar thing with an edit text in front of a linear layout, I found that just placing the XML for the edit text after the XML for the linear layout brought it on top when the app was run. Hope this helps.

Categories

Resources