Android Image Bulge

Transfer from http://blog.csdn.net/hupei/article/details/52064946

Overview

Today, there is a group of friends asked how the image of the Android images protruding effect, there have been similar requirements, the whole project prompt box is a background, the background has a convex half picture, so with Layer-list wrote a background to achieve.

Thought casually painted a bit more ugly, probably this looks like, from which should not be difficult to see, there are three parts, the top is transparent, the bottom is colored value, the hexagonal star is convex out of the picture. Then let's do it. Create a new resource file, with the Layer-list property, with three item, the first item set the height to 30DP, the second item set top to 30DP, just a vertical layout, the third item contains a bitmap tag, The effect is to maintain the original size of the picture. Code

Layer-list background

2. <? XML version= "1.0" encoding="Utf-8"?>
4. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
6. <item>
8. <!--30DP Transparent --
10. <shape>
12. <size android:height="30DP" />
14. <corners android:radius="10DP" />
16. <solid android:color="@android: Color/transparent" />
18. </shape>
20. </Item>
22. <!--offset 30dp-->
24. <item android:top="30DP">
26. <shape>
28. <corners android:radius="10DP" />
30. <solid android:color="@android: Color/white" />
32. </shape>
34. </Item>
36. <!--use the bitmap label to keep the original size --
38. <item>
40. <bitmap
42. android:gravity="Center_horizontal|top"
44. android:src="@mipmap/ic_sync" />
46. </Item>
48. </layer-list>

Layout set root node background android:background= "@drawable/bg_money_dialog"

2. <? XML version= "1.0" encoding="Utf-8"?><!--background bg_money_dialog-->
4. <linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
6. android:layout_width="match_parent"
8. android:layout_height="wrap_content"
10. android:background="@drawable/bg_money_dialog"
12. android:orientation="vertical">
16. <EditText
18. android:layout_width="match_parent"
20. android:layout_height="wrap_content"
22. android:gravity="Center_horizontal"
24. android:hint="Please enter cash withdrawal amount" />
28. <EditText
30. android:layout_width="match_parent"
32. android:layout_height="wrap_content"
34. android:gravity="Center_horizontal"
36. android:hint="Please enter your withdrawal password" />
40. <Button
42. android:layout_width="wrap_content"
44. android:layout_height="wrap_content"
46. android:layout_gravity="Center_horizontal"
48. android:text="confirm" />
50. </linearlayout>

Dialogfragment Code

2. Public class Checkoutmoneydialog extends Dialogfragment {
6. @Override
8. Public Dialog Oncreatedialog (Bundle savedinstancestate) {
10. Alertdialog.builder Builder = new Alertdialog.builder (Getactivity ());
12. Layoutinflater inflater = getactivity (). Getlayoutinflater ();
14. View view = Inflater.inflate (R.layout.fragment_checkout_money_dialog, null);
16. Builder.setview (view);
18. Dialog Dialog = Builder.create ();
20. return dialog;
22. }
24. }

Run to see the effect
The effect is not good, may need to set EditText layout_margintop layout_margintop= "100DP" after the picture does not overlap on the EditText, can be top or no transparency effect, This reason is due to dialog background, the need for layout transparent, can dialog itself is also a background, we put dialog background transparent [Java]View PlainCopy

1. Dialog Dialog = Builder.create ();
2. window window = Dialog.getwindow ();
3. Window.setbackgrounddrawableresource (Android. R.color.transparent);

Android Image Bulge