搭建一個簡單的帶有科技感的頁面，想了一下，如何能做的在炫酷點，於是我就想著做一個有動態效果的登入頁面。

首先找一個帶有動態效果的背景圖片，以此圖片作為背景。

放入後，登入頁面搭建後，會發現這個gif動圖會變成一個靜態圖顯示，不會有動態效果，這個時候就需要引入一個外掛，來顯示動圖效果了。

直接引入依賴就行行了，在build.gradle(:app）的dependencies新增。

dependencies {

    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.google.android.material:material:1.2.1
 
'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'

    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0
 
'


    implementation 'pl.droidsonroids.gif:android-gif-drawable:1.2.+'//jif圖片外掛
}

接下來就是介面程式碼：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools
 
"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"

    tools:context=".MainActivity">

    <pl.droidsonroids.gif.GifImageView

        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:background="@drawable/loginback">

    </pl.droidsonroids.gif.GifImageView>
  
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="120px"
        android:layout_centerHorizontal="true"
        android:alpha="0.9"
        android:background="@drawable/logo"/>
    <EditText
        android:layout_centerHorizontal="true"
        android:id="@+id/et_1"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:layout_marginRight="60px"
        android:layout_marginLeft="60px"
        android:hint="使用者名稱"
        android:background="@drawable/login_userorpassward_css"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="200dp"
        android:drawableLeft="@drawable/username"
        android:drawablePadding="10dp"
        />


    <EditText
        android:layout_centerHorizontal="true"
        android:id="@+id/et_2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:textSize="16sp"
        android:hint="密碼"
        android:layout_marginLeft="60px"
        android:layout_marginRight="60px"
        android:inputType="textPassword"
        android:layout_below="@id/et_1"
        android:background="@drawable/login_userorpassward_css"
        android:layout_marginTop="50dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:drawableLeft="@drawable/userpassward"
        android:drawablePadding="10dp"
        />
    <Button
        android:id="@+id/btn_start"
        android:layout_below="@+id/et_2"
        android:layout_marginTop="200px"
        android:layout_marginLeft="60px"
        android:layout_marginRight="60px"
        android:background="@drawable/login_loginbtn_css"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="登入"
        android:textSize="22dp"
        android:textColor="#b3FFFFFF"
        />

</RelativeLayout>


</FrameLayout>

給使用者名稱和密碼輸入框新增一個xml樣式 ：login_userorpassward_css  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#e6000080"/>
            <stroke android:width="1dip" android:color="#000080" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#b3000080"/>
            <stroke android:width="1dip" android:color="#000080" />
            <corners android:radius="5dp"/>
        </shape>
    </item>
</select>

跑起來看看效果：