Creación de un diseño sin un borde que superpone la capa de fondo

Quiero crear algo como esto en la captura de pantalla. Tiene un diseño principal que es el fondo y el diseño que lo superpone. No estoy seguro de cómo se hace esto.

Mi mejor conjetura sería un fragmento de diálogo. ¿Es esta la forma correcta de hacer algo como esto.

Introduzca aquí la descripción de la imagen

Mi intento de usar el fragmento de diálogo no me da los resultados que me gustaría y esto es lo más cerca que puedo conseguir.

Introduzca aquí la descripción de la imagen

Este es mi diseño:

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

He utilizado el diseño del coordinador para anclar la imagen del perfil en el fondo. Sin embargo, que funciona bien. Pero el nombre cubre parte de la imagen del perfil. Los iconos que descarga desde el paquete de iconos de google. Los extremos muestran un fondo muy oscuro y deben ser transparentes. El icono de cierre en la esquina superior derecha tampoco tiene un fondo transparente. El cuadro de diálogo cubre toda la pantalla.

Hincho mi DialogFragment como esto:

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

Muchas gracias por las sugerencias,

Este es un pequeño ejemplo de un diseño que recrea la interfaz de usuario de su captura de pantalla mediante DialogFragment :

el resultado

El diseño 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> 

El DialogFragment :

 public class AddMemberDialogFragment extends DialogFragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setStyle(DialogFragment.STYLE_NO_TITLE, 0); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_add_member, container); } } 

Dos enfoques que usted puede elegir.

1. Use DialogFragment Le dará sombra automáticamente.

 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. Utilice el diseño superpuesto y el fondo dibujable para la sombra

Defina dos Layouts en Root RelativeLayout y ajuste el ancho y la altura de uno superpuesto. A continuación, aplique el fondo de 9 parches, dibujable.

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

Y img_bg_mask.png se ve como abajo. Debajo de la imagen se muestra la esquina redondeada como un ejemplo, pero se puede hacer una imagen de 9 parches que tiene sombra rectangular.

Introduzca aquí la descripción de la imagen

  • Android: cómo hacer crecer una vista para llenar el espacio disponible?
  • ¿Cómo aumentar la altura de la fila de la tabla según las pantallas?
  • ¿Cómo implementar una interfaz de usuario similar a la UI de aplicaciones recientes de Lollipop?
  • Cómo establecer el relleno entre las páginas de ViewPager mientras se mantiene la página de ancho completo
  • Ajusta el diseño cuando se muestre o se oculte el teclado virtual de Android
  • Hacer transparente el diálogo del diálogo de alerta
  • ¿El diseño se invierte?
  • Android ScrollView puede alojar sólo un hijo directo
  • Comprender cómo funcionan las coordenadas de drawRect o de dibujo en Android
  • Cómo colocar hipervínculo a un sitio web en la aplicación Android?
  • ¿Cómo hacer que el estilo personalizado de tema de ventanaBackground funcione en todos los dispositivos Android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.