Cómo hacer la disposición con las esquinas redondeadas ..?

¿Cómo puedo hacer un diseño con esquinas redondeadas? Quiero aplicar esquinas redondeadas a mi LinearLayout .

1: Definir layout_bg.xml en drawables :

 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFFFFF"/> <stroke android:width="3dip" android:color="#B1BCBE" /> <corners android:radius="10dip"/> <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" /> </shape> 

2: Añada layout_bg.xml como fondo a su diseño

 android:background="@drawable/layout_bg" 

Aquí está una copia de un archivo XML para crear un dibujable con un fondo blanco, borde negro y esquinas redondeadas:

  <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#ffffffff"/> <stroke android:width="3dp" android:color="#ff000000" /> <padding android:left="1dp" android:top="1dp" android:right="1dp" android:bottom="1dp" /> <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/> </shape> 

Guárdelo como un archivo xml en el directorio dibujable, úselo como si utilizara cualquier fondo dibujable (icono o archivo de recursos) usando su nombre de recurso (R.drawable.your_xml_name)

Para API 21+, utilizar vistas de clip

El recorte de contorno redondeado se agregó a la clase View en la API 21. Consulte este documento de formación o esta referencia para obtener más información.

Esta característica incorporada hace que las esquinas redondeadas sean muy fáciles de implementar. Funciona en cualquier vista o disposición y soporta el recorte adecuado.

Esto es lo que debe hacer:

  • Cree una forma redondeada android:background="@drawable/round_outline" como fondo de su vista: android:background="@drawable/round_outline"
  • Según la documentación, todo lo que necesitas hacer es: android:clipToOutline="true"

Desafortunadamente, parece haber un error y este atributo XML actualmente no se reconoce. Por suerte, podemos configurar el recorte en Java:

  • En su actividad o fragmento: View.setClipToOutline(true)

Cómo se ve:

Introduzca aquí la descripción de la imagen

Nota especial sobre ImageViews

setClipToOutline() sólo funciona cuando el fondo de la vista se establece en una forma dibujable. Si existe esta forma de fondo, View trata el contorno del fondo como los bordes para fines de recorte y sombreado.

Esto significa que si desea redondear las esquinas en un ImageView con setClipToOutline() , su imagen debe provenir de android:src lugar de android:background (ya que el fondo se utiliza para la forma redondeada). Si DEBE utilizar el fondo para establecer su imagen en lugar de src, puede utilizar esta solución de vistas anidadas:

  • Cree un diseño externo con su fondo ajustado a su forma dibujable
  • Envuelva ese diseño alrededor de su ImageView (sin relleno)
  • El ImageView (incluyendo cualquier otra cosa en el diseño) ahora se recortará a la forma redondeada del diseño externo.

He hecho de esta manera:

Comprobar Captura de pantalla:

Diseño relativo de fondo

Cree un archivo custom_rectangle.xml denominado con custom_rectangle.xml en la carpeta custom_rectangle.xml :

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="@android:color/white" /> <corners android:radius="10dip" /> <stroke android:width="1dp" android:color="@android:color/white" /> </shape> 

Ahora aplique el fondo de Rectángulo en Ver :

 mView.setBackground(R.drawlable.custom_rectangle); 

Hecho

Creo que una mejor manera de hacerlo es fusionar 2 cosas:

  1. Haga un mapa de bits del diseño, como se muestra aquí .

  2. Hacer un dibujo redondeado desde el mapa de bits, como se muestra aquí

  3. Establecer el dibujable en un imageView.

Esto manejará casos que otras soluciones no han podido resolver, como tener contenido que tiene esquinas.

Creo que también es un poco más GPU-friendly, ya que muestra una sola capa en lugar de 2.

La única mejor manera es hacer una vista totalmente personalizada, pero eso es un montón de código y puede tomar mucho tiempo. Creo que lo que he sugerido aquí es lo mejor de ambos mundos.

He aquí un fragmento de cómo se puede hacer:

RoundedCornersDrawable.java

 /** * shows a bitmap as if it had rounded corners. based on : * http://rahulswackyworld.blogspot.co.il/2013/04/android-drawables-with-rounded_7.html */ public class RoundedCornersDrawable extends BitmapDrawable { private final BitmapShader bitmapShader; private final Paint p; private final RectF rect; private final float borderRadius; public RoundedCornersDrawable(final Resources resources, final Bitmap bitmap, final float borderRadius) { super(resources, bitmap); bitmapShader = new BitmapShader(getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); final Bitmap b = getBitmap(); p = getPaint(); p.setAntiAlias(true); p.setShader(bitmapShader); final int w = b.getWidth(), h = b.getHeight(); rect = new RectF(0, 0, w, h); this.borderRadius = borderRadius < 0 ? 0.15f * Math.min(w, h) : borderRadius; } @Override public void draw(final Canvas canvas) { canvas.drawRoundRect(rect, borderRadius, borderRadius, p); } } 

