如何使UI与附加图像类似。 。

时间:2017-05-06 09:50:58

标签: android android-layout android-alertdialog

我想制作以下用户界面enter image description here

我已经尝试过,类似的用户界面在XML中可见,但是当我在设备中填充它时。苹果图像位于对话框内(应该在其上方一半上方,一半下方)。这是我的XML:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="300dp"
    android:layout_height="180dp"
    android:padding="10dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="170dp">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_marginTop="40dp"
            android:orientation="vertical"
           >



            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/main_container"
                android:orientation="vertical"
                android:background="#fff"
                android:layout_marginTop="-10dp"
                android:paddingTop="30dp"
                android:paddingBottom="10dp"
               >

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="40dp"
                    android:gravity="center"
                    android:orientation="horizontal"
                    android:weightSum="10">

                    <ImageView
                        android:id="@+id/name_iv"
                        android:layout_width="0dp"
                        android:layout_height="25dp"
                        android:layout_gravity=""
                        android:layout_weight="1.5"
                        app:srcCompat="@drawable/user_icon" />

                    <EditText
                        android:layout_width="0dp"
                        android:id="@+id/et_fullName"
                        android:layout_height="wrap_content"
                        android:layout_weight="8"
                        android:textColor="#fff"
                        android:inputType="text"
                        android:background="@android:color/transparent"
                        android:hint="Full Name"
                        android:textColorHint="#333"
                        android:imeOptions="actionNext"
                        />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:layout_marginBottom="20dp"
                    android:layout_marginLeft="13dp"
                    android:background="#333" />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center"
                    android:background="@drawable/rounded_button"
                    android:paddingLeft="20dp"
                    android:paddingRight="20dp"
                    android:text="Submit"
                    android:textAllCaps="false"
                    android:textColor="#fff"
                    android:textSize="@dimen/textFormSize"
                    android:textStyle="bold" />



            </LinearLayout>
        </LinearLayout>

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/bannerimage"
            android:scaleType="fitXY"
            android:layout_gravity="center_horizontal"
            />
    </FrameLayout>

</LinearLayout>

在我的活动中,我做到了这一点:

 tv_pay_now.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            final Dialog dialog = new Dialog(OrderSummaryActivity.this);

            dialog.setContentView(R.layout.otp_dialog);
            dialog.setTitle("OTP Verification");
            dialog.setCancelable(true);
            dialog.show();
        }
    });

请告诉我如何制作这个UI?谢谢

1 个答案:

答案 0 :(得分:0)

  

首先在您的活动中添加   dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);对话框

final Dialog dialog = new Dialog(this);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.setContentView(R.layout.otp_dialog);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.setCancelable(true);
    dialog.show();

这是示例XML

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/transparent" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="57dp"
        android:background="#fff"
        android:orientation="vertical" >
    </LinearLayout>

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@mipmap/ic_launcher_round" />

</RelativeLayout>

输出图像

enter image description here