如何使用 Android Studio 创建 Instagram 登录 UI？

极客们好，现在社交媒体android应用程序非常流行，所以在这里我们将在Android Studio中设计Instagram的登录页面。使用这个初学者可以在他们自己的应用程序中构建一些很棒的 UI。

我们将在本文中构建什么？

在本文中，我们将为 Instagram 设计一个登录页面。为此，我们将使用 Instagram 的徽标、用户的用户名或电子邮件的 EditText、密码的密码字段、登录按钮以及使用 Facebook 登录的选项。下面提供了一个示例图像，以了解我们将在本文中构建的内容。

分步实施

步骤 1：创建一个新项目

• 打开一个新项目。
• 我们将使用Java/Kotlin 语言开发 Empty Activity。保持所有其他选项不变。
• 您可以在方便时更改项目的名称。
• 将有两个名为activity_main.xml 和 MainActivity 的默认文件。Java

如果您不知道如何在 Android Studio 中创建新项目，可以参考如何在 Android Studio 中创建/启动新项目？

第 2 步：将矢量资源添加到可绘制对象

添加以下矢量资产并根据您的选择命名。

Note: If you do not know how to add vector assets in android studio, then use the following article: How to Add Vector Assets in Android Studio?

第三步：添加一个新的资源文件到drawable

右键单击drawable > new > Drawable Resource File > 将文件命名为“background_edit_text” > Ok 。完成上述步骤后，在background_edit_text.xml文件中使用以下代码：

第 4 步：导航到 app > res > values > 字符串.xml 并在其中使用以下提供的代码

XML

    Instagram_login_page_UI
 
    
    Forgot your login details? Get help logging in.
     
    
    Dont have an account? Sign up.

第 5 步：使用 activity_main.xml 文件

导航到app > res > layout > activity_main.xml并在其中使用以下代码。

恭喜！我们已经成功创建了 Instagram 登录页面的 UI。现在运行应用程序并查看下面代码的输出。要构建和运行应用程序，您可以在 Windows 中按 shift + f10，在 Mac 中按 Ctrl + R。

输出界面：