CustomView.java

 public class CustomView extends ImageView { private View mMainContainer; private boolean mIsDirty=false; // TODO for each change of views/content, set mIsDirty to true and call invalidate @Override protected void onDraw(final Canvas canvas) { if (mIsDirty) { mIsDirty = false; drawContent(); return; } super.onDraw(canvas); } /** * draws the view's content to a bitmap. code based on : * http://nadavfima.com/android-snippet-inflate-a-layout-draw-to-a-bitmap/ */ public static Bitmap drawToBitmap(final View viewToDrawFrom, final int width, final int height) { // Create a new bitmap and a new canvas using that bitmap final Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); final Canvas canvas = new Canvas(bmp); viewToDrawFrom.setDrawingCacheEnabled(true); // Supply measurements viewToDrawFrom.measure(MeasureSpec.makeMeasureSpec(canvas.getWidth(), MeasureSpec.EXACTLY), MeasureSpec.makeMeasureSpec(canvas.getHeight(), MeasureSpec.EXACTLY)); // Apply the measures so the layout would resize before drawing. viewToDrawFrom.layout(0, 0, viewToDrawFrom.getMeasuredWidth(), viewToDrawFrom.getMeasuredHeight()); // and now the bmp object will actually contain the requested layout canvas.drawBitmap(viewToDrawFrom.getDrawingCache(), 0, 0, new Paint()); return bmp; } private void drawContent() { if (getMeasuredWidth() <= 0 || getMeasuredHeight() <= 0) return; final Bitmap bitmap = drawToBitmap(mMainContainer, getMeasuredWidth(), getMeasuredHeight()); final RoundedCornersDrawable drawable = new RoundedCornersDrawable(getResources(), bitmap, 15); setImageDrawable(drawable); } } 

Utilice CardView en la biblioteca de soporte de android v7. Aunque es un poco pesado, resuelve todo el problema, y ​​bastante fácil. No es como el método de fondo dibujable establecido, podría cortar subviews con éxito.

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardBackgroundColor="@android:color/transparent" card_view:cardCornerRadius="5dp" card_view:cardElevation="0dp" card_view:contentPadding="0dp"> <YOUR_LINEARLAYOUT_HERE> </android.support.v7.widget.CardView> 

Prueba esto…

1.create drawable xml (custom_layout.xml):

 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#FFFFFF" /> <stroke android:width="2dp" android:color="#FF785C" /> <corners android:radius="10dp" /> </shape> 

2.add su fondo de vista

 android:background="@drawable/custom_layout" 
 <?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FFFFFF"/> <stroke android:width="3dip" android:color="#B1BCBE" /> <corners android:radius="10dip"/> <padding android:left="3dip" android:top="3dip" android:right="3dip" android:bottom="3dip" /> </shape> 

@ David, acaba de poner el mismo valor de relleno como el trazo, por lo que la frontera puede ser visible, sin tener en cuenta el tamaño de la imagen

El método mejor y más simple sería hacer uso de card_background dibujable en su diseño. Esto también sigue las directrices de diseño de Google. Incluya esto en usted LinearLayout:

 android:background="@drawable/card_background" 

Añada esto a su directorio dibujable y llámelo card_background.xml :

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#BDBDBD"/> <corners android:radius="5dp"/> </shape> </item> <item android:left="0dp" android:right="0dp" android:top="0dp" android:bottom="2dp"> <shape android:shape="rectangle"> <solid android:color="#ffffff"/> <corners android:radius="5dp"/> </shape> </item> </layer-list> 

Utilice CardView para obtener bordes redondeados para cualquier diseño. Use card_view: cardCornerRadius = "5dp" para que cardview obtenga bordes de diseño redondeados.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardCornerRadius="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="15dp" android:weightSum="1"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".3" android:text="@string/quote_code" android:textColor="@color/white" android:textSize="@dimen/text_head_size" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".7" android:text="@string/quote_details" android:textColor="@color/white" android:textSize="@dimen/text_head_size" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> 
 If you would like to make your layout rounded, it is best to use the CardView, it provided many features to make the design beautiful <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="wrap_content" card_view:cardCornerRadius="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight=".3" android:text="@string/quote_code" android:textColor="@color/white" android:textSize="@dimen/text_head_size" /> </LinearLayout> </android.support.v7.widget.CardView> With this card_view:cardCornerRadius="5dp", you can change the radius. 

Una mejor manera de hacerlo sería:

Background_activity.xml

 <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:gravity="fill"> <color android:color="@color/black"/> </item> <item> <shape android:gravity="fill"> <solid android:color="@color/white"/> <corners android:radius="10dip"/> <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" /> </shape> </item> </layer-list> 

Esto funcionará debajo de API 21 también, y le dará algo como esto:

Resultado


Si está dispuesto a hacer un poco más de esfuerzo más mejor control, a continuación, use android.support.v7.widget.CardView con su atributo cardCornerRadius (y establecer el atributo de elevation a 0dp para deshacerse de cualquier acompañamiento sombra con el cardView). Además, esto funcionará desde el nivel API tan bajo como 15.

  • ¿Cómo uso los recursos predeterminados de Android en mi layout xml?
  • Cómo mostrar íconos de elemento en la barra de herramientas Android
  • Desarrollo de Android: error de tema perdido en eclipse ide para archivos xml de diseño
  • Tutorial en el analizador DOM
  • ¿Cómo puedo mostrar una imagen que acabo de sacar de mi cámara en mi aplicación Android?
  • Android Hexágono forma botón que tiene hexágono táctil
  • Android string-array con todos los países en diferentes idiomas
  • Android: Caja blanca no deseada en la parte superior de la pantalla (barra de herramientas?)
  • Diseño de notificaciones personalizadas de Android con RemoteViews
  • Cómo cambiar el color de la línea en EditText
  • ¿Qué significa esto "xmlns: xliff"? XML
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.