I have a GLSurfaceView that I want to put inside a ScrollView. I accomplished this by adding a FrameLayout inside a LinearLayout which was added to the ScrollView.
Everyhing works nice, except that I am getting a black border on top of the GLSurfaceView when scrolling. When the screen is still, everyhing looks nice. Anybody have any ideas.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="900dp"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="35dp"
android:visibility="visible"
android:weightSum="1"
android:overScrollMode="never">
<FrameLayout
android:id="#+id/ecg_graph"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Generally speaking, you don't want to move SurfaceView (or its subclasses) around the screen. Bear in mind that SurfaceView has two parts, the Surface and the View. The View part -- usually just a transparent "hole" used during layout -- is handled by the app. The Surface part is a separate graphics layer composited by the system, and its size and position are managed by the Window Manager.
When you move a SurfaceView, the View part moves immediately, but the Surface lags behind, because moving it requires communicating with other processes. You should expect to see a black bar in the direction that the View is moving, because you've temporarily exposed an area outside what the Surface covers.
The preferred way to handle this is to use a TextureView, which behaves just like other Views. You would need to do your own EGL setup and thread management, since GLSurfaceView won't be handling those for you. You can find some examples in Grafika.
Related
I am looking for solution as on images bellow:
I need to have two resizable views in one layout.
User just needs to move separation line to the top (ScrolView B becames higher) or to the bottom (ScrolView A becames higher).
What is the best solution, which gives this behavior? I know that I can extends from ScrollView and override public boolean onTouchEvent(MotionEvent ev) and protected void onDraw(Canvas canvas), but may be there is more simple solution. I want to avoid calculation the math of moving. Thank you for any information.
If you want to solve this problem quickly, I suggest you use Split Pane Layout.
Usage :
<com.mobidevelop.spl.widget.SplitPaneLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:spl="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/splitPaneLayout"
android:layout_height="match_parent"
spl:splitterSize="12dp"
spl:orientation="vertical"
spl:splitterPosition="50%"
spl:splitterBackground="#781b23">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="" />
</ScrollView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text=""/>
</ScrollView>
</com.mobidevelop.spl.widget.SplitPaneLayout>
I solved your problem by creating two xmls for portrait and landscape mode. For portrait mode, i set the panel's orientation as vertical by adding spl:orientation="vertical" and for lanscape mode, i set the panel's orientation as horizontal by adding spl:orientation="horizontal".
After doing all this, I got the look like below.
Made this into an answer.
You basically want the split screen view from Android N. You could base your code off the open source implementation in SystemUI:
http://androidxref.com/7.1.1_r6/xref/frameworks/base/packages/SystemUI/src/com/android/systemui/stackdivider/DividerView.java
Along with this for the handle:
http://androidxref.com/7.1.1_r6/xref/frameworks/base/packages/SystemUI/src/com/android/systemui/stackdivider/DividerHandleView.java
You can throw away all code that has to do with stacks (which is the row of screenshots off different activities in your history), buss events and anything that has to do with running another activity, such as the code for Vsyncing between apps (mSurfaceFlingerOffsetMs).
It should leave you with quite small and easy to use classes.
I have a LinearLayout that contains a couple of views. It doesn't have to be LinearLayout-based - this is negotiable - but it provides this simple example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f00"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0"
android:orientation="horizontal"/>
</LinearLayout>
This is rendered as follows:
What I want to do is produce an animation sequence that slides out the yellow view, off the right of the screen, whilst simultaneously enlarging the red view to fill the space left behind.
It strikes me that there are a few ways to do this:
Weight-Based Animation
I can change the layout weight - specifically, iteratively reduce the yellow view's weight to zero. This will do the job as far as the red view is concerned. However if the yellow view has content in it, it will be squashed as it resizes down. It also doesn't run very smoothly.
This is almost acceptable in some contexts, because I can fade out the yellow view and its content to an alpha of zero, and then clear the empty space. Still not that smooth, but no squashing. However when I need the content to stay visible while moving, it ceases to be appropriate anyway.
Translation Animation
I can slide out the yellow view, a bit like this. However the vacated space is left behind, as you might expect. It does run perfectly smoothly.
A combination of the above?
I haven't tried this yet. I guess I could slide out the view whilst simultaneously reducing the weight of the empty space. I don't know if this is actually feasible, i.e. whether the weight change would affect the animated slide, or whether the two can be coherently run at once, or whether it will operate smoothly anyway.
Or, of course, something entirely different.
Any suggestions please?
I am working on a game application and in a horizontal orientation.
I use the left 1/3 of the screen for displaying scores and controls and the right 2/3 for displaying my game board.
My game works as is, but I currently use a single canvas to display everything. This makes my game logic more complicated because I must always add 1/3 of the screen width when displaying any graphics.
Seems like *I should be able to define 2 sections of the scree*n (left 1/3 and right 2/3), maybe using two canvases, such that each section provide me a unique coordinate system starting at 0,0. This would make my game coordinate math much easier.
Can I use multiple Canvases in one activity? Can I place them wherever I'd like?
Thanks
You can use fragments for dividing the screens.
Its better to use fragments or Fragment video tutorial, identify 3 fragments and in let in each fragment have a canvas
You can use weights in linear layout
which are used to divide the layout as desired ratio
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
Fragments
http://developer.android.com/reference/android/app/Fragment.html
use fragments for second layout
example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.33333"
android:background="#android:color/holo_blue_bright" >
</LinearLayout>
<LinearLayout
<--fragment here -->
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.6666"
android:background="#android:color/holo_green_dark" >
</LinearLayout>
</LinearLayout>
I have the following layout structure in my xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<MyEntireView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</MyEntireView>
<FrameLayout
android:id="#+id/focusedlayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<MyDetailedView
android:id="#+id/focus"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</MyDetailedView>
</FrameLayout>
</FrameLayout>
MyEntireView is a map (a Drawable) and MyDetailedView pops up on top of it upon onTouch() and contains only a certain piece of the whole map (also Drawable) that displays in greater detail the area which the user touched on the entire map in MyEntireView.
When MyDetailedView is shown - i.e. its setVisibility(View.VISIBLE) - there appear some transparent shapes (also some Bitmaps) on top and are redrawn regularly (e.g., 1 sec interval). The shapes are added dynamically as children of the #+id/focusedlayout as there is always a different number of them and their position is relevant to the detailed map picture.
And the problem is that each single update is processed multiple times. Each time a shape updates, then MyEntireView's onDraw() is called, MyDetailedView's onDraw() is called, and then these two are called again. And only after this the shape itself is invalidated.
As a result, this behaviour makes the shape flicker, since MyDetailedView redraws and hides the shape for 10ms or so.
I must probably be overlooking some simple logic, but I really can't get if there is a way to force only one View of a ViewGroup invalidate().
Or maybe there is an alternate structure/layout that I could use to fit my purpose?
Thanks a lot!
P.S.
The entire code is quite big to put here but I'm willing to insert any pieces upon request
Is it possible to have overlapping views in Android? I would like to have an ImageView with a transparent png in the front and another view in the background.
edit:
This is what I have at the moment, the problem is that the image in the imageView is not transparent, the parts that should be transparent are just black.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/gallerylayout"
>
<Gallery android:id="#+id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView android:id="#+id/navigmaske"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/navigmask"
/>
</RelativeLayout>
edit:
I got it to work, it was a theme file from another programmer on the team.
Just changed this
<item name="android:background">#FF000000</item>
to this
<item name="android:background">#00000000</item>
Android handles transparency across views and drawables (including PNG images) natively, so the scenario you describe (a partially transparent ImageView in front of a Gallery) is certainly possible.
If you're having problems it may be related to either the layout or your image. I've replicated the layout you describe and successfully achieved the effect you're after. Here's the exact layout I used.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallerylayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Gallery
android:id="#+id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<ImageView
android:id="#+id/navigmaske"
android:background="#0000"
android:src="#drawable/navigmask"
android:scaleType="fitXY"
android:layout_alignTop="#id/overview"
android:layout_alignBottom="#id/overview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
Note that I've changed the parent RelativeLayout to a height and width of fill_parent as is generally what you want for a main Activity. Then I've aligned the top and bottom of the ImageView to the top and bottom of the Gallery to ensure it's centered in front of it.
I've also explicitly set the background of the ImageView to be transparent.
As for the image drawable itself, if you put the PNG file somewhere for me to look at I can use it in my project and see if it's responsible.
Also, take a look at FrameLayout, that's how the Camera's Gallery application implements the Zoom buttons overlay.
If you want to add your custom Overlay screen on Layout, you can create a Custom Linear Layout and get control of drawing and key events. You can my tutorial- Overlay on Android Layout-
http://prasanta-paul.blogspot.com/2010/08/overlay-on-android-layout.html
The simples way arround is to put -40dp margin at the buttom of the top imageview
A visible gallery changes visibility which is how you get the gallery over other view overlaps. the Home sample app has some good examples of this technique.
Now with Jetpack Compose in android, you should use Box for overlapping views.
Example.
Box(modifier = Modifier.fillMaxWidth().fillMaxHeight()){
RecipesList(viewModel.recipes.value)
Snackbar()
}
Here RecipesList and Snackbar are composabes positioned one on top of the other in the composition order
Check out this for Jetpack Compose samples - https://androidlearnersite.wordpress.com/2021/08/03/jetpack-compose-1-0-0-sample-codes/
Yes, that is possible. The challenge, however, is to do their layout properly. The easiest way to do it would be to have an AbsoluteLayout and then put the two images where you want them to be. You don't need to do anything special for the transparent png except having it added later to the layout.