This is the 17th day of my participation in the August Text Challenge.More challenges in August

Series of articles

Android enterprise level combat – interface -5

It is not easy to create, please move other platforms not entered in accordance with the rules of the agreement.

preface

Some fans just entered the company internship, want to Android live authentication interface layout, so this series of the fifth article

The following is the main content of this article

First, look at the effect achieved

Ii. Preparation before implementation

1. Contents of dimens. XML file (same file as in the first case)

No more words, please help yourself in the first chapter

2. Contents of ids. XML file (this case is available)

    <item type="id" name="title_bar"/>
    <item type="id" name="back_icon"/>
    <item type="id" name="apply_info_layout"/>
    <item type="id" name="blog_avtar"/>
    <item type="id" name="tip"/>
    <item type="id" name="nickname"/>
    <item type="id" name="edit_name"/>
    <item type="id" name="edit_id"/>
    <item type="id" name="edit_phone"/>
    <item type="id" name="next"/>
    <item type="id" name="agreement_check"/>
    <item type="id" name="apply_result_layout"/>
    <item type="id" name="auth_tip"/>
    <item type="id" name="confirm"/>
    <item type="id" name="agreement"/>
Copy the code

3. Colors. XML file contents (this case is available)

    <color name="jimeng_text_tertiary_light">#ffb2b2b2</color>
    <color name="jimeng_green_light">#ff14c4bc</color>
    <color name="jimeng_gray02">@color/jimeng_text_tertiary_light</color>
    <color name="jimeng_brand_highlight_color">@color/jimeng_green_light</color>
    <color name="jimeng_gray07">@color/jimeng_background_secondary_light</color>
    <color name="jimeng_gray06">@color/jimeng_background_secondary_light</color>
    <color name="jimeng_brand_highlight_color_7f">#7f4eb7ba</color>
Copy the code

4. Contents of the strings. XML file (this case is available)

    <string name="detection_auth"> Real-name authentication </string> <string name="detection_auth_tip"</string> <string name= </string name="detection_auth_name_hint"> Please enter your real name </string> <string name="detection_auth_phone_hint"> Please enter mobile phone number </string> <string name="detection_auth_id_hint"> Please enter id card number </string> <string name="detection_auth_start_facedetection"> Start face authentication </string> <string name="detection_agreement"< p style = "max-width: 100%; clear: both; min-height: 1em"auth_tip_success"> You are authenticated by your real name </string>Copy the code

5.back_nav_selector.xml

<? xml version="1.0" encoding="utf-8"? > <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/navbar_icon_back_light" />
</selector>
Copy the code

6.shape_detection_input_bg.xml

<? xml version="1.0" encoding="utf-8"? > <shape android:shape="rectangle"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:height="65.0 dip" android:width="100.0 dip" />
    <solid android:color="@color/jimeng_gray07" />
    <corners android:radius="32.5 dip" />
</shape>
Copy the code

Three, implementation,

1. At the top of the column

    <RelativeLayout
        android:id="@id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16.0 dip"
            android:src="@drawable/back_nav_selector" />

        <TextView
            android:id="@id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/detection_auth"
            android:textColor="@color/jimeng_black"
            android:textSize="18.0 dip" />
    </RelativeLayout>
Copy the code

The renderings are as follows:

2. Profile picture and name

         <ImageView
                    android:id="@id/blog_avtar"
                    android:layout_width="80.0 dip"
                    android:layout_height="80.0 dip"
                    android:src="@drawable/venda_default_icon_jimeng"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0 dip"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@id/nickname"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="10.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:gravity="center_horizontal"
                    android:text="Ji Meng doesn't eat fish."
                    android:textColor="@color/jimeng_black"
                    android:textSize="18.0 sp" />
Copy the code

The renderings are as follows:

3. Information input bar (one as an example)

                <EditText
                    android:id="@id/edit_id"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0 dip"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="12.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_id_hint"
                    android:paddingLeft="24.0 dip"
                    android:paddingRight="24.0 dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0 sp" />
Copy the code

The renderings are as follows:

4.CheckBox+TextView

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="24.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <CheckBox
                        android:id="@id/agreement_check"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        android:paddingRight="4.0 dip" />

                    <TextView
                        android:id="@id/agreement"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="@string/detection_agreement"
                        android:textColor="@color/jimeng_gray02"
                        android:textSize="12.0 sp" />
                </LinearLayout>
Copy the code

The renderings are as follows:

4. The source code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/jimeng_white">

    <RelativeLayout
        android:id="@id/title_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@id/back_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="16.0 dip"
            android:src="@drawable/back_nav_selector" />

        <TextView
            android:id="@id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/detection_auth"
            android:textColor="@color/jimeng_black"
            android:textSize="18.0 dip" />
    </RelativeLayout>

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/title_bar"
        android:overScrollMode="never"
        android:scrollbars="none">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">

            <LinearLayout
                android:id="@id/apply_info_layout"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical"
                android:visibility="visible">

                <ImageView
                    android:id="@id/blog_avtar"
                    android:layout_width="80.0 dip"
                    android:layout_height="80.0 dip"
                    android:src="@drawable/venda_default_icon_jimeng"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0 dip"
                    android:scaleType="centerCrop" />

                <TextView
                    android:id="@id/nickname"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="10.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:gravity="center_horizontal"
                    android:text="Ji Meng doesn't eat fish."
                    android:textColor="@color/jimeng_black"
                    android:textSize="18.0 sp" />

                <TextView
                    android:id="@id/tip"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="24.0 dip"
                    android:text="@string/detection_auth_tip"
                    android:textColor="@color/jimeng_gray02"
                    android:textSize="13.0 sp" />

                <EditText
                    android:id="@id/edit_name"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0 dip"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="24.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_name_hint"
                    android:paddingLeft="24.0 dip"
                    android:paddingRight="24.0 dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0 sp" />

                <EditText
                    android:id="@id/edit_id"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0 dip"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="12.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_id_hint"
                    android:paddingLeft="24.0 dip"
                    android:paddingRight="24.0 dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0 sp" />

                <EditText
                    android:id="@id/edit_phone"
                    android:layout_width="fill_parent"
                    android:layout_height="65.0 dip"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="12.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:background="@drawable/shape_detection_input_bg"
                    android:gravity="center_vertical"
                    android:hint="@string/detection_auth_phone_hint"
                    android:paddingLeft="24.0 dip"
                    android:paddingRight="24.0 dip"
                    android:singleLine="true"
                    android:textColor="@color/jimeng_black"
                    android:textColorHint="@color/jimeng_gray03"
                    android:textSize="18.0 sp" />

                <TextView
                    android:id="@id/next"
                    android:layout_width="fill_parent"
                    android:layout_height="50.0 dip"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="24.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:background="@drawable/selector_apply_info_next_bg"
                    android:enabled="false"
                    android:gravity="center"
                    android:text="@string/detection_auth_start_facedetection"
                    android:textColor="@color/jimeng_gray03"
                    android:textSize="18.0 sp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24.0 dip"
                    android:layout_marginTop="24.0 dip"
                    android:layout_marginRight="24.0 dip"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <CheckBox
                        android:id="@id/agreement_check"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:checked="false"
                        android:paddingRight="4.0 dip" />

                    <TextView
                        android:id="@id/agreement"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="@string/detection_agreement"
                        android:textColor="@color/jimeng_gray02"
                        android:textSize="12.0 sp" />
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>
Copy the code

Pay attention to

On this screen, you can write a hidden layout. When the user enters this screen after authentication, the layout is gone, and the authentication prompt is displayed.

conclusion

Welcome to leave a message, you can have a private chat with Ji Meng if you have any questions (reply when you see the news), if you want ji Meng to update some interface articles can also be private chat, we will see you in the next article.