Creazione di un layout senza un bordo che si sovrappone al livello di sfondo

Question

Voglio creare qualcosa di simile nello screenshot. Ha un layout principale che è lo sfondo e il layout che lo sovrasta. Non sono sicuro di come sia fatto.

La mia ipotesi migliore sarebbe un frammento di dialogo. È questo il modo giusto per fare qualcosa di simile.

Il mio tentativo di utilizzare il frammento di dialogo non mi dà i risultati che vorrei e questo è il più vicino che posso ottenere.

Questo è il mio layout:

<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" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    tools:context="com.chatt.fragments.AddMember"> 

     <ImageButton 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_highlight_off_white_36dp" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentEnd="true"/> 

    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <ImageView 
      android:id="@+id/ivBackground" 
      android:layout_width="match_parent" 
      android:layout_height="300dp" 
      android:src="@drawable/world" 
      android:scaleType="centerCrop" 
      android:alpha="0.4"/> 

     <de.hdodenhof.circleimageview.CircleImageView 
      android:id="@+id/civProfilePhoto" 
      android:layout_width="70dp" 
      android:layout_height="70dp" 
      android:src="@drawable/user3" 
      app:layout_anchor="@+id/ivBackground" 
      app:layout_anchorGravity="bottom|center"/> 

     <TextView 
      android:id="@+id/tvMemberName" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:fontFamily="sans-serif-light" 
      android:text="Sarah" 
      android:textSize="26sp" 
      android:textStyle="bold" 
      app:layout_anchor="@+id/civProfilePhoto" 
      app:layout_anchorGravity="bottom|center" 
      android:layout_marginTop="40dp"/> 

    </android.support.design.widget.CoordinatorLayout> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="60dp" 
     android:layout_alignParentBottom="true" 
     android:background="@color/material_grey_300"> 

     <ImageButton 
      android:id="@+id/ibLock" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:layout_alignParentStart="true" 
      android:layout_alignParentLeft="true" 
      android:layout_marginLeft="60dp" 
      android:layout_marginStart="60dp" 
      android:src="@drawable/ic_lock_black_36dp"/> 

     <ImageButton 
      android:id="@+id/ibAddMember" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerVertical="true" 
      android:layout_alignParentEnd="true" 
      android:layout_alignParentRight="true" 
      android:layout_marginRight="60dp" 
      android:layout_marginEnd="60dp" 
      android:src="@drawable/ic_person_add_black_36dp"/> 
    </RelativeLayout> 
</RelativeLayout> 

Ho usato il layout Coordinatore per ancorare la foto del profilo sullo sfondo. Tuttavia, ciò funziona bene. Ma il nome copre alcune delle foto del profilo. Le icone che scarico da google icon pack. I bottoni mostrano uno sfondo molto scuro e dovrebbero essere trasparenti. Anche l'icona di chiusura nell'angolo in alto a destra non ha uno sfondo trasparente. La finestra di dialogo copre l'intero schermo.

ho gonfiare il DialogFragment in questo modo:

@Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 

     setStyle(DialogFragment.STYLE_NO_FRAME, 0); 
    } 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, 
          Bundle savedInstanceState) { 
     // Inflate the layout for this fragment 
     getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(0)); 
     return inflater.inflate(R.layout.fragment_add_member, container, false); 
    } 

Molte grazie per qualsiasi suggerimento,

Answer 1

Questo è un piccolo esempio di un layout che ricreano l'interfaccia utente del vostro screenshot utilizzando il DialogFragment:

Il layout fragment_add_member.xml:

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="250dp" 
     android:layout_height="200dp" 
     android:scaleType="centerCrop" 
     android:src="@drawable/world"/> 

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end" 
     android:layout_margin="5dp" 
     android:src="@drawable/ic_highlight_off_white_36dp"/> 

    <de.hdodenhof.circleimageview.CircleImageView 
     android:id="@+id/civProfilePhoto" 
     android:layout_width="50dp" 
     android:layout_height="50dp" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="185dp" 
     android:src="@drawable/profile"/> 

    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="240dp" 
     android:gravity="center_horizontal" 
     android:text="Mattia" 
     android:textSize="16sp"/> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="60dp" 
     android:layout_marginTop="320dp" 
     android:background="@color/material_grey_300"> 

     <ImageView 
      android:id="@+id/ibLock" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical|start" 
      android:layout_marginLeft="50dp" 
      android:layout_marginStart="50dp" 
      android:src="@drawable/ic_lock_black_36dp"/> 

     <ImageView 
      android:id="@+id/ibAddMember" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical|end" 
      android:layout_marginEnd="50dp" 
      android:layout_marginRight="50dp" 
      android:src="@drawable/ic_person_add_black_36dp"/> 

    </FrameLayout> 
</FrameLayout> 

Il DialogFragment :

Answer 2

Due approccio che si può scegliere.

1. Usa DialogFragment Ti darà automaticamente ombra.

public class OverlayDialogFragment extends DialogFragment { 
    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     // This will give you shadow with borderless frame. 
     setStyle(DialogFragment.STYLE_NO_FRAME, 0); 
    } 

    // your code. define layout xml, etc.... 

} 

2. Usare nobilitate layout e lo sfondo disegnabile per ombra

Definire due Layout nel RelativeLayout radice e regolare la larghezza e l'altezza di un overlayed. E poi applica un background drawable a 9 patch.

<RelativeLayout 
android:id="@+id/layoutRoot" 
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"> 

    <!-- your base UI elements here --> 

    <RelativeLayout 
     android:id="@+id/overlayLayout" 
     android:layout_width="600dp" 
     android:layout_height="800dp" 
     android:background="@drawable/img_bg_mask" 
     android:orientation="vertical"> 
    </RelativeLayout> 
</RelativeLayout> 

E img_bg_mask.png sembra come di seguito. L'immagine in basso mostra un angolo arrotondato come esempio, ma puoi creare un'immagine a 9 patch con un'ombra rettangolare.