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.

Making a background image move in Android

I am working on a simple project and i wanted to know what or how is the best way to make your background image appear moving or move , i have this clouds that i want to move infinitely ? any help will be appreciated.

A <FrameLayout ...> (in the layout xml) draws its children one on top of another.
So
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
< the background view />
< the informative view />
</FrameLayout>
should do the trick. But please mind that a moving background can waste such resources as CPU load and battery.
UPDATE (moving: as any other view)
To make a view move, you can either use an animation or change the view position programmatically. I did the latter in response to a touch, you probably will choose the former. There is a lot about animations on SO.
I would try to take the background image 2 times wider than the screen, set the left coordinate to a negative value, and animate changing this value to 0 (the image would move right, at least so it was in iOS).
Note 1.
To position a view inside an either LinearLayout or RelativeLayout you can use auxiliary transparent views.
For example, the layout below splits the screen in 5 areas:
11111111111
222 333
44444444444
and places an image in the corner to the right of "2" and above "4":
<RelativeLayout
android:id="#+id/sight"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<View
android:id="#+id/sightq1"
android:layout_width="fill_parent"
android:layout_height="80px"
android:layout_alignParentTop="true"
/>
<View
android:id="#+id/sightq4"
android:layout_width="fill_parent"
android:layout_height="80px"
android:layout_alignParentBottom="true"
/>
<View
android:id="#+id/sightq2"
android:layout_width="80px"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_above="#id/sightq4"
android:layout_below="#id/sightq1"
/>
<View
android:id="#+id/sightq3"
android:layout_width="80px"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_above="#id/sightq4"
android:layout_below="#id/sightq1"
/>
<!-- example: -->
<ImageView
android:id="#+id/..."
android:layout_toRightOf="#id/sightq2"
android:layout_alignTop="#id/sightq4"
android:src="#drawable/..."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</RelativeLayout>
Having said that, I have to note that probably you will not need auxiliary views, just positioning will do.
Note 2.
To get the actual view width/height of a view, you must use a ViewTreeObserver.OnGlobalLayoutListener and call v.getMeasuredWidth() and v.getMeasuredHeight() from onGlobalLayout(). These width and height are known only after layout happens.
v.getViewTreeObserver().addOnGlobalLayoutListener(mLayoutListener); to register a listener.

Android GridView columnWidth to make my GridView take up the entire screen width

I have a GridView which displays the user's photos. What I want to find is the exact columnWidth I have to specify so that the number of columns will vary from device to device, but always take up the entire screen (like QuickPic does). Right now my code is as follows:
//GridView inside Fragment layout file
<GridView
android:id="#+id/gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="90dp"
android:horizontalSpacing="2.75dp"
android:verticalSpacing="2.75dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth" />
//GridView row
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/ivPhoto"
android:layout_width="90dp"
android:layout_height="90dp"
android:scaleType="fitCenter" />
</RelativeLayout>
With my code, I get a lot of whitespace I don't want. I want it to have whitespace, but very little. I want the Grid to fill the entire screen with columns (photos), but leaving some little whitespace between them.
What would the perfect columnWidth be?
Thank you.

Making the Gridview adapt to different screen sizes is a little tricky using xml. A good solution is to adjust the size of the gridviews in your adapter's getView() method.
check out this example.
Adjust GridView to all Screen Sizes

Removing all other areas except selected areas in mapview

Suppose I have made a diagram e.g a circle on android mapView. Now I want to remove/blackout/hide all other maps except that portion. I can zoom in out that portion too
Is this possible?
Best Regards

I have a similar problem of make map view inside certain area.not sure it will help you or not but you can try it.
What you should do is take image of circle(Background is Transparent) and put your image as background in Linear layout. and inside that LinearLayout you can put map view.
your xml will Look like below.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/Circle_back" >
<com.google.android.maps.MapView
android:id="#+id/whereami_mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="YOUR API KEY"
android:clickable="true" />
</LinearLayout>
</LinearLayout>
i have to view it inside rectangle box. below is the similar screen shot you will get while running. you d'nt need to hide rest of the part of Map.
hope it will help some how what are you looking for.

Make a trick
Zoom will work in your case. Set zoom level and
Use android:clickable="false" in your layout file.
;)

How can I get a ListView and TextView to scroll as one unit when content is taller than the screen height?

I have a main menu screen with a simple ListView that contains "links" to further screens in my app (Browse, Bookmarks, Settings, About, etc.). Underneath the ListView there is a TextView (more accurately, a TextSwitcher that rotates TextViews) that changes every 10 seconds to display a new "tip".
In portrait mode, this works fine. There are my five list items in the ListView , and my tip label underneath. However, when I switch to landscape mode, the ListView is taller than the screen. The ListView scrolls normally, but I cannot scroll past the end of the ListView to see the TextView underneath.
I have tried every possible combination of Layouts, wrappers, ScrollViews, and layout_height parameters and I simply cannot get it to behave.
Here is the simplest code I can use to get the result pictured above:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:orientation="vertical"
android:layout_height="fill_parent">
<LinearLayout android:id="#+id/ListLayout"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ListView android:id="#id/android:list" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1">
</ListView>
</LinearLayout>
<LinearLayout android:id="#+id/TipLayout"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_below="#+id/ListLayout">
<TextSwitcher android:layout_width="wrap_content"
android:layout_height="wrap_content" android:id="#+id/TipSwitcher">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:textSize="7pt"
android:id="#+id/Tip1TextView" android:text="Tip: Hello, Android!"></TextView>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tip: This is the second TextView in the TipSwitcher!"
android:id="#+id/Tip2TextView" android:textSize="7pt"></TextView>
</TextSwitcher>
</LinearLayout>
</RelativeLayout>
Like I've said, I've already tried so many different combinations that I can't list them, and for the most part I was randomly inserting XML in an attempt to get something to work the way I wanted. So I'd greatly appreciate suggestions as to how I would go about doing this the right way.
Thanks.
EDIT: Something I forgot to mention, this may or may not be relevant. My MainMenuActivity is extending ListActivity. According to the docs, "ListActivity has a default layout that consists of a single, full-screen list in the center of the screen." But, "If you desire, you can customize the screen layout by setting your own view layout with setContentView() in onCreate()." So I don't think the ListActivity is interfering.

Put the TextSwitcher in the ListView itself. You can use addFooterView() for this.