When you see the button on the main interface of Budweiser beer client, it looks novelty. First, watch the film:
Pay attention to the arrow I drew in the figure. At that time, the black circle of the mouse was clicked, and then the button was pressed (yellow stroke)
At the beginning, I was very curious to see this effect. I don't know how to implement it. Later I thought about it. The whole beer can is an image (imageview), which is placed on top of three buttons, then, the most important thing is to set the image as inaccessible focus, that is, Android: focusable = "false". In this way, you can simply get a line!
To verify my ideas, I created a project for testing. The results are shown in:
The Code is as follows:
Main. xml:
<? XML version = "1.0" encoding = "UTF-8"?>
<Relativelayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Layout _; fill_parent"
Android: layout_height = "fill_parent"
>
<Linearlayout
Android: Layout _; match_parent"
Android: layout_height = "wrap_content"
Android: Orientation = "vertical">
<Button
Android: Layout _; match_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "10dp"
Android: text = "button1"
Android: Background = "@ drawable/button_selector"
/>
<Button
Android: Layout _; match_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "10dp"
Android: text = "button2"
Android: Background = "@ drawable/button_selector"
/>
<Button
Android: Layout _; match_parent"
Android: layout_height = "wrap_content"
Android: layout_margin = "10dp"
Android: text = "button3"
Android: Background = "@ drawable/button_selector"
/>
</Linearlayout>
<Imageview
Android: Layout _; wrap_content"
Android: layout_height = "wrap_content"
Android: src = "@ drawable/bg2"
Android: focusable = "false"
/>
</Relativelayout>
Button_selector.xml:
<? XML version = "1.0" encoding = "UTF-8"?>
<Selector
Xmlns: Android = "http://schemas.android.com/apk/res/android">
<Item Android: state_pressed = "true">
<Shape>
<! -- Solid, that is, filling -->
<Solid Android: color = "# 8470ff"/>
<! -- Stroke -->
<Stroke
Android:; 2dp"
Android: color = "# FFFF00"/>
<! -- Rounded corner -->
<Corners
Android: radius = "5dp"/>
<Padding
Android: Left = "10dp"
Android: Top = "10dp"
Android: Right = "10dp"
Android: Bottom = "10dp"/>
</Shape>
</Item>
<Item>
<Shape>
<! -- Solid, that is, filling -->
<Solid Android: color = "# 8470ff"/>
<Corners
Android: radius = "5dp"/>
<Padding
Android: Left = "10dp"
Android: Top = "10dp"
Android: Right = "10dp"
Android: Bottom = "10dp"/>
</Shape>
</Item>
</Selector>
If you have any questions about the use of shape in button_selector.xml, refer to my last article: Use of shape in Android.
Okay, that's all ......