How to use LayoutInflater / ViewStub for overlay

Question

Since I'm actually not very sure about the programmatic change of Views, I have the following problem:

The first time I launch my application, I want to have an overlay for the main screen, which tells the user to see the settings, since there are two critical options that the user must configure.

I do not want to use AlertDialog and not use the wizard. So, I decided to use an approach similar to Go SMS, and create an overlay on the first run. The layout I created is as follows:

Normal menu:

First start:

So these are the problems that I have:

• As I said, I do not want to use the screenshot that is attached at the first start, as this takes up too much space and will not be independent of the language and screen.
• I would have a circle like png, but I don’t know exactly how to transfer it over the image.
• same problem with text
• And finally, I want to lay a translucent white on top of the application. It does not necessarily need a hole for the icon, although it would be nice.

If you need a layout source, you can get it on pastebin

So, I just need to start here if it is better to use LayoutInflater or ViewStub and how to implement it, since I have absolutely no experience with it ...

Thanks!

/ edit: I uploaded a new, more nicely styled layout.

Answer 1

I faced a similar problem, I wanted the client to go through an application where the whole screen was supposed to become whiter (as they said: “transparent”), except that the button is explained by an overlay speech bubble.
Fortunately for you, your layout is not as complicated as the one I had to work with :)

Now you can get the transparency effect in two ways: either have a white background, or call all setAlpha () methods, or create a translucent white overlay.
If you go overlay, you will need to find a way to display the opaque buttons through the overlay. This can get a little complicated. If you go to the first option, you can just set Alpha (1) to an opaque look so that it appears.

The setAlpha () method is only available from api version 11+, so if you are targeting an earlier version, you may have to make it a little more complicated. An example of setting alpha for pre-honeycomb views:

Layout for your buttons (make them what you want, just make them look like you can skip them):

 <LinearLayout android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:tag="image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/tile"/> <TextView android:tag="text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FF000000" android:text="button1"/> </LinearLayout> 

In your program, when you want to make buttons transparent:

 LinearLayout l = (LinearLayout) findViewById(R.id.button1); ((ImageView)l.findViewWithTag("image")).setAlpha(0x7F); ((TextView)l.findViewWithTag("text")).setTextColor(0x7F000000); 

When you decide how you want to create a transparency effect, you will need to decide how to display the overlay text / bubble. Most likely, you will want to place this on a separate layer on top of the entire layout to make sure that this does not affect your new view.
One way to achieve this is to change the root layout element to FrameLayout, and then create / display in it. eg:

 <FrameLayout background="#FFFF"> <!-- white background, just in case --> <LinearLayout> <!-- the rest of your layout --> </LinearLayout> <LinearLayout visibility="gone"> <!-- this will be your overlay view --> <ImageView /> <!-- the arrow/ring --> <TextView /> <!-- the description --> </LinearLayout> </FrameLayout> 

When the introduction is entered, you indicate the position of the hidden overlay view at the position of the displayed table element, change the text to the corresponding line / resource and display the view.

When the input is complete, you reset the alpha values ​​of all the buttons and set the overlay visibility again.

Answer 2

Since I do not have much experience with ViewStub, I would do this using LayoutInflater.

First of all, you need to have a second layout loaded on top of your current layout. The easiest way is to have FrameLayout, which has a view as one of your current views, and dynamically you load the second child at the first start. When you load a content view into an Activity, it will be attached to some already created views (some DecorView, FrameLayout, etc.). This way you can either reuse an existing FrameLayout or create a new one. I would vote for the second solution, since it is more stable (I mentioned only another possibility, if you want to minimize the number of layers).

So, as a first step, wrap your current layout inside FrameLayout and give it the id, say, "@ id / root".

Then in the onCreate method you can have something like this:

 setContentView(R.layout.main); if (isFirstRun()) { ViewGroup parent = (ViewGroup)findViewById(R.id.root); // locate the FrameLayout LayoutInflater li = LayoutInflater.from(this); // get an instance of LayoutInflater li.inflate(R.layout.overlay, parent); } 

While you have an overlay loaded. Now you need to define the overlay. To make the whitening effect, simply set the following attribute in the root view in the overlay.xml layout:

 android:background="#40ffffff" 

To position a circle, you first need to find its location. You can use View.getLocationOnScreen to get the absolute coordinate of the icon (below the circle) on the screen. Then you can have two options:

• either create a custom view (for overlay), or manually draw a circle in this place
• or add a circle using ImageView and adjust the left and top margins based on the coordinates