¿Cómo puedo crear una superposición de ayuda como se ve en algunas aplicaciones de Android e ICS?

Supongamos que normalmente llamaríamos setContentView(R.layout.main) , pero en la primera ejecución, usted quiere tener esta superposición.

Paso # 1: Cree un FrameLayout en código Java y pase eso a setContentView() .

Paso # 2: Use LayoutInflater para inflar R.layout.main en FrameLayout .

Paso # 3: Use LayoutInflater para inflar la superposición en FrameLayout .

Paso # 4: Cuando el usuario pulsa el botón (o lo que sea) para descartar la superposición, llame a removeView() para eliminar la superposición de FrameLayout .

Dado que la superposición es un hijo posterior de FrameLayout , flotará sobre la parte superior del contenido de R.layout.main .

"Coach mark" es "Ayuda superpuesta" en UX talk 🙂

Coach_mark.xml es su diseño de la marca del entrenador

Coach_mark_master_view es el id de la vista superior (root) en coach_mark.xml

 public void onCoachMark(){ final Dialog dialog = new Dialog(this); dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); dialog.setContentView(R.layout.coach_mark); dialog.setCanceledOnTouchOutside(true); //for dismissing anywhere you touch View masterView = dialog.findViewById(R.id.coach_mark_master_view); masterView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { dialog.dismiss(); } }); dialog.show(); } 

Añadir una muestra de coach_mark.xml (a esta excelente solución dada por Oded Breiner), por lo que es fácil para ppl copiar y pegar para ver el ejemplo de trabajo rápidamente.

Muestra de coach_mark.xml aquí, cambia el -> drawable / coach_marks a tu imagen:

Coach_mark.xml

 <?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="vertical" android:id="@+id/coach_mark_master_view"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/coach_marks_image" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" android:layout_gravity="center_horizontal" android:src="@drawable/coach_marks" /> </RelativeLayout> </LinearLayout> 

Y opcionalmente utilice este tema para eliminar el relleno:

 <style name="WalkthroughTheme" parent="Theme.AppCompat"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowContentOverlay">@null</item> <item name="android:windowNoTitle">true</item> <item name="android:backgroundDimEnabled">false</item> </style> 

Usted puede hacer que muy rápidamente. Usted agrega, por ejemplo un LinearLayout donde usted pone una imagen con el alfa que corresponda a su información de la ayuda y qué usted desea dibujar como una superposición. En tu xml de tu actividad pones este layout en un RelativeLayout después del diseño de tu actividad con la visibilidad Gone. Cuando desee dibujar la información de ayuda, sólo necesita establecer esta visibilidad para que sea visible.

Espero, estoy claro, si usted tiene alguna pregunta, estoy por favor para responder a ellos.

Vea mi otra respuesta cómo programaticamente mostrar un diseño de superposición en la parte superior de la actividad actual. Layout.xml de la actividad no necesita saber nada sobre la piel de superposición. Usted puede poner superposición semitransparente, cubrir sólo parte de la pantalla, uno o más textview y botones en él … ¿Cómo superponer un botón programmically?

• Crear res / layout / paused.xml Template RelativeLayout o usar cualquier layout toplevel
• Crear una función para mostrar la superposición de la piel
• Key es obtener el identificador de layout.xml, usar la clase LayoutInflater para analizar xml para ver el objeto, agregar vista de superposición a la estructura de diseño actual
• Mi ejemplo utiliza un temporizador para destruir objeto de superposición eliminándolo completamente de la estructura de vista. Esto es probablemente lo que usted desea también para deshacerse de él sin dejar rastro.

Mi objetivo era que las actividades principales no son conscientes de la superposición de la piel, las superposiciones van y vienen, muchas superposiciones diferentes, siguen siendo capaces de utilizar los archivos de texto overlay1.xml como plantilla y el contenido debe actualizarse mediante programación. Hago bastante mucho qué CommonsWare nos dijo que mi poste demuestra el código de programa real para conseguir comenzado.

Nota de Exención de Responsabilidad: OPs "Gracias por su aportación.Éste es cómo me imaginé que se está haciendo.Tengo que dar crédito a la respuesta a continuación" comentario no significa mi respuesta, pero la respuesta de CommonsWare. Stackoverflow ha cambiado los pedidos posteriores.