android - studio - guardar imagen con fondo transparente paint

Ondulaciones en una forma con un fondo transparente.

Question

Estoy usando la siguiente forma en mi aplicación

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval" >
<solid android:color="@color/primary_light"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="@color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="@android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>

Está allí en mi carpeta dibujable. Ahora estoy actualizando mi aplicación a Lollipop y deseo dar una respuesta en el botón circular que usé. Así que en la carpeta drawable-v21 lo cambié a un selector de onda:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_light">
<item>
<selector>
<item android:state_focused="true">
<shape android:shape="oval">
<stroke android:color="@color/primary_light" android:width="5dp"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="@android:color/transparent"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</selector>
</item>
</ripple>

Pero, desafortunadamente, el efecto dominó no se genera utilizando el dibujo anterior en Lollipop. ¿Es debido a <solid android:color="@android:color/transparent"/> ?

¿Alguien me puede mostrar dónde me he equivocado? Gracias

Answer 1

Después de algunas pruebas y errores, parece que he entendido mal la jerarquía del selector y el item .

Lo siguiente funciona perfectamente.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_light">
<item android:id="@android:id/mask">
<shape android:shape="oval">
<solid android:color="@android:color/white"/>
<size android:height="80dp" android:width="80dp"/>
</shape>
</item>
</ripple>

Answer 2

El siguiente código funciona para formas personalizadas con efecto de ondulación para un botón transparente -

main_activity_buttons_ripple_with_background.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#888888"
tools:targetApi="lollipop">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn''t used anyway -->
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="25dp" />
<!-- This color is needed to be set - doesn''t affect anything -->
<solid android:color="#000" />
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="@android:color/transparent" />
<stroke
android:width="1dp"
android:color="#FFF" />
<corners android:radius="25dp" />
</shape>
</item>
</ripple>

styles.xml

<style name="MainActivityButtonsStyle">
<item name="android:background">@drawable/main_activity_buttons_ripple_with_background</item>
<item name="android:textAllCaps">false</item>
<item name="android:layout_margin">15dp</item>
<item name="android:paddingLeft">20dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:layout_centerHorizontal">true</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">50dp</item>
<item name="android:textColor">#FFF</item>
<item name="android:textSize">18sp</item>

activity_main.xml

<LinearLayout 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"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_alignParentTop="true"
style="@style/MainActivityButtonsStyle"
android:text="@string/button_search_by_id" />
</RelativeLayout>
</LinearLayout>

Answer 3

Esto funciona con un fondo transparente:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight"
android:exitFadeDuration="@android:integer/config_shortAnimTime">
<!-- Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn''t used anyway -->
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="3dp"/>
<!-- This color is needed to be set - doesn''t affect anything -->
<solid android:color="@android:color/white"/>
</shape>
</item>
<!-- This is the background for your button -->
<item>
<!-- Use the shape you want here -->
<shape android:shape="rectangle">
<!-- Use the solid tag to define the background color you want -->
<solid android:color="@android:color/transparent"/>
</shape>
</item>
</ripple>

Esto fue modificado un poco a partir de esta respuesta: Rizado transparente.

Answer 4

Puede tener un efecto de ondulación en el fondo transparente o semitransparente cuando se especifica la máscara de ondulación. La máscara de ondulación es Dibujable, pero solo se utiliza el valor alfa para configurar la ondulación alfa por píxel. Aquí hay un ejemplo para crear programáticamente.

var background = new android.graphics.drawable.GradientDrawable();
background.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
background.setColor(0x77FFFFFF); // semi-transparent background
background.setCornerRadius(10);
background.setStroke(3, 0xFF1144FF); // border color
var mask = new android.graphics.drawable.GradientDrawable();
mask.setShape(android.graphics.drawable.GradientDrawable.RECTANGLE);
mask.setColor(0xFF000000); // the color is irrelevant here, only the alpha
mask.setCornerRadius(5); // you probably want the same corner as the background
var rippleColorLst = android.content.res.ColorStateList.valueOf(
android.graphics.Color.argb(255,50,150,255)
);
// aaaand
var ripple = new android.graphics.drawable.RippleDrawable(rippleColorLst,background,mask);
yourButton.setBackground(ripple);

(Lo siento por el código JavaScript / NativeScript, probablemente uno puede entenderlo)