¿Cómo se crea una pantalla de demostración transparente para una aplicación de Android?

Intento crear una pantalla de demostración semitransparente que se inicia solo cuando un usuario instala mi aplicación por primera vez. Aquí hay un ejemplo de la aplicación Pulse News:

Galaxy Nexus

Captura de pantalla de ejemplo de Pulse News en Galaxy Nexus

Nexus One

enter image description here

En lugar de una función de ‘tocar para descartar’, quiero que el usuario pueda deslizarse a través de un par de páginas de demostración transparentes.

Para mi primer bash, modifiqué una muestra de la biblioteca ViewPagerIndicator . Utilicé PNG semitransparentes en ImageViews dentro de cada uno de los fragmentos del buscapersonas. Luego lancé esto como una ‘actividad de demostración’ en el método onCreate de mi ‘actividad principal’.

Problema: la ‘actividad principal’ no se podía ver en el fondo, sino que era simplemente negra. Intenté las soluciones aquí , pero eso no solucionó el problema.

¿Hay un mejor enfoque para crear algo como esto, o estoy en el camino correcto?

También tuve otra pregunta relacionada que depende de cómo se implementa esto. Estoy tratando de superponer el texto y las flechas para que apunten a los componentes de IU particulares en el fondo. Al usar un PNG que tenga el texto y las flechas, es probable que no se escale correctamente en diferentes dispositivos. Es decir, las flechas pueden no apuntar necesariamente al componente UI correcto en el fondo. ¿Hay alguna forma de abordar este problema también?

¡Gracias!

Aquí está mi código para el primer bash:

DemoActivity.java

public class DemoActivity extends FragmentActivity { DemoFragmentAdapter mAdapter; ViewPager mPager; PageIndicator mIndicator; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.demo_activity); mAdapter = new DemoFragmentAdapter(getSupportFragmentManager()); mPager = (ViewPager)findViewById(R.id.pager); mPager.setAdapter(mAdapter); //mPager.setAlpha(0); UnderlinePageIndicator indicator = (UnderlinePageIndicator)findViewById(R.id.indicator); indicator.setViewPager(mPager); indicator.setFades(false); mIndicator = indicator; } } 

DemoFragmentAdapter.java

 class DemoFragmentAdapter extends FragmentPagerAdapter { protected static final int[] CONTENT = new int[] { R.drawable.demo1, R.drawable.demo2, R.drawable.demo3, R.drawable.demo4}; private int mCount = CONTENT.length; public DemoFragmentAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return DemoFragment.newInstance(CONTENT[position % CONTENT.length]); } @Override public int getCount() { return mCount; } public void setCount(int count) { if (count > 0 && count <= 10) { mCount = count; notifyDataSetChanged(); } } } 

DemoFragment.java

 public final class DemoFragment extends Fragment { private static final String KEY_CONTENT = "TestFragment:Content"; public static DemoFragment newInstance(int content) { DemoFragment fragment = new DemoFragment(); fragment.mContent = content; return fragment; } private int mContent; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) { mContent = savedInstanceState.getInt(KEY_CONTENT); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { ImageView image = new ImageView(getActivity()); image.setBackgroundResource(mContent); LinearLayout layout = new LinearLayout(getActivity()); layout.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); layout.setGravity(Gravity.CENTER); layout.addView(image); return layout; } @Override public void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); outState.putInt(KEY_CONTENT, mContent); } } 

Pon tu información de demostración en una actividad diferente y dale el siguiente tema.

  

Si está utilizando ActionBarSherlock, cambie parent a @style/Theme.Sherlock .

Esto le dará una actividad transparente, por lo que podrá ver la actividad debajo de ella.

Ahora supongo que quieres un fondo translúcido también.

En el diseño xml (de su actividad transparente) agregue:

 android:background="#aa000000" 

Los últimos 6 dígitos definen el color: 000000 es negro.

Los primeros 2 definen la opacidad: 00 es 100% transparente, ff es 100% opaco. Entonces elige algo intermedio.

¿Has mirado ShowcaseView? https://github.com/Espiandev/ShowcaseView .

Usando esto:

 View showcasedView = findViewById(R.id.view_to_showcase); ViewTarget target = new ViewTarget(showcasedView); ShowcaseView.insertShowcaseView(target, this, R.string.showcase_title, R.string.showcase_details); 

Pulse está utilizando RelativeLayout con cuatro ImageView y cuatro TextView. El texto en la captura de pantalla es todo TextView con su propia fuente personalizada.

En su Manifiesto, agregue lo siguiente a su Actividad:

android: theme = “@ style / Theme.Transparent”>

En su RelativeLayout externo, agregue:

android: background = “# aa000000”

A su archivo styles.xml:

  

Un ejemplo de cómo progtwigr la fuente personalizada que puede encontrar en:

https://github.com/commonsguy/cw-android/tree/master/Fonts/FontSampler/

El diseño del Visor de jerarquía se ve así (el cuadro rojo es el contenedor RelativeLayout):

enter image description here

Para esto, necesitas crear un diseño de ayuda en la parte inferior de tu diseño principal, por ejemplo: (estructura)

  (Linear,Relative,....) Main layout your view...   set #70000000 as background of this layout #70(transparent range can change) 000000(black) and height and width as fillparent   
 setContentView(R.layout.sample_main); showOverLay(); private void showOverLay(){ final Dialog dialog = new Dialog(context, android.R.style.Theme_Translucent_NoTitleBar); dialog.setContentView(R.layout.transparent); RelativeLayout layout = (RelativeLayout) dialog.findViewById(R.id.transparent); layout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View arg0) { dialog.dismiss(); } }); dialog.show(); } 

Envuelva su diseño principal en un RelativeLayout , luego agregue un segundo diseño a eso, algo como:

          

Creo que el diseño de superposición va por debajo del diseño principal en el archivo XML (si la memoria sirve). A continuación, puede hacer su propio diseño, ViewFlipper , lo que quiera dentro de este segundo diseño.

Podrías echar un vistazo al código del iniciador de Android, ya que lo hacen. No sé que hay implementación.

Si fuera yo, lo haría (si es una simple superposición) para no atornillar con su diseño para su aplicación, simplemente cree su diseño de superposición y adjúntelo a su diseño de aplicación agregándolo directamente a sus actividades WindowManager . Podría ser tan simple como agregar ImageView al WindowManager , escuchar los toques en ImageView o tener un tiempo de espera para eliminar ImageView de su Window .

Haga una nueva actividad (digamos Tutorial).

Vaya al archivo xml del diseño de su actividad (activity_tutorial). En el diseño principal, agregue “android: background = # 000” y “android: alpha =” 0.5 ”

  .................................................. .................................................... ............................................. ...............................................