Android Material Desaign Login Form XML UI Desaign

00.37.00



Pada Tutorial kali ini, saua akan menunjukan bagaimana membuat material desaign login form XML UI desaign. Beberapa aplikasi android memiliki login dan registrasi system. Disini  saya hanya mengunakan XML untuk membuat login screen. anda dapat membuat drawable XML file untuk picture profile background untuk membuatnya bulat. Dan anda dapat mengunakan icon yang tersedia di sini

Android example: Android Material Desaign Login Form XML UI Desaign

let's start dengan membuat projek baru dengan nama Android Material Design Login Form or some else.

Import Desaign Support Library

pada projek ini saya mengunakan TextInputLayout yang sudah tersedia di android desaign support libarary. So anda harus menambahkan android desaign library di buld.gradle file jika belum ada.

build.gradle
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.1.0'
compile 'com.android.support:design:23.1.0'
}
 XML layout File

pada file layout XML saya mengunakan Relativelayout, LiniearLayout, TextInputLayout, EditText, Button dan TextView with different xml attribute untuk membuat material desaign login form UI desaign.

res/layout/ material_design_login_form.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5fb0c9"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<TextView
android:id="@+id/login_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="22dp"
android:gravity="center_horizontal"
android:text="Account Login"
android:textColor="#fff"
android:textSize="26sp"
android:textStyle="bold" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/login_title"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="30dp">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/user"
android:drawableTint="#FF4081"
android:singleLine="true"
android:hint="User Name"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:singleLine="true"
android:drawableLeft="@drawable/lock"
android:drawableTint="#FF4081"
android:hint="Password"
android:inputType="numberPassword" />
</android.support.design.widget.TextInputLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingTop="5dp"
android:text="Forgot Password?" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="22dp"
android:background="#d67601"
android:text="Sign in"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="18sp" />
</LinearLayout>
</RelativeLayout>
<ImageButton
android:id="@+id/user_profile_photo"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/login_title"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:background="@drawable/user_profile_image_background"
android:elevation="4dp"
android:src="@drawable/profile_icon" />
</RelativeLayout>
 XML Drawable File

Buat file XML baru pada res/drawable untuk membuat picture profile backgroun menjadi bulat.

es/drawable/ user_profile_image_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp" />
<solid android:color="#5fb0c9" />
<stroke
android:width="5dip"
android:color="#3da8c9" />
<padding
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp" />
</shape>

Java Activity File

Default code of java activity file will look like this.

src/ MaterialDesignLogInForm.java
package viralandroid.com.androidxmluserinterfacetutorial;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class MaterialDesignLogInForm extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.material_design_login_form);
}
}
String xml File

res/values/strings.xml
<resources>
<string name="app_name">Android Material Design Login Form</string>
</resources>



Sekarang run Android Material Desaign Login Form XML UI Desaign maka akan muncul tampilan seperti screnshoot di atas.

Share This Story

Tags:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor Aenean massa.

You Might Also Like

1 komentar

  1. Anonim3 Februari 2022 pukul 07.25

    The Biggest & Most Trusted Coin Casino Sites 2021
    We've ranked and reviewed the best Coin Casino sites 2021. Read our in-depth 코인카지노 조작 reviews to find out which ones make the most

    BalasHapus

Popular Posts

Like us on Facebook

Flickr Images