android - studio - ibuildapp

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

Question

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

Nexus One

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 intento, 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 here , 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 intento:

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);
}
}

Answer 1

¿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);

Answer 2

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

<RelativeLayout
.... >
<LinearLayout
.... >
<!-- Contents of your main layout -->
</LinearLayout>
<LinearLayout
....
android:background="#44000000" > <!-- This is alpha 68/255, black -->
<!-- Contents of your overlay layout -->
</LinearLayout>
</RelativeLayout>

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.

Answer 3

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 "

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Tutorial_Activity"
android:background="#000"
android:alpha="0.5">
..................................................
....................................................
.............................................
...............................................
</RelativeLayout>

Ahora, vaya al archivo de manifiesto de la aplicación y en su actividad de tutorial, agregue el atributo android: theme = "@ android: style / Theme.Translucent.NoTitleBar">

<application>
.........................................
..........................................
....................................
..........................................
<activity
android:name="com.aird.airdictionary.Tutorial_Activity"
android:label="@string/title_activity_tutorial"
android:theme="@android:style/Theme.Translucent.NoTitleBar">
</activity>
</application>
</manifest>

Eso es todo, ahora ejecuta esta actividad además de cualquier otra actividad y puedes obtener los resultados deseados. Personalice, agregue texto, imageviews y otras cosas para obtener su pantalla de tutorial deseada. Estoy bastante seguro de que puedes hacer que un visor funcione con esta técnica.

Answer 4

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

<Parent layout>
<Layout 1>(Linear,Relative,....)
Main layout
your view...
</Layout 1>
<Layout help>
set #70000000 as background of this layout
#70(transparent range can change) 000000(black)
and height and width as fillparent
</Layout help>
</Parent layout>

Answer 5

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 .

Answer 6

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

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

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.

Answer 7

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:

<style name="Theme.Transparent" parent="android:Theme">
<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:windowIsFloating">false</item>
<item name="android:backgroundDimEnabled">false</item>
</style>

Un ejemplo de cómo programar 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):

Answer 8

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();
}