We Keep Coding

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

How can I add two button (one is back, one is next) under scrollview that filled with textview and imageview in a screen, android?

I want to ask, can I add next and back button under scrollview that filled with textview and imageview in one screen, both with it's xml, java and screenshot result for android?
Here's the picture I intend to ask.
I got from here: https://sensortower.com/android/nl/softartstudio/app/selfishop-camera/com.selfishop.camera/
enter image description here
Where actually, what I really aim is a view like a blog (when you see an image on your above text that can be scrolled, where it's end with Back button that will go to previous page on the bottom left, and Next button that will go to the next page at the reverse side).
Really would like an example in xml, java, and it's screenshot result.
Again, thank you very much
Very appreciate your answer. Thank you

This is what XML is for.
Create your layout in xml and import it via java.
You will want to create your own "bar layout" for the bars in the center, though you could I suppose, fill 3 separate LinearLayouts to achieve the same effect, making a separate layout and putting in it here will be easier for you to read, and follow along with what is happening.
Below is a mock up of the xml layout you would be using to get a view very similar to what you have in your picture. I have not tested this, this was made on the fly so it may not be perfect but it will get you very close to what you are looking for.
<LinearLayout>
android:orientation="vertical"
android:weightSum=10
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout>
android:weight=1
android:layout_height=0dp
android:layout_width="match_parent">
<TextView>
android:width="wrap_content"
android:id="#+id/info_bar"
android:centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout>
android:weight=8
android:width="match_parent"
android:height=0dp>
<TextView>
android:id="#+id/text_view1"
android:width="match_parent"
android:height="wrap_content"/>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
<com.yourpackage.yourapp.createabarlayout>
</com.yourpackage.yourapp.createabarlayout>
</LinearLayout>
<RelativeLayout>
android:weight=1
android:layout_width="match_parent"
android:layout_height=0dp>
<Button>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/back_button"
android:text="#string/back_button_hint"/>
<TextView>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/steps_textview"
android:text="#string/steps_hint"
android:centerHorizontal="true"/>
<Button>
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/next_button"
android:text="#string/next_button_hint"/>
</RelativeLayout>
</LinearLayout>

Android Studio Layout Auto Alignment

I am new to Android Studio, and no matter what I do whenever I add something such as a textview or button to it, I cannot make it the size I want it to. It always auto aligns itself to the sides or top. When I want to make a square it doesn't allow me to do it. It never allows me to put my button or textview where I want it to. How do I make it so I can place my stuff anywhere I want and whatever size I choose it to be?

You are probably using linear layout,You can use relative layout instead for start, although if you want to put a lot of buttons its getting harder to work with relative layout and linear layout is more organized go to you'r xml and there edit the in the first line where it says <LinearLayout... to <RelativeLayout> and don't forget to do the same at closing,I recommend you to watch a video on youtube on how to work with linear layouts.

In RelativeLayout, it enable the attributes like alignParentRight="true/false" for exact right position and so on...
layout_below="#id/tool/viewID_below_you_want_to_put" and same for other side
so you can use it
For Example,
<RelativeLayout
...>
<TextView
android:id="#+id/txt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:layout_toRightOf="#id/txt1"
android:alignParentRight="true"
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
which will make your textview in left and then button in right of textview
If you want to set it in center tou can set gravity="center | center_vertical | center_horizontal"
also you can set size as you want in width or height like
android:layout_width="50dp"

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>

Android. How to make dialog buttons appear a bit outside the dialog

I need to have a dialog (it's a game dialog) where buttons are at the lower corners of the dialog. Not inside the dialog but rather on the very corners (i.e. part of the button will reside over the dialog and the part will be outside of it).

First, as far as I know you can't move layout children outside their parent.
I've never tried exactly what you're going for, but I think it can be done. The trick would be to go with an activity with a dialog theme (you can find examples of these on the developer site or the API demos). Make sure your layout's root node has width and height set to wrap_content. Your root layout should be a RelativeLayout and have NO background (android:background="#0000").
Next, add another layout to your root node (FrameLayout would probably work) with a custom drawable for a background (or use the one that the default dialog uses from the framework) and width and height set to fill_parent or match_parent. Set android:padding to some dip value which pulls the background in from the edge of the dialog.
The only thing left to do would be to add your other layout elements to the root node. The FrameLayout will be drawn beneath everything else, and the padding will create the illusion of borders which do not encompass your UI.
Update
Yikes, just tried the above with good and bad results. First, you'll definitely want to look at the "Custom Dialog" example from the API demo, which makes use of:
CustomDialogActivity.java
layout/custom_dialog_activity.xml
xml/styles.xml
drawable/filled_box
Create an activity which uses the above xml layout file, and set the style for the activity to Theme.CustomDialog that you defined in xml/styles.xml. This will get you a red background for your activity. You can then edit the filled_box shape file to just have one background attribute set to invisible ("#0000"). The result should be an dialog-shaped activity with no background.
Next I tried to hack a background using my thoughts from above. The idea should be that there's a phony background drawn behind the other UI elements which does not encompass them, so it could be "shrunk" using layout_margin and not affect them. The problem here is that the phony background needs to have width and height set to relative to the other UI elements, so it sort of HAS to encompass them, so it can properly measure its own width and height relative to them.
So I think the solution could be to do most of what I've said above, except don't try the phony background thing. Just use a 9-patch drawable for your root layout background, and shrink the edges of your background to be drawn farther in than your content. You'd still use the custom theme stuff from above with an invisible window theme.

Here is a sample layout which i tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:orientation="vertical"
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame">
</FrameLayout>
<Button android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:text="Button"></Button>
</RelativeLayout>
here is the screenshot:
hope u get the hint , goodluck