CODEWITHSUNDEEP
androidtransparencyshadow
user3576118
user3576118

Reputation: 375

Android shadow effect on view with elevation doesn't work on background with transparency

I am trying to give a little transparent effect on my EditText. When I first set the EditText background with a little transparency value, it works fine, but when I give the elevation value to get shadowing effect, it just doesn't cooperate.

Here is the layout xml:

<RelativeLayout
    android:id="@+id/searchLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolBar"
    android:background="@drawable/search_layout_background"
    android:elevation="4dp"
    android:layout_margin="16dp">

    <EditText
        android:id="@+id/txtSearch"
        android:layout_width="match_parent"
        android:layout_height="36dp"
        android:background="@drawable/edit_text_border"
        android:inputType="textPersonName"
        android:imeOptions="actionSearch"
        android:paddingLeft="36dp"
        android:paddingRight="36dp"
        android:hint="Search"/>

    <ImageView
        android:id="@+id/btnSearch"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:padding="4dp"
        android:src="@drawable/ic_search"/>

    <ImageView
        android:id="@+id/btnClear"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:padding="4dp"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_clear"/>

</RelativeLayout>

And here is the drawable resource for search_layout_background.xml:

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

    <solid android:color="#FFFFFFFF" />
    <corners android:radius="4dp"/>

</shape>

You can see that the alpha value here is FF, but when I changed it a little, even as little as become FE, the shadow is gone. Any idea on how to give shadowing as well as transparency effect? Thank you

PS: I have just found something funny, if I change the background value of the RelativeLayout into #AAFFFFFF, it actually works. Now I can have a transparency view with shadowing effect. But If I do that, then my layout won't have rounded corner effects, because I put that in my search_layout_background.xml. I don't know why it works while using search_layout_background.xml doesn't.

Upvotes: 0

Views: 970

Answers (2)

Rajan Kali
Rajan Kali

Reputation: 12953

Try wrapping your Search RelativeLayout inside a Cardview

 <CardView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_margin="16dp"
     app:cardElevation="6dp"
     android:layout_below="@+id/toolBar">

        <RelativeLayout
           android:id="@+id/searchLayout"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">

               <EditText../>

               <ImageView../>

               <ImageView../>

        </RelativeLayout>
</CardView>

Upvotes: 2

Sai Jayant
Sai Jayant

Reputation: 376

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/searchLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolBar"
    android:layout_margin="16dp"
    android:background="#eaeaea"
    android:elevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="17dp">

        <EditText
            android:id="@+id/txtSearch"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:background="#00444444"
            android:hint="Search"
            android:imeOptions="actionSearch"
            android:inputType="textPersonName"
            android:paddingLeft="36dp"
            android:paddingRight="36dp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/btnSearch"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:padding="4dp"
        android:src="@drawable/ic_search" />

    <ImageView
        android:id="@+id/btnClear"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_alignParentRight="true"
        android:padding="4dp"
        android:src="@drawable/ic_clear" />

</RelativeLayout>

Upvotes: 0

Related Questions