CODEWITHSUNDEEP
androidmaterial-design
h_k
h_k

Reputation: 1714

Android material design - Rounded corner view not correctly showing rounded shadow

I am trying to upgrade my app to incorporate material design. I have messed around a little with the elevation and translation elements, and have run into a problem. Namely, my rounded-corner buttons have shadows that still have corners. I am not sure exactly why this may be the case. I have followed the Defining Shadows and Clipping Views tutorial, but have not managed to solve the problem.

enter image description here

So here is what I currently have. The light appears to be aimed downwards and to the left. I can see that the corners are indeed rounded, but the shadows are not. Looking closely at the bottom left corner of each button, I can see that the button is rounded, but there is a little piece of background with a corner still attached. All buttons have an elevation of 2dp. I am not sure how to remove this tiny piece of background.

Here is what the xml looks like:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_gravity="center">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/standard_button_selector"
        android:elevation="2dp"
        android:layout_marginBottom="1dp"
         />

This uses a background selector:

<?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="rectangle">
        <solid
        android:color="@drawable/button_standard_pressed" />
        <corners 
            android:radius="15dp" />
    </shape>
  </item>
  <item android:state_focused="true" >
    <shape 
        android:shape="rectangle">
        <solid
            android:color="@drawable/button_standard_focused"/>
        <corners 
            android:radius="15dp" />
    </shape>
  </item>
  <item>
    <shape 
        android:shape="rectangle">
        <solid
            android:color="@drawable/button_standard_default"/>
        <corners 
            android:radius="15dp" />
    </shape>
  </item>
</selector>

Corners have a 15dp radius, and everything appears to look correct for everything except the shadows. How can I fix it?

EDIT:

This was simply a problem with viewing the screen on Eclipse's Graphical Layout preview. As soon as I loaded this up on an actual device, it worked.

Upvotes: 4

Views: 2354

Answers (1)

h_k
h_k

Reputation: 1714

This was simply a problem with viewing the screen on Eclipse's Graphical Layout preview. As soon as I loaded this up on an actual device, it worked.

Upvotes: 3

Related Questions