Android: dar una vista web de esquinas redondeadas?

Question

Estoy tratando de dar mi webView esquinas redondeadas.

Aquí está mi código:

rounded_webview.xml:

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" android:padding="10dp"> 
<solid android:color="#000"/> 
    <corners 
    android:bottomRightRadius="15dp" 
    android:bottomLeftRadius="15dp" 
    android:topLeftRadius="15dp" 
    android:topRightRadius="15dp"/> 
</shape> 

Y aquí está mi web View:

<WebView 
     android:id="@+id/webView1" 
     android:layout_width="293dp" 
     android:layout_height="142dp" 
     android:layout_gravity="center_horizontal" 
     android:padding="5dip" 
     android:background="@drawable/rounded_webview"/> 

Pero simplemente no funciona! Esquinas no están redondeados ...

Muchas gracias de antemano,

Answer 1

La única manera es envolver elemento WebView por otro punto de vista (FrameLayout por ejemplo), y aplicar fondo esquinas redondeadas en vista externa . Ejemplo:

<FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:paddingTop="10dip" 
     android:paddingBottom="10dip" 
     android:paddingLeft="1dip" 
     android:paddingRight="1dip" 
     android:background="@drawable/white_rounded_area" 
     > 
    <WebView 
      android:id="@+id/web_view" 
      android:layout_width="300dip" 
      android:layout_height="400dip" 
      android:layout_gravity="center" 
      /> 
</FrameLayout> 

Dónde paddingTop y paddingBottom es igual radio desde dibujable/white_rounded_area, paddingLeft y paddingRight es igual anchura del trazo dibujable/white_rounded_area.

Menos de este enfoque es superior y los paneles redondeados pueden tener diferentes colores de fondo con la página web dentro de WebView, especialmente cuando se desplaza la página.

Answer 2

probar este

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle" > 

    <corners 
     android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" 
     android:topLeftRadius="10dp" android:topRightRadius="10dp"/> 

     <stroke 
     android:color="@drawable/black" 
     android:width="3dp"/> 

</shape> 

Answer 3

Este es un pequeño capricho de la vista Web, que tiene un color de fondo por defecto de blanco, dibujado frente cualquier dibujable Tendrá que utilizar el siguiente código para que sea transparente y mostrar su fondo dibujable:

WebView webview = (WebView)findViewById(R.id.webView1);   
webview.setBackgroundColor(0); 

Answer 4

Uso una imagen que se parece a un marco de imagen, donde doy al marco las esquinas redondeadas. Pongo este marco de imagen sobre la vista que intento darle a las esquinas redondeadas.

Esto supera the problem in iBog's solution de paneles de fondo que no funcionan bien.

---

El truco es utilizar un RelativeLayout; coloque su diseño dentro de él. Debajo de su diseño, agregue otro ImageView, estableciendo su background en un marco de imagen de enmascaramiento adecuado. Esto dibujará eso encima de tu otro diseño.

En mi caso, hice un archivo de 9Patch que era un fondo gris, con un rectángulo redondeado transparente cortado de él.

Esto crea la máscara perfecta para su diseño subyacente.

El código XML podría ser algo como esto:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="wrap_content" android:layout_width="fill_parent"> 

    <!-- ... INSERT ANY VIEW HERE ... --> 

    <!-- FRAME TO MASK UNDERLYING VIEW --> 
    <ImageView android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:background="@drawable/grey_frame" 
     android:layout_alignTop="@+id/mainLayout" 
     android:layout_alignBottom="@+id/mainLayout" /> 

</RelativeLayout> 

---

Los detalles completos se pueden encontrar en mi respuesta original aquí:

• Android XML rounded clipped corners