membuat form login uber android studio

Hallo blogger kali ini saya ingin berbagi tips tentang membuat desain form login uber. tutorial yang saya buat kali ini sedikit berbeda dari tutorial biasanya yang sering kali membahas tentang pembuatan web dengan php, codeigniter, java desktop dll. Beberapa bulan belakangan saya baru fokus untuk belajar membuat software android dengan android studio. pada kesempatan kali ini saya akan menjelaskan tentang membuat tampilan form login uber dengan menggunakan android studio.

tampilan login uber android studio arifweb

untuk membuat tampilan tersebut cukup buat file xml didalam folder layout android studio dengan nama signin

beberapa file icon yang dibutuhkan adalah sebagai berikut

icon google plus putih
icon facebook putih
icon back hitam

buat menu navigasi signin dan icon back dalam kasus ini file saya beri nama icon_back

<LinearLayout    android:id="@+id/aBack"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:orientation="horizontal"    android:padding="10dp"    android:background="#ffffff"    android:gravity="center_vertical">

    <ImageView        android:id="@+id/imgMapsBack"        android:layout_width="30dp"        android:layout_height="30dp"
        android:src="@drawable/icon_back"/>



    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="SIGNIN"        android:gravity="center"        android:textSize="20dp"
        android:textColor="#000000"/>

</LinearLayout>

kemudian buat tombol signin facebook dan google dengan linearlayout dalam hal ini icon saya beri nama ic_google_white dan ic_facebook_white

<LinearLayout    android:layout_width="match_parent"    android:layout_height="80dp">

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_weight="0.5"        android:id="@+id/btngoogle"        android:layout_below="@+id/linearLayout2"        android:background="#df4b31"        android:layout_marginLeft="10dp"        android:gravity="center"        android:orientation="horizontal">

        <ImageView            android:layout_width="50dp"            android:layout_height="wrap_content"            android:src="@drawable/ic_google_white"/>

    </LinearLayout>

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="50dp"        android:layout_weight="0.5"        android:id="@+id/btnfacebook"        android:layout_below="@+id/linearLayout2"        android:background="#3a5999"        android:layout_marginLeft="10dp"        android:layout_marginRight="10dp"        android:gravity="center"        android:orientation="horizontal">

        <ImageView            android:layout_width="50dp"            android:layout_height="wrap_content"            android:src="@drawable/ic_facebook_white"/>

    </LinearLayout>

</LinearLayout>

lalu buat garis tipis dengan text ditengah.nya

<LinearLayout    android:orientation="horizontal"    android:layout_width="match_parent"    android:layout_height="20dp"    android:layout_below="@+id/btndaftar"    android:layout_alignParentRight="true"    android:layout_alignParentEnd="true"    android:layout_marginTop="10dp"    android:gravity="center"    android:layout_marginLeft="10dp"    android:layout_marginRight="10dp"    android:id="@+id/linearLayout2">



    <View        android:layout_width="match_parent"        android:layout_height="1dp"        android:layout_weight="0.325"        android:background="#bbbbbb"/>

    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="ATAU"        android:layout_gravity="center"        android:gravity="center"        android:textColor="@color/color_black"        android:layout_weight="0.5"/>

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="1dp"        android:layout_weight="0.325"        android:background="#bbbbbb"/>

</LinearLayout>

yang terakhir buat form email password dan tombol button

<TextView
    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceSmall"    android:text="EMAIL"    android:id="@+id/textView2"    android:layout_below="@+id/editText"    android:textColor="@color/color_black"    android:layout_marginLeft="10dp"    android:layout_alignLeft="@+id/editText"    android:layout_alignStart="@+id/editText" />

<EditText    android:layout_height="wrap_content"    android:id="@+id/editText2"    android:layout_below="@+id/textView2"    android:layout_alignParentLeft="true"    android:layout_alignParentStart="true"    android:layout_width="fill_parent"    android:layout_marginLeft="10dp"    android:textSize="14dp"    android:layout_marginRight="10dp"/>

<TextView
    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:textAppearance="?android:attr/textAppearanceSmall"    android:text="PASSWORD"    android:id="@+id/textView3"    android:layout_below="@+id/editText2"    android:textColor="@color/color_black"    android:layout_marginLeft="10dp"    android:layout_alignLeft="@+id/editText"    android:layout_alignStart="@+id/editText" />

<EditText    android:layout_height="wrap_content"    android:id="@+id/editText3"    android:layout_below="@+id/textView3"    android:layout_alignParentLeft="true"    android:layout_alignParentStart="true"    android:layout_width="fill_parent"    android:textSize="14dp"    android:layout_marginLeft="10dp"    android:layout_marginRight="10dp"/>



<Button    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:text="SIGN IN"    android:textColor="@color/color_white"    android:id="@+id/buttonSignin"    android:background="#070910"    android:layout_below="@+id/editText4"    android:layout_alignParentRight="true"    android:layout_alignParentEnd="true"    android:layout_gravity="right"    android:layout_marginTop="10dp"    android:layout_marginRight="10dp"    android:layout_marginLeft="10dp"/>

<TextView     android:layout_marginTop="20dp"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:gravity="center"    android:textColor="@color/color_blue"    android:text="FORGOT PASSWORD"/>

untuk script lengkapnya bisa dilihat dibawah sini

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical"    android:layout_width="fill_parent"    android:layout_height="fill_parent">

    <LinearLayout        android:id="@+id/aBack"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:padding="10dp"        android:background="#ffffff"        android:gravity="center_vertical">

        <ImageView            android:id="@+id/imgMapsBack"            android:layout_width="30dp"            android:layout_height="30dp"
            android:src="@drawable/icon_back"/>



        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="SIGNIN"            android:gravity="center"            android:textSize="20dp"
            android:textColor="#000000"/>

    </LinearLayout>

    <LinearLayout        android:layout_width="match_parent"        android:layout_height="1dp"        android:background="#bbbbbb"/>



    <LinearLayout        android:paddingTop="10dp"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        android:background="@color/color_white">

        <LinearLayout            android:layout_width="match_parent"            android:layout_height="80dp">

            <LinearLayout                android:layout_width="match_parent"                android:layout_height="50dp"                android:layout_weight="0.5"                android:id="@+id/btngoogle"                android:layout_below="@+id/linearLayout2"                android:background="#df4b31"                android:layout_marginLeft="10dp"                android:gravity="center"                android:orientation="horizontal">

                <ImageView                    android:layout_width="50dp"                    android:layout_height="wrap_content"                    android:src="@drawable/ic_google_white"/>

            </LinearLayout>

            <LinearLayout                android:layout_width="match_parent"                android:layout_height="50dp"                android:layout_weight="0.5"                android:id="@+id/btnfacebook"                android:layout_below="@+id/linearLayout2"                android:background="#3a5999"                android:layout_marginLeft="10dp"                android:layout_marginRight="10dp"                android:gravity="center"                android:orientation="horizontal">

                <ImageView                    android:layout_width="50dp"                    android:layout_height="wrap_content"                    android:src="@drawable/ic_facebook_white"/>

            </LinearLayout>

        </LinearLayout>

        <LinearLayout            android:orientation="horizontal"            android:layout_width="match_parent"            android:layout_height="20dp"            android:layout_below="@+id/btndaftar"            android:layout_alignParentRight="true"            android:layout_alignParentEnd="true"            android:layout_marginTop="10dp"            android:gravity="center"            android:layout_marginLeft="10dp"            android:layout_marginRight="10dp"            android:id="@+id/linearLayout2">



            <View                android:layout_width="match_parent"                android:layout_height="1dp"                android:layout_weight="0.325"                android:background="#bbbbbb"/>

            <TextView                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="ATAU"                android:layout_gravity="center"                android:gravity="center"                android:textColor="@color/color_black"                android:layout_weight="0.5"/>

            <LinearLayout                android:layout_width="match_parent"                android:layout_height="1dp"                android:layout_weight="0.325"                android:background="#bbbbbb"/>

        </LinearLayout>





        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textAppearance="?android:attr/textAppearanceSmall"            android:text="EMAIL"            android:id="@+id/textView2"            android:layout_below="@+id/editText"            android:textColor="@color/color_black"            android:layout_marginLeft="10dp"            android:layout_alignLeft="@+id/editText"            android:layout_alignStart="@+id/editText" />

        <EditText            android:layout_height="wrap_content"            android:id="@+id/editText2"            android:layout_below="@+id/textView2"            android:layout_alignParentLeft="true"            android:layout_alignParentStart="true"            android:layout_width="fill_parent"            android:layout_marginLeft="10dp"            android:textSize="14dp"            android:layout_marginRight="10dp"/>

        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textAppearance="?android:attr/textAppearanceSmall"            android:text="PASSWORD"            android:id="@+id/textView3"            android:layout_below="@+id/editText2"            android:textColor="@color/color_black"            android:layout_marginLeft="10dp"            android:layout_alignLeft="@+id/editText"            android:layout_alignStart="@+id/editText" />

        <EditText            android:layout_height="wrap_content"            android:id="@+id/editText3"            android:layout_below="@+id/textView3"            android:layout_alignParentLeft="true"            android:layout_alignParentStart="true"            android:layout_width="fill_parent"            android:textSize="14dp"            android:layout_marginLeft="10dp"            android:layout_marginRight="10dp"/>



        <Button            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:text="SIGN IN"            android:textColor="@color/color_white"            android:id="@+id/buttonSignin"            android:background="#070910"            android:layout_below="@+id/editText4"            android:layout_alignParentRight="true"            android:layout_alignParentEnd="true"            android:layout_gravity="right"            android:layout_marginTop="10dp"            android:layout_marginRight="10dp"            android:layout_marginLeft="10dp"/>

        <TextView             android:layout_marginTop="20dp"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:gravity="center"            android:textColor="@color/color_blue"            android:text="FORGOT PASSWORD"/>

    </LinearLayout>
</LinearLayout>

cukup mudah bukan mohon maaf apabila dalam tutorial kali ini kurang begitu jelas karena ini merupakan tutorial saya tentang android, semoga bermanfaat. jika masih ada yang ingin ditanyakan jangan ragu untuk memasukkan ke kolom komentar terima kasih atas kunjunganya :)

membuat form login uber android studio

Author : Muhammad Arif

Share this

membuat form login uber android studio

Author : Muhammad Arif

Share this

Related Posts