Android UI components with shadows

Question

I have two UI components I want to have in my Android app.

The first one is (kinda radio button) text when tapped/clicked appers in inset shadow bubble:

Radio button

See HTML demo: http://fiddle.jshell.net/Vq2A3/1/show/

The second is draggable card when being dragged stands out by bigger shadow:

Draggable card

See HTML demo: http://fiddle.jshell.net/yVnz4/2/show/

What is the idiomatic way to implement these things in Android - i.e. two-state components, rounded-corners shape, inset shadow, changeable box shadow, dragging?

I want to learn Android, so I don't need ready-made components. I prefer links to resources describing how to do this.

Thank you for your answers.

score 0 · Answer 1 · answered Mar 08 '13 at 22:44

You can set corners, shadow and more in xml file e.g.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#449def" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="3dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#449def"
                android:endColor="#2f6699"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#2f6699" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

For drag buttons try something like this:

      button.setOnTouchListener(new OnTouchListener() {
         public boolean onTouch(View v, MotionEvent me){
             if (me.getAction() == MotionEvent.ACTION_MOVE  ){
                LayoutParams params = new LayoutParams(v.getWidth(), v.getHeight(),(int)(me.getRawX() - (v.getWidth() / 2)), (int)(me.getRawY() - (v.getHeight())));
                v.setLayoutParams(params);
             }
             return true;
         }
     });

There are a lot of examples. Search in google, for example: "custom button", "drag and drop button"

Thank you for your answer. But the example you show does not drop any shadow. Also I haven't found anything in Android documentation about shadows in XML drawables. — Jakub Kulhan, Mar 10 '13 at 20:04
You could use 9-patch image that already has shadow on it. If you want only inside shadow check out this [thread](http://stackoverflow.com/questions/5197892/add-shadow-to-custom-shape-on-android) — M G, Mar 10 '13 at 20:39

score 0 · Answer 2 · answered Mar 09 '13 at 00:52

0

Another thing you could do for the buttons is use an image button and onClick change the picture of the button withmyButton.setImageDrawable(Image_drawable);

answered Mar 09 '13 at 00:52

user1762507

772
9
32

It's not just buttons. If it was easy, I would use shadows everywhere I could :) – Jakub Kulhan Mar 10 '13 at 20:09

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

It seems the best way is to use a 9-patch image.

Android UI components with shadows

3 Answers3