带有渐变和透明图像背景的Android ImageButton [包含图片]

时间:2013-09-07 23:00:30

标签: android transparency gradient imagebutton

我想在下面提供的图片中看到效果.....可能吗?

我知道如何做一个渐变,我知道如何将一个图像按钮src / bg设置为一个可绘制但我不知道从哪里开始同时拉开两个。

enter image description here

2 个答案:

答案 0 :(得分:2)

实际上非常简单。要通过分层查看一堆视图来避免过度抽取,只需向ColorFilter添加ImageView

imageView.setColorFilter(Color.parseColor("#994dace3"), PorterDuff.Mode.SRC_OVER);

没有添加透支,你可以设置你想要的任何颜色,并尝试不同的PorterDuff混合模式。

示例:

Example Image

答案 1 :(得分:1)

  

我知道如何做渐变,我知道如何设置图像按钮   src / bg是一个可绘制的但我不知道从哪里开始   同时取消两个

我认为你所指的是gradient实际上是一个设置了透明度值的颜色。据我所知,你正在寻找这样的东西:

enter image description here

您可以使用以下布局实现此目的:

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/the_picture"
        android:src="@color/transparent_color" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Message!" />

</RelativeLayout>    

RelativeLayout用于将TextView置于ImageButton之上。 Picture被设置为背景。 src设置为颜色(任何颜色),其透明度值介于00(完全透明)和ff之间(完全不透明)。在上图中,我使用了70的透明度。所以,假设您选择Green(#00ff00),为其添加透明值:#7000ff00并将其添加到res/values/colors.xml。您也可以直接使用它,如下所示。

以下是上图中活动的完整xml代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/original" />

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1" >

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/original"
                android:src="#7000ff00" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerHorizontal="true"
                android:layout_marginTop="20dp"
                android:text="Optional Message!"
                android:gravity="center"
                android:textColor="@android:color/white"
                android:textSize="25sp" />

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

您可以在代码中将自定义字体设置为TextView(如您提供的图片中所示)。