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.
Related
I'm trying to create a page that looks like the contribution page of GitHub (like each square represents a day, and the transparency of the square represents the number of commits). I want the page to look something like this:
So, I made a horizontal scroll view because I want the section of squares can be scrolled horizontally. And I tried to add the squares into the HSV. Here's the code:
<HorizontalScrollView
android:id="#+id/scrollView"
android:layout_width="0dp"
android:layout_height="295dp"
android:layout_marginTop="10dp"
android:layout_marginRight="60dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/time">
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="20dp" <!-- the problem -->
android:layout_height="35dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:background="#drawable/square" />
</HorizontalScrollView>
The problem is, I cannot set the layout_width of the image button, no matter what I change it to, the design always remain like this:
As you can see, the height is correct, but the width is fixed at a weird place. Is there anyway I can change it?
Any help would be appreciated.
You should use the layout inside of the HorizontalScrollView instead of adding the image button directly. For example LinearLayout or GridLayout
The point is that the scroll view can only have one child, because the scroll view extended FrameLayout
Quote from the documentation:
Layout container for a view hierarchy that can be scrolled by the user, allowing it to be larger than the physical display. A HorizontalScrollView is a FrameLayout, meaning you should place one child in it containing the entire contents to scroll; this child may itself be a layout manager with a complex hierarchy of objects. A child that is often used is a LinearLayout in a horizontal orientation, presenting a horizontal array of top-level items that the user can scroll through.
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
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>
I am trying to find a way to darken the entire screen except for a specific gridview item (in order to draw attention to this specific item).
I have been able to darken the whole screen by putting a black partially transperant view in front of the app content like this:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<GridView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/gridView"
android:numColumns="2"/>
<View
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#88000000" />
</FrameLayout>
Unfortunately I cannot come up with a way to make one gridview item not get darker. Can anyone help me out here?
Inflate the gridview position view in a custom dialog which maintains its x, y position on screen and 'darkens' the rest of the layout.
Could this also work? Set a background color to whatever you want and in getView return transparent image to all grid items except the one you want to display.
I have two images overlayed on top of another in a widget layout. The top image is supposed to rotate above the background image. Both are ImageViews. As you can see, the inside circle is too small (check xkcd.com/now to see what the layout should look like) . I tried resizing the file itself, which didn't change anything, I tried using mat.postScale, which only gave me an outOfMemory error. I'm using matrix.postRotate to rotate the inside circle. Since I'm using RemoteViews (it's a widget), I'm very limited in what I can do. So how can I resize the inside circle by 115%? (oh and I can't use fixed values because it has to change sizes if the widget is resized)
And here is the XML layout:
<ImageView
android:contentDescription = "#string/app_name"
android:id="#+id/imagef"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
<ImageView
android:contentDescription = "#string/app_name"
android:id="#+id/nowView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:layout_centerInParent="true"/>
Screenshot of what it looks like now: