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.
- ¿Cómo puedo multilinar el título expandido de CollapsingToolbarLayout?
- Android: dibujo mapa de bits en ubicación específica, negativa a dibujar
- ¿Por qué necesito envolver un ImageView en un FrameLayout?
- ¿Cómo añadir dinámicamente contenido a un diseño lineal?
- ¿Es posible agregar un TextView desplazable a un ListView?
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.
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,
- ¿Cuándo usar el diseño de restricciones y cómo utilizarlo de manera eficiente?
- Utilice otro conjunto de recursos en Android (no tiempo de ejecución, pero compiletime)
- Android: java.lang.NoSuchMethodError en LinearLayout $ LayoutParams. <Init>
- El atributo namespace de herramientas para mostrar el diseño en ViewPager en tiempo de diseño
- ¿Establecer el color de fondo de una vista de diseño a un degradado en Android?
- Alinea horizontalmente dos vistas de texto en un diseño
- Diferencia entre androide: orientación = "vertical" vs androide: orientación = "horizontal"
- Acción del botón del menú de sobrescritura
Este es un pequeño ejemplo de un diseño que recrea la interfaz de usuario de su captura de pantalla mediante DialogFragment
:
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.
- Error de OpenCV Library con AndroidStudio
- Uso de la gestión de excepciones globales con "setUncaughtExceptionHandler" y "Toast"