Simple UI Widgets

1.Create UI for simple caculator

- File -> New -> New project -> Empty Activity -> Click Next
- Choose Project name, location, language (java/kotlin), min SDK -> Click Finish
- Click activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">

<TextView
android:id="@+id/tvMath"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"

1
 android:text="0"
android:textSize="24sp"/>

<TextView
android:id="@+id/tvResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:minHeight="48dp"
android:text="0"
android:textSize="24sp"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btnC"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="C"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnOpen"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="("
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnClose"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text=")"
android:textSize="20sp"

2
 android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnDiv"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="/"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="7"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btn8"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="8"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btn9"
android:layout_width="wrap_content"

3
 android:layout_height="match_parent"
android:text="9"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnMul"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="*"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="4"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="5"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

4
 <Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="6"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnSub"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="-"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="1"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="2"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"

5
 android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="3"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnPlus"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="+"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btn0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="0"
android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnDot"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="."

6
 android:textSize="20sp"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

<Button
android:id="@+id/btnResult"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="="
android:textSize="20sp"
android:layout_weight="2"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:backgroundTint="@color/teal_700"/>

</LinearLayout>

</LinearLayout>

2.Create UI for Login activity

- File -> New -> New project -> Empty Activity -> Click Next:

7
- Choose Project name, location, language (java/kotlin), min SDK -> Click Finish:

- Open Res/Values/strings.xml and declare some strings for application:

8
 <resources>
<string name="app_name">MyLoginApp</string>
<string name="sign_in">Sign in</string>
<string name="username">Username</string>
<string name="log_in">LOG IN</string>
<string name="forgot_password">Forgot
Password?</string>
<string name="or_sign_in_with">or sign in with</string>
<string name="todo">TODO</string>
</resources>
- Add some photos to res/drawable:
Click Resources Manager -> Click + -> Import Drawables -> Choose photos
- Design login activity:
+ Click activity_main.xml:

9
 + Choose Code/Split:

+ Write codes:
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background"
tools:context=".MainActivity">

<TextView
android:id="@+id/signin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="50dp"
android:layout_marginBottom="50dp"
android:gravity="center"
android:text="@string/sign_in"
android:textColor="@color/white"
android:textSize="30sp" />

10
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/username"
android:layout_below="@id/signin"
android:background="#30ffffff"
android:hint="@string/username"
android:textColorHint="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:drawablePadding="20dp"/>

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:layout_below="@id/username"
android:background="#30ffffff"
android:hint="Password"
android:textColorHint="@color/white"
android:layout_margin="10dp"
android:padding="20dp"
android:drawablePadding="20dp"
android:inputType="textPassword"/>

<com.google.android.material.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/loginbtn"
android:layout_below="@id/password"
android:text="@string/log_in"
android:backgroundTint="@color/teal_700"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/forgotpass"
android:layout_below="@id/loginbtn"
android:text="@string/forgot_password"
android:textColor="@color/white"
android:layout_centerHorizontal="true"
android:layout_margin="20dp"/>

<TextView

11
 android:id="@+id/others"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/socialicon"
android:layout_centerHorizontal="true"
android:text="@string/or_sign_in_with"
android:textColor="@color/white"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/socialicon"
android:gravity="center"
android:layout_alignParentBottom="true">

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="20dp"
android:src="@drawable/google"
android:contentDescription="TODO"
tools:ignore="ContentDescription" />

<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="20dp"
android:src="@drawable/facebook"
android:contentDescription="@string/todo" />
</LinearLayout>

</RelativeLayout>

- Run app.
3.Create UI for Login activity: (Optional)

12
13