如今,Android应用程序非常流行。该用户界面通常在“ Google登录”应用中看到。在本文中,我们将在Android中创建一个Google Sign UI。以下是有关如何执行此操作的各个步骤。这会 通过参考本文,帮助初学者在android中构建一些很棒的UI。
分步实施
步骤1:创建一个新项目
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。首先选择空白活动,然后单击下一步。输入您的应用名称,例如“ Google Sign UI ”。然后选择Kotlin / Java作为编程语言。然后选择最小的SDK,例如在此示例中,我们使用的是“ API16:Android 4.1(果冻豆)”。然后单击完成按钮。
步骤2:使用activity_main.xml文件
要创建Google登录界面,我们在XML文件中使用了以下UI组件:
- 相对布局
- 一幅ImageView
- 四个TextView
- 一个EditText
- 一键式
导航到应用程序> res>布局> activity_main.xml,然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。
XML
XML
#ffffff
#2196f3
#2196f3
#2196f3
#2196f3
#FF000000
#FFFFFFFF
Kotlin
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
步骤3:使用colors.xml文件
这 colors.xml是一个XML文件,用于存储资源的颜色。一个Android项目包含3种基本颜色,即:
- colorPrimary
- colorPrimaryDark
- colorAccent
这些颜色也用于android studio的一些预定义资源中。这些颜色需要设置为不透明,否则可能导致出现一些异常。
Reference Article: res/values folder in Android Studio
在应用程序> res>值> colors.xml文件中添加此代码。
XML格式
#ffffff
#2196f3
#2196f3
#2196f3
#2196f3
#FF000000
#FFFFFFFF
步骤4:使用 MainActivity.kt文件
由于我们不使用MainActivity.kt文件,因此不需要在MainActivity.kt文件中编写任何代码。保持MainActivity.kt文件不变。
科特林
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
步骤5:此项目中使用的图像将添加到drawable文件夹中。要浏览图像,请导航至应用程序> res> drawable,然后您将在该文件夹中找到该图像。现在运行该应用程序,然后查看下面的代码输出。要构建和运行该应用程序,您可以在Windows中按shift + f10 ,在Mac中按Ctrl +R 。
Reference Article: How to Add Image to Drawable Folder in Android Studio?
输出界面:
GitHub链接: https : //github.com/bhartik021/GoogleSignInUI