Question

Scenario

Congratulations! Your App Development Proposal has received approval after being shared with both your client and the mobile application development team at Mobile2App. It is now time to construct a UI based on your original proposal. You must supply the client with a complete UI design that is easy to understand and demonstrates a creative theme and layout for the finished application.

Directions

Open the Android Studio Layout Editor to begin creating the UI for your app. Be sure to use the Install Android Studio resource and the Build a Simple User Interface resource, both linked in the Supporting Materials section, to get started with this software. Throughout this project, continue to reference the App Development Proposal you completed in Project One while paying particular attention to the section on UI Design. Also be sure to let the Android Design and Quality Guidelines document, which is linked in the Supporting Materials section, guide your decisions.

Your completed UI should include all of the screens needed for your app to operate but the UI will not yet be functional. You will only be creating the UI components for this project as the supporting code will be completed in Project Three.

1. Create UI with appropriate design elements to support a user logging in (1 screen). Your UI must include a login screen, that contains the following:
   • Fields for the user to provide a username and password
     • Note that the password element should be configured in a way that obscures any text that is typed into the field. This means the text will need to be visually converted into dots.
   • A button for the user to submit their username and password
   • A button for the user to create a new login if it is their first time using the application
     • Note that to simplify the account creation process, you can use the same login screen for this purpose. Create a button that will add the username and password into the database if it does not already exist.
   • Any other fields or elements that are necessary to make your application visually appealing, intuitive, and usable

Answer 1

-here layout name is activity_main.xml
-here one EditText box is for username of input type (textPersonName)
-and one is for password of input type (textPassword)
-there are three buttons 1)Login for login purpose 2)Forgotpassword for getting the password if we forgot 3)Register button for registering the new user
-here i used some background color also for good UI

-----------------------------------------------------
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/colorAccent"
tools:context=".MainActivity">

<EditText
android:id="@+id/etlemail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="200dp"
android:layout_marginRight="40dp"
android:background="#ffffff"
android:ems="10"
android:gravity="center_horizontal"
android:hint="User Name"
android:inputType="textPersonName"
android:textColor="@android:color/black"
android:textSize="22dp"
android:textStyle="bold" />

<EditText
android:id="@+id/etlpwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginRight="40dp"
android:background="#ffffff"
android:ems="10"
android:gravity="center_horizontal"
android:hint="Password"
android:inputType="textPassword"
android:textColor="@android:color/black"
android:textSize="22dp"
android:textStyle="bold" />

<Button
android:id="@+id/btnlogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="40dp"
android:layout_marginTop="20dp"
android:layout_marginRight="40dp"
android:background="#FF5722"

android:text="Login"
android:textSize="22dp"
android:textStyle="bold" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:orientation="horizontal">

<Button
android:id="@+id/btnforgotpwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_weight="1"
android:background="#FF5722"

android:text="Forgot Password"
android:textSize="20dp"
android:textStyle="bold"
/>

<Button
android:id="@+id/btnregister"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:layout_weight="1"
android:background="#FF5722"

android:text="Register"
android:textSize="20dp"
android:onClick="register"
android:textStyle="bold" />

</LinearLayout>

</LinearLayout>

----------------------------------------------------------------------------------------------------------------------------------------------------

-here i am sharing the output screen also