如何在此使用Android Layout和自定义GUI设计

Question

I'm trying to make customized design and style of widgets in my android app. So can anyone suggest me code how to make this kind of GUI in android using xml or any other code. Curves in text fields, button styles, lines, checkbox style, rounded facebook button, line between ----OR----- .....

Answer 1

I create this for you with this link

activity_main.xml

<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">

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/email_shape"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="40dp"
    android:ems="10"
    android:hint="Email"
    android:paddingLeft="20dp"
    android:inputType="text" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/editText1"
    android:layout_below="@+id/editText1"
    android:layout_marginTop="22dp"
    android:layout_toLeftOf="@+id/button1"
    android:background="@drawable/password_shape"
    android:paddingLeft="20dp"
    android:ems="10"
    android:layout_marginRight="-5dp"
    android:hint="Password" />

<Button
    android:id="@+id/button1"
    android:layout_width="60dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/editText2"
    android:layout_alignRight="@+id/editText1"
    android:background="@drawable/go_shape"
    android:text="Go" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="1dp"
    android:layout_height="50dp"
    android:layout_below="@+id/editText2"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="17dp"
    android:background="#ccc" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_alignLeft="@+id/editText2"
    android:layout_alignRight="@+id/button1"
    android:layout_below="@+id/textView1"
    android:background="#ccc" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/textView1"
    android:layout_marginBottom="15dp"
    android:layout_toRightOf="@+id/textView1"
    android:text="forgot password ?"
    android:textColor="#555"
    android:layout_marginLeft="10dp" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/textView3"
    android:layout_marginRight="26dp"
    android:layout_toLeftOf="@+id/textView1"
    android:text="remember me"
    android:textColor="#555" />

<Button
    android:id="@+id/button2"
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:layout_alignTop="@+id/textView4"
    android:layout_toLeftOf="@+id/textView4"
    android:text="Button" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView2"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="17dp"
    android:text="New User Click to"
    android:textColor="#555" />

<TextView
    android:id="@+id/textView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView5"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"
    android:text="Sign Up !"
    android:textColor="#F2272D"
    android:textSize="30sp" />

<TextView
    android:id="@+id/textView7"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:layout_alignLeft="@+id/button2"
    android:layout_below="@+id/textView6"
    android:layout_marginTop="22dp"
    android:layout_toLeftOf="@+id/textView8"
    android:background="#ccc"
    android:layout_marginRight="5dp" />

<TextView
    android:id="@+id/textView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView6"
    android:layout_marginTop="15dp"
    android:layout_toLeftOf="@+id/textView3"
    android:text="or" />

<TextView
    android:id="@+id/textView9"
    android:layout_width="wrap_content"
    android:layout_height="1dp"
    android:background="#ccc"
    android:layout_alignBottom="@+id/textView7"
    android:layout_alignRight="@+id/textView2"
    android:layout_toRightOf="@+id/textView8"
    android:layout_marginLeft="5dp"
    />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/textView2"
    android:layout_alignRight="@+id/textView9"
    android:layout_below="@+id/textView8"
    android:background="@drawable/facebook_shape"
    android:text="facebook" />

email_shape:

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="0dp" />

<solid android:color="#F2F2F2" />


<size
    android:height="60dp"
    android:width="270dp" />

<stroke
    android:width="1dp"
    android:color="#878787" />

password_shape:

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="0dp" />

<solid android:color="#F2F2F2" />

<size
    android:height="60dp"
    android:width="270dp" />

<stroke
    android:width="1dp"
    android:color="#878787" />

facebook_shape:

<corners
    android:bottomLeftRadius="50dp"
    android:bottomRightRadius="50dp"
    android:topLeftRadius="50dp"
    android:topRightRadius="50dp" />

<solid android:color="#3F45F2" />

<size
    android:height="60dp"
    android:width="270dp" />

go_shape:

<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="0dp"
    android:topRightRadius="0dp" />

<solid android:color="#F2272D" />

<size
    android:height="60dp"
    android:width="270dp" />

create all *_shape.xml in drawable folder in res

for remember me you can create two image and change that

and result is

I hope this can help you