Come si crea la sovrapposizione del tutorial grigio semitrasparente in Android?

Question

Sai quando esegui un dispositivo Android per la prima volta (qualcosa che vedi molto se usi l'emulatore) che c'è un piccolo tutorial utile su come usare il launcher e aggiungere widget, ecc. Sto cercando di trovare un esempio di questo su Google, ma non posso. Spero che tu sappia cosa intendo. È quello con i pulsanti blu "okay" ad ogni passo.

In ogni caso, desidero crearne uno per la mia app, ma non sono sicuro quale sia il modo migliore per farlo.

Devo creare un frammento che posso rendere semitrasparente in aggiunta alla mia attività normale e visualizzarlo solo alla prima esecuzione?

Realizzo un file .png semitrasparente per ciascuna sezione del tutorial e lo sovrappongo alla normale attività di avvio alla prima esecuzione?

Se faccio quest'ultimo, come posso regolare tutte le varie dimensioni dello schermo? Potrei semplicemente rendere l'immagine in Photoshop a varie dimensioni, ma questo non le coprirà tutte. Se passo alla via del frammento, posso solo dire "match_parent" e non preoccuparmi di ciò. Ma poi devo capire come funzionano i Frammenti, e loro mi confondono.

Answer 1

Penso che questa libreria open-source è esattamente quello che stai cercando:

Showcase View

È possibile prendere il codice sorgente e le istruzioni di installazione da GitHub.

Answer 2

Non è necessario utilizzare Photoshop. È possibile utilizzare, ad esempio, un LinearLayout con android:background="#50134BE8". Questo lo renderà trasparente blu. Puoi posizionare il layout sopra tutto e nasconderlo quando l'utente ha finito. Puoi usare qualsiasi colore di sfondo, ma per renderlo trasparente, inserisci un numero da 01 a FE, dopo il simbolo "#" per cambiarne la trasparenza. Impostare la larghezza e l'altezza su fill_parent per occupare l'intera area. Posiziona questa vista direttamente nel layout principale. Spero che questo ti aiuti.

Answer 3

Si può provare qualcosa di simile

<LinearLayout ... > 
<!-- your Normal layout goes here --> 
<RelativeLayout android:id="@+id/tutorialView" android:background="#D0000000" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"> 

     <ImageView android:src="@drawable/hint_menu" android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true" android:layout_width="wrap_content" 
        android:layout_height="wrap_content"/> 

    </RelativeLayout> 
</LinearLayout> 

E nel metodo onCreate

View tutorialView = findViewById(R.id.tutorialView); 
     boolean tutorialShown = PreferenceManager.getDefaultSharedPreferences(MainActivity.this).getBoolean(Constants.PREF_KEY_TUT_MAIN, false); 
     if (!tutorialShown) { 
      tutorialView.setVisibility(View.VISIBLE); 
     } else { 
      tutorialView.setVisibility(View.GONE); 
     } 

     tutorialView.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       v.setVisibility(View.GONE); 
       PreferenceManager.getDefaultSharedPreferences(MainActivity.this).edit().putBoolean(Constants.PREF_KEY_TUT_MAIN, true).commit(); 
      } 
     }); 

Answer 4

utilizzare un codice colore esadecimale, che consiste di due cifre per alfa e sei per il colore stesso, così:

android:background="#22FFFFFF" 

Sarà rendono semi-trasparente.

android:background="#c0000000" for more darkness 

A cura

Generalmente hexadecimak struttura del codice colore è come '#FFFF'

per raggiungere la trasparenza aggiungere due cifre dopo '#' a qualsiasi codice di colore.

Ad esempio: #110000, #220000, #330000.

Maggiore è il numero di queste due cifre, minore è la trasparenza.

Answer 5

Ci

è una libreria premiato per questo chiamato "FancyShowcaseView":

https://github.com/faruktoptas/FancyShowCaseView

aggiungere al progetto come questo:

Nel di livello superiorebuild.gradle (non livello modulo):

allprojects { 
    repositories { 
     ... 
     maven { url "https://jitpack.io" } 
    } 
} 

Nel a livello di modulo (app) build.gradle

dependencies { 
    compile 'com.github.faruktoptas:FancyShowCaseView:1.0.0' 
} 

Poi si può chiamare:

new FancyShowCaseView.Builder(this) 
     .focusOn(view) 
     .title("Focus on View") 
     .build() 
     .show();