Question

What I am trying to do is put few buttons, made from PNG image, that has opaque border and semi transparent other area, over an image that will be controlled (zoomed, panned).

Something like that:

What is the best way to achieve this? What layout and what views should be used? Maybe there is similar tutorial to such app design.

Answer 1

I guess I’d use a relative layout and skinned buttons. The only issue you’ll have with skinned buttons is that you’ll need to be sure you are using 32bit pngs (with a transparency layer) as your button skins.

Here’s a code chunk for doing button skins – they get set as the background of the button object and you place them in the drawable folder along side your images.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
      android:drawable="@drawable/btn_back_down" /> <!-- pressed -->
    <!-- item android:state_focused="true"
      android:drawable="@drawable/button_focused" /--> <!-- focused -->
    <item android:drawable="@drawable/btn_back_up" /> <!-- default -->
</selector>