Develop Reference

Black box in screen after pressing Android menu button

I am creating a library class in Android Studio for my internship. I have created a custom RelativeLayout that inflates the layout shown below.
I can't find this issue anywhere, so I hope someone is able to help me out.
I have a layout file that looks like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/videoFrame"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#color/wallet_holo_blue_light">
<VideoView
android:id="#+id/videoBackground"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#null"/>
</FrameLayout>
</RelativeLayout>
I do need the FrameLayout, to be able to scale the VideoView where the VideoView's width is bigger then the parent this Layout is inflated into. I resize this VideoView dynamically on runtime-level, but that all works fine.
When I start the activity with this VideoView, everything is fine.
Whenever I hit the Android "Windows"-button and return to the Activity, a black box appears.
Screenshots
It also happens in Portrait mode. Then the black box is even bigger than half the screen.
After changing screenOrientation, so rotating my tablet, for example, the black box is gone again.
I really have no clue, does anyone know what the problem might be?

Android Studio - change background image size

So, i wanted to put an image in background of my screen. My problem is that if i just add the image to "background" it will fill all the screen, and my image gets defaced. I could put as an ImageView, but the problem is that i have an expandableListView in the same screen, and i wanted the image to stay behind, as a background.
Any idea how to do this?
Can have 2 solutions: Put as an imagemView but behind the list. Or add as a background but resize it. How can i do it?
Here is what happened:
He is what happens if i put the image as an imageView:

Yes this is very easy to achieve with relative layouts
<RelativeLayout ... >
<ImageView ...
android:layout_alignParentTop="true"
android:scaleType="centerCrop“ />
<ListView ...
android:layout_alignParentTop="true“ />
</RelativeLayout>
With a relative layout z-index is decided by the order you declare the tags, so stuff towards the bottom of the xml is in front of stuff from closer to the top, when they are in the same position.

Use a FrameLayout (Inside FrameLayout view written on top will appear on top and so on)
<FrameLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
></ListView>
<ImageView
android:layout_width="your_width_in_dp"
android:layout_height="your_height_in_dp"
/>
</FrameLayout>
You can also place FrameLayout inside another layout.

Designing a complex android UI with animation

I've to design a UI for an Android app where i've 10 vertical tiles containing image and text(the 2 big boxes in the picture) and on clicking a tile, it disappears and is replaced by scrollable gridview containing 6 elements(shown in the centre of figure below) on the same page. (shown by an animation)
Here is a snapshot of the view I'm trying to explain. This images shows only 2 out of 10 tiles and a gridview which appears on click Each of the white box contains image and text. I'm not good at designing, so a detailed answer of implementing this would be appreciated. Thanks.

There is not much details in your question, even the picture does not clarify everything, but here is a stab at it.
Not sure what you mean when you say the tiles "expand" further, do you expect to see the six tiles in the middle to appear at that time or are they always there? if they appear, would that be animated?
To achieve the picture you have, you should probably get a RelativeLayout at the top level.
That's just because you have this date TextView on the top right and the handle to a SlidingDrawer at the bottom. You can set the background of that RelativeLayout with your wallpaper theme and I guess the blue bar on top if that's static.
Then inside this top-leve RelativeLayout you have a LinearLayout with an horizontal orientation. This one will contain the three "windows" on your picture.
In that horizontal LinearLayout, first you have another LinearLayout with a vertical orientation, then a ViewPager and then another vertical LinearLayout similar to the first one (not sure how the right part is different from the left one or that is supposed to be a complete mirror... ?).
So in summary:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/top_level"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:id="#+id/date_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingTop="..." // fill in some space to offset from the top of the screen
android:paddingRight="..." // same thing to keep it off the right edge
/>
<LinearLayout
android:layout_height="..." // set the height of your content in the center of your screen
android:layout_width="fill_parent"
android:layout_below="#+id/date_text"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="#+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
<ViewPager
android:id="#+id/pager"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
/>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="#+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
</LinearLayout>
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:handle="#+id/drawer_handle"
android:content="#+id/drawer_contents">
<ImageView
android:id="#+id/drawer_handle"
android:src="#drawable/image for the tab..."
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<Another Layout for the content of the drawer
android:id="#+id/drawer_contents"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
....
</Close that layout>
</SlidingDrawer>
</RelativeLayout>
From there, there is still quite a few things to fill up and some code to write to fill the lists of tiles (on the left and right), handle when the user click on an item, and then also display the content of the ViewPager in the middle of the screen. You'll probably want to use a GridLayout in each page there.
If you need to hide that ViewPager until the user click on some tile, you can set the visibility to hidden and change it in your code.
UPDATE
Now there is more information on how this moves......
OK, so keep the top level RelativeLayout with the date and the SlidingDrawer at the bottom.
In the middle part, you can use the HorizontalListView that was put together by this person: How can I make a horizontal ListView in Android?, the code and instructions and example can be found here: http://www.dev-smart.com/archives/34
Then you need to create your own Adapter to populate that List. You can base it off the BaseAdapter (that decision is more dependent on how your images / information is stored).
In the getView function of that Adapter, can have a layout where both the collapsed and expanded views are combined into one FrameLayout, but only one is visible at a time. It will look like something like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height
>
<LinearLayout
android:id="#+id/collapsed_view"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
</LinearLayout>
<ViewPager
android:id="#+id/expanded_view"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
android:visibility="gone"
/>
</FrameLayout>
In the list adapter, you will need to set proper tags to the different views, so when a user clicks on one image, you know which one was clicked. To expand one view, you change the visibility of the LinearLayout to gone and the one of the ViewPager to visible.
If there should only be only one expanded at a time, you can have a state variable in your Adapter to say which one it is and set the visibility properties correctly for all the views in the list. Then you call invalidate on the ListView to have it refreshed.
There is quite a bit of code to write to do all this, but if you keep it organized, it should not be too bad....

android : Dynamic layout?

Im trying to have a searchbox on the top of my list view. But I want this searchbox to disapear sometimes and the listview to resize to regain space. Is there a way I can do that without reloading another and different layout ???
is there a way to add and remove a component from the current view ?I have been playing with setvisibility but it doesnt resize anything.
Please, if you know, give code example ! :)

I did this with a layout like this
<RelativeLayout android:id="#+id/editFrame"
android:layout_width="wrap_content"
android:layout_below="#id/imageAttachments"
android:layout_height="wrap_content"
>
<EditText android:id="#+id/editText"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
</RelativeLayout>
<ListView android:id="#+id/ListView01"
android:layout_below="#id/editFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
></ListView>
Then, in the code, do the following:
findViewById(R.id.editText).setVisibility(View.GONE);
to free up the space, or
findViewById(R.id.editText).setVisibility(View.VISIBLE);
to show the search box.
Instead of the EditText, one can as well use any other single control or a layout for a combination of controls.
Setting its visibility to GONE will make the surrounding editFrame layout (can as well be a FrameLayout) shrink to zero size and reclaim the space for the ListView (which is set to be layout directly below the editFrame layout).

Overlapping Views in Android

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.