web-dev-qa-db-fra.com

Comment créer un écran de démonstration transparent pour une Android app?

J'essaie de créer un écran de démonstration semi-transparent qui est lancé uniquement lorsqu'un utilisateur installe pour la première fois mon application. Voici un exemple tiré de l'application Pulse News:

Galaxy Nexus

Example screenshot from Pulse News on Galaxy Nexus

Nexus One

enter image description here

Au lieu d'une fonctionnalité permettant de cliquer pour ignorer, je souhaite que l'utilisateur puisse parcourir deux ou trois pages de démonstration transparentes.

Pour ma première tentative, j'ai modifié un échantillon de la bibliothèque ViewPagerIndicator . J'ai utilisé des PNG semi-transparents dans ImageViews à l'intérieur de chacun des fragments du pager de vue. J'ai ensuite lancé cette activité en tant qu '"activité de démonstration" dans la méthode onCreate de mon "activité principale".

Problème: l’activité principale n’était pas visible à l’arrière-plan; c’était plutôt noir. J'ai essayé les solutions ici , mais cela n'a pas résolu le problème.

Y at-il une meilleure approche pour créer quelque chose comme ça, ou suis-je sur la bonne voie?

J'ai également eu une autre question connexe qui dépend de la façon dont cela est mis en œuvre. J'essaie de superposer du texte et des flèches de manière à ce qu'ils pointent des composants particuliers de l'interface utilisateur en arrière-plan. En utilisant un fichier PNG contenant le texte et les flèches, il est probable qu'il ne sera pas correctement mis à l'échelle sur différents périphériques. C'est-à-dire que les flèches peuvent ne pas nécessairement pointer vers le composant d'interface utilisateur correct en arrière-plan. Y a-t-il un moyen de s'attaquer à ce problème également?

Merci!

Voici mon code pour la première tentative:

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);
    }
}
androidandroid-viewpagertransparentdemoshowcaseview
103
Gautam

Mettez vos informations de démonstration dans une activité différente et donnez-lui le thème suivant.

<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 vous utilisez ActionBarSherlock, remplacez parent par @style/Theme.Sherlock.

Cela vous donnera une activité transparente, de sorte que vous pourrez voir l'activité en dessous.

Maintenant, je suppose que vous voulez aussi un arrière-plan translucide.

Dans la mise en page XML (de votre activité transparente), ajoutez:

Android:background="#aa000000"

Les 6 derniers chiffres définissent la couleur: 000000 est en noir.

Les deux premiers définissent l'opacité: 00 est transparent à 100%, ff est opaque à 100%. Alors, choisissez quelque chose entre les deux.

79
Benito Bertoli

Avez-vous regardé ShowcaseView? https://github.com/Espiandev/ShowcaseView .

En utilisant ceci:

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);
64
Nik

Pulse utilise un RelativeLayout avec quatre ImageView et quatre TextView. Le texte de la capture d'écran est composé de tous les TextView avec leur propre police personnalisée.

Dans votre manifeste, ajoutez ce qui suit à votre activité:

Android: theme = "@ style/Theme.Transparent">

Dans votre RelativeLayout extérieur, ajoutez:

Android: background = "# aa000000"

Dans votre fichier 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>

Vous trouverez un exemple de programmation de la police personnalisée à l’adresse suivante:

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

La disposition de la visionneuse de hiérarchie ressemble à ceci (la zone rouge correspond au conteneur RelativeLayout):

enter image description here

11
powder366
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();

}
6
Ravikiran

Pour cela, vous devez créer une mise en page d'aide en bas de votre mise en page principale, par exemple: (structure)

<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>
5
Surendar D

Enveloppez votre mise en page principale dans un RelativeLayout, puis ajoutez une seconde mise en page, quelque chose comme:

<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>

Je crois que la disposition de superposition va au-dessous de la disposition principale dans le fichier XML (si la mémoire le permet). Vous pouvez ensuite créer votre propre mise en page, ViewFlipper, comme vous le souhaitez dans cette deuxième mise en page.

2
Eric

Créez une nouvelle activité (par exemple, tutoriel).

Accédez au fichier XML de présentation de votre activité (activity_tutorial). Sous la disposition parente, ajoutez "Android: background = # 000" et "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>

Maintenant, accédez au fichier manifeste de l'application et, sous votre activité de didacticiel, ajoutez l'attribut 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>

Ça y est, lancez maintenant cette activité par-dessus toute autre activité et vous pourrez obtenir les résultats souhaités. Personnalisez, ajoutez du texte, des images et d'autres éléments pour obtenir l'écran de didacticiel souhaité. Je suis sûr que vous pouvez faire fonctionner un viewpager avec cette technique.

1
Ankush Wadhwa

Vous pouvez simplement vérifier le code du lanceur Android, comme ils le font. Je ne connais pas leur implémentation.

Si c’était moi, je le ferais (si c’était une simple superposition) afin que vous ne visiez pas votre mise en page pour votre application, créez simplement votre mise en page de superposition et fixez-la sur votre mise en page d’application en l’ajoutant directement à vos activités WindowManager . Cela pourrait être aussi simple que d’ajouter un ImageView au WindowManager, d’écouter les contacts sur le ImageView ou d’avoir un délai d’attente pour supprimer le ImageView de votre Window.

0
Jug6ernaut