We Keep Coding

Drawing outside of the view bounds, over multiple parent ViewGroups

I appreciate the title is not very well written but its a little difficult to explain my issue succinctly...
I'm creating an Android app and I've got a custom chart view that has a little popup that should be able go outside the bounds of the chart view itself and will position itself based on where you select on the line chart.
I'm having trouble getting this to work when I have more than 1 parent view group in the hierarchy. This is my layout xml:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:clipToPadding="false">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clipChildren="false"
android:clipToPadding="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.myapp.ui.views.chart.line.LineChartView
android:id="#+id/lineChartView"
android:layout_width="match_parent"
android:layout_height="228dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
if I remove the CardView so there is just the ConstraintLayout as the parent, it works. If I make the CardView bigger in the Y direction it allows enough space to draw the popup on the extra card space. But as it like this, it doesnt work.
It's kind of like it only allows you to draw up the hierarchy once onto the parent but not again onto the grandparent view.
How do I allow it to draw over the top of any and all parent views so its like a true "popup"?
Hope that makes sense

Simple answer: You can't draw outside the view's bounds.
<RelativeLayout>
<RelativeLayout
android:width="400dp"
android:height="400dp">
<LineChartView
android:width="100dp"
android:height="100dp"/>
<RelativeLayout>
</RelativeLayout>
In the above case, if you check the Canvas size in LineChartView's onDraw(canvas), you will find the height and width are 100dp. And that is the size of your View. So you can draw only within that space. The parent of your View doesn't really have any impact, unless you set your View's width/height as a dynamic value like MatchParent or WrapContent. If you do MatchParent on your View, then the width/height of the Canvas becomes 400dp.
In essence, the size of the Canvas determines what space is available to draw and what is visible on screen. To solve your use case, you could make you LineChartView fill the entire screen. But with this approach, you will have to keep track of where to draw the actual graph. If the screen is scrollable, then it will add more complexity.
The other approach, which I think is the easy one, is to have two views (One for the LineChart, and the other for the PopUp). The LineChartView will draw the actual graph, and the PopUp view will cover the entire screen. When the user selects something in the graph, you just need to pass the Graph's values along with the Absolute position on where to draw the popUp to the PopUpView. This way you can draw the popUp anywhere on the screen.

Zoomable FrameLayout got absolute width and height but Views in it do not match these dimensions

Okey, so hello everyone.
I am pretty new to app developing.
Introduction:
In my app I have activity with RelativeLayout. In this layout I have zoomable FrameLayout. In this layout I have to have only one layout. In my case It is another RelativeLayout. Finally in this layout I have number of ImageViews. Purpose of this activity is show layers of map (drawables) via switches.
Code here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorDarkBlueGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.example.cotwcompanion.ZoomableView
android:id="#+id/zoomView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</RelativeLayout>
</com.example.cotwcompanion.ZoomableView>
<!-- Here are other layouts -->
</RelativeLayout>
Problem:
My problem is more or less visual. I would like to show these layers (1:1 ratio) as big as display allows (vertically). Therefor I need to overlap display's width.
What I need It to look like:
IMAGE
What I have tried:
I thought FrameLayout would do it. So I tried to set its width
and height programmatically, so It fits screen height and has
the same width, because of 1:1 ratio mentioned before. If I try to log these dimensions, it seems like all is set. Because
of match_parent attribute in ImageViews and their parent RelativeLayout, It should therefor do everything else and stretch these Views to fill FrameLayout. But everything just
only fits screen width.
Image of result here:
IMAGE
Code here:
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(height, height);
FrameLayout frame = findViewById(R.id.zoomView);
frame.setLayoutParams(lp);
I tried the same method with normal FrameLayout but got same
result.
I also tried to exchange FrameLayout with
HorizontalScrollView and custom zoomable ImageView. This worked more or less well, but problem was when I zoomed the map.
Horizontal scroll disrupt every movement with zoomed map. Therefor I
tried to create custom HorizontalScrollView with methods to
disable scroll. Even when I catched zoomed state from ImageView
and set scroll to notEnabled, It still did not work.
And there you go. Like I said zooming methods and everything other works. I just need to somehow have bigger View than display allows.
EDIT [21.11.2020]:
So as Daxi suggested I tried to change RelativeLayout in ZoomableLayout to ConstraintLayout. I also changed ZoomableLayout to extend from ConstraintLayout. That almost solved my problem. However I could not scroll to left and right. I could only zoom. So I took one of my last tried solution and wrapped ZoomableView with HorizontalScrollView. Everything seemed okey. However I now just cannot scroll to the very 'start' or 'end' of the ImageView. It seems like I can only scroll within the base width of HorizontalScrollView and not width of ImageView. So I now need to solve this problem.
Code here:
<RelativeLayout>
<HorizontalScrollView>
<ZoomableView extends ConstraintLayout>
<ConstraintLayout>
<ImageView/>
.
.
</ConstraintLayout>
</ZoomableView>
</HorizontalScrollView>
.
.
</RelativeLayout>
I am so sorry if this is somehow a duplicate of other problem already described on stackoverflow, but I searched for solution over two days now and still did not find any. Maybe I am bad finder. If this will be the case, feel free to tell me. I will delete it if needed.
If there will be some pretty fine answer and solution I would really appreciate It. Thank you.

Would you consider using ConstraintLayouts? If yes, you could use it like this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</androidx.constraintlayout.widget.ConstraintLayout>
However, I am not sure how exactly this will interact with your ZoomableView

Which layout in android studio to use for placing precisely clip arts

I have a viewpager that recreate parallax effect using ViewPager.PageTransformer()
I have a clip art made of several pieces (clouds, tree etc...) that i have to place very precisely on a layout of one of my fragment, so can animate them later independently , but i'm unable to place any item precisely. On a relative layout, it seems that each time i move one items with the mouse, it goes either right , left, or top etc.., i want to be able to place them pixels by pixels, a bit like a puzzle
Is there any any layout (mspaint style) i could use that would let me place freely my item using my mouse for example, without having to obey any rules of placement ?
Thanks a lot

I have been able to use RelativeLayout in Android Studio to place items precisely. The images to tend to "snap" along grid lines when close, but I think that with careful mouse movement you can make it work. This will be very dependent upon the screen size and will not scale up/down well since it is using margins, but it may be what you need.
Here is the layout I tested with in Android Stdio 2.1. I hope this helps.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="219dp"
android:layout_height="219dp"
android:background="#00FF00"
android:layout_marginRight="26dp"
android:layout_marginEnd="26dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="58dp" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="219dp"
android:layout_height="219dp"
android:background="#FF0000"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="53dp"
android:layout_marginStart="53dp" />
</RelativeLayout>

How to disable stretching of image in ImageView?

There are some ImageView and image for this view. ImageView is 100px/100px, but image is 50px/50px. I wouldn't like the image fills full space in ImageView, i.e. I want that the ImageView contains my image in center of ImageView without stretching. How can I do it?
UPDATE:
Sorry, I've made a mistake. My ImageView is 50px/50px, and my image is 100px/100px. What do you think about it?

Add to your ImageView:
android:scaleType="center"
Note that in the Android Studio xml layout preview if you use the android:background="#drawable/my_image" you will still see your image streached (In run time it won't streach).
But if you still want to see your ImageView background (not streached) also in the IDE preview use android:src="#drawable/my_image" instead of background property.
(in any case the scaleType should be center)

You need to set the android:scaleType attribute on your image view. If the image is bigger than your view, either use centerInside or one of the fitXY, fitStart, fitEnd options.
You have all the info you need on the Android developer documentation for the ImageView class.

set the android:scaleType with proper value, you can give centerCrop.
e.g. android:scaleType="centerCrop"

In ImageView we have a property called scaleType that is shown below in the code.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button2"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="94dp"
android:scaleType="center"
android:src="#drawable/ic_launcher" />
It will not scale your image.

Android: how to set background image in table layout

Im using tablelayout to display items from sqlite db.
I set a backgrpund image for table layout,
but the image appears below the texts I need to display the image back to the texts, not below,ie, I need the image frame as 0,0
What I have to do .
Now I used
.setbackgroundresources(r.drawable.imagename)
Please guide me I have to add background image for table layout programmatically

If you're setting the background resource for a layout and the image appears below the layout itself (ie. below all the components), you're probably not adding the background resource to the correct layout.
But since you're not really giving much info, that might not even be the case.
Could it be that your image is actually much smaller than the table itself and instead of expanding to the size of the table, could it be staying at its fixed size (which would probably be centered in the layout)?
Try setting the background of the table to a fixed color (ie. view.setBackgroundColor(Color.BLACK);) to test that out. If the entire table fills as you expected, then it's probably related to the image you're using.
If the color fills only the same area the image resource did before, then it's probably my first thought where you're not adding the resource to the proper layout.

then try to put one outer layout linear layout of table layout , in your .xml file and then set the background of that linear layout like
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bkg1">
<TableLayout
android:id="#+id/linearLayout1_tblLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/linearLayout1_tblLayout1_tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
......
</TableRow>
</TableLayout>
</LinearLayout>