Come creare una pagina di istruzioni semitrasparente in Android?

Question

Sono nuovo ad Android e sto provando a lavorare su questo problema negli ultimi 2 giorni ma ho potuto trovare una soluzione. Qualsiasi aiuto sarà molto apprezzato. Come creare una pagina semi-trasparente per le istruzioni utilizzate da un contatore di calorie App in Android Market?

Answer 1

creare una nuova attività e impostare la vista di primo livello per avere uno sfondo trasparente:

android:background="#c0000000" 

EDIT: È inoltre necessario dichiarare l'attività di avere uno sfondo trasparente. L'impostazione di questo tema per l'attività nel manifest funzionerà:

android:theme="@android:style/Theme.Translucent" 

Answer 2

Ho provato a fare qualcosa di simile. Ho creato una finestra di dialogo dei messaggi con l'uso di Attività. Per questa attività ho scritto in Manifesto:

<activity android:name=".MessDial" 
android:label="@string/lblDialog" 
android:theme="@style/Theme.Transparent"> 
</activity> 

Nel corpo di questa attività non ho nulla di speciale per trasparenza.

Spero che ti possa aiutare.

Answer 3

È possibile provare questo esempio per mostrare la schermata di istruzioni per la prima volta senza altre librerie
se si desidera mostrare le istruzioni solo alla prima volta, è possibile aggiungere alcuni flag alla memoria Preferenza. Un esempio può essere trovato here

protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    SharedPreferences pref= PreferenceManager.getDefaultSharedPreferences(getBaseContext()); 
    boolean check = pref.getBoolean("firstime", true); 
    if(check==true){ 
     Intent i = new Intent(MainActivity.this, Tutorial_screen.class);//starting activity for the Frist time 
     startActivity(i); 
    } 

Answer 4

Ho appena implementato la risposta di Ted in uno dei miei progetti. Grande! Estremamente facile da implementare e ottimo risultato. Mille grazie per questo Ted.

Ma come Stack Overflow è per prendere e condividere Mi piacerebbe condividere la mia implementazione di una vista personalizzata che crea frecce sotto forma di un "ago" che ho usato con l'approccio di Ted per completare la risposta originale. Ecco il codice:

package com.yourpackage; 

import android.content.Context; 
import android.content.res.TypedArray; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.PointF; 
import android.util.AttributeSet; 
import android.view.View; 
import de.nantoka.miep.R; 

public class CoachmarkArrow extends View { 

    private static final float CIRCLE_RADIUS = 1.5f; 
    private static final int TOPLEFT = 0; 
    private static final int TOPRIGHT = 1; 
    private static final int BOTTOMLEFT = 2; 
    private static final int BOTTOMRIGHT = 3; 

    Paint paint; 
    int from, to; 

    PointF padding = new PointF(); 
    PointF fromPoint = new PointF(); 
    PointF toPoint = new PointF(); 

    public CoachmarkArrow (Context context, AttributeSet attrs) { 
     super(context, attrs); 

     TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CoachmarkArrow, 0, 0); 

     getPaint(a); 
     getFromTo(a); 

     a.recycle(); 
    } 

    private void getFromTo(TypedArray a) { 

     from = a.getInt(R.styleable.CoachmarkArrow_from, BOTTOMLEFT); 
     to = a.getInt(R.styleable.CoachmarkArrow_to, TOPLEFT); 
    } 

    private void getPaint(TypedArray a) { 
     paint = new Paint(); 

     paint.setColor(a.getColor(R.styleable.CoachmarkArrow_color, Color.WHITE)); 
     paint.setStrokeWidth(a.getDimensionPixelSize(R.styleable.CoachmarkArrow_size, 0)); 

     paint.setStrokeCap(Paint.Cap.BUTT); 
     paint.setAntiAlias(true); 
    } 

    @Override 
    protected void onDraw (Canvas canvas){ 
     calculatePadding(canvas); 
     calculateLinePoints(); 

     drawLine(canvas, fromPoint, toPoint); 
     drawCircle(canvas, fromPoint); 
    } 

    private void calculateLinePoints() { 
     fromPoint = getPoint(from); 
     toPoint = getPoint(to); 
    } 

    private void calculatePadding(Canvas canvas) { 

     padding.x = CIRCLE_RADIUS * paint.getStrokeWidth()/canvas.getWidth(); 
     padding.y = CIRCLE_RADIUS * paint.getStrokeWidth()/canvas.getHeight(); 
    } 

    private PointF getPoint(int position) { 
     PointF point = new PointF(); 

     if (position == TOPRIGHT || position == BOTTOMRIGHT){ 
      point.x = 1.0f - padding.x; 
     } 
     else { 
      point.x = padding.x; 
     } 

     if (position == BOTTOMLEFT || position == BOTTOMRIGHT){ 
      point.y = 1.0f - padding.y; 
     } 
     else { 
      point.y = padding.y; 
     }  

     return point; 
    } 

    private void drawCircle(Canvas canvas, PointF fromPoint) { 

     canvas.drawCircle(
       canvas.getWidth() * fromPoint.x, 
       canvas.getHeight() * fromPoint.y, 
       CIRCLE_RADIUS * paint.getStrokeWidth(), 
       paint 
       ); 
    } 

    private void drawLine(Canvas canvas, PointF fromPoint, PointF toPoint) { 
     canvas.drawLine(
       canvas.getWidth() * fromPoint.x, 
       canvas.getHeight() * fromPoint.y, 
       canvas.getWidth() * toPoint.x, 
       canvas.getHeight() * toPoint.y, 
       paint 
       ); 
    } 
} 

Aggiungere questa classe al progetto (qualsiasi nome del pacchetto va bene) e creare un file di attributo sotto res/valori dei parametri XML:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <declare-styleable name="CoachmarkArrow"> 
     <attr name="size" format="dimension" /> 
     <attr name="color" format="color" /> 
     <attr name="from" format="enum"> 
      <enum name="topleft" value="0"/> 
      <enum name="topright" value="1"/> 
      <enum name="bottomleft" value="2"/> 
      <enum name="bottomright" value="3"/> 
     </attr> 
     <attr name="to" format="enum"> 
      <enum name="topleft" value="0"/> 
      <enum name="topright" value="1"/> 
      <enum name="bottomleft" value="2"/> 
      <enum name="bottomright" value="3"/> 
     </attr> 
    </declare-styleable> 
</resources> 

Ora è possibile creare gli "aghi" nella XML-layout della vostra attività coachmarks come qualsiasi altro punto di vista, ad esempio

<com.yourpackage.CoachmarkArrow 
    xmlns:coachmark="http://schemas.android.com/apk/res/com.yourproject"  
    android:layout_height="100dp" 
    android:layout_width="match_parent" 
    coachmark:size="3dip" 
    coachmark:color="@android:color/white" 
    coachmark:from="bottomright" 
    coachmark:to="topleft" 
/> 

crea un "ago" che ha la testa in basso a destra e la punta in alto a sinistra di una ri ctangle che è alto 100 dp e largo quanto il ViewGroup padre contenente.

In questo modo è possibile creare suggerimenti che si adattano automaticamente alle diverse dimensioni dello schermo. Ad esempio, se si utilizza un layout relativo, creare una vista fittizia per l'elemento dell'interfaccia utente che si desidera descrivere nell'attività di coachmarks e indicare il layout relativo in modo da posizionare il contrassegno del coach sotto la vista fittizia ma sopra la casella di testo di spiegazione che si centra nel mezzo della finestra. In questo modo il segno di coach ottiene automaticamente le dimensioni giuste per puntare dalla casella di testo all'elemento dell'interfaccia utente.

Spero che questo aiuti qualcuno!