我该怎么做才能使我的android活动设计更像此应用程序屏幕截图图像？

Question

What could I do to make my android activity design more like this app screenshot image?

Basically I've seen this login screen I liked the look of, and I've attempted to make my design match it as closely as possible. But although my design does look similar, it doesn't look anywhere near as good.

What other changes do you think I should make, to make my design look as good as the screenshot below. My code and a screenshot of my design so far are also below

A screenshot of the app, I'm trying to match design of

A screenshot of my app design so far:

The code for my app design so far:

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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.how2evolve.conceptdesign.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Company"
        android:id="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="122dp"
        android:textSize="110px"
        android:focusableInTouchMode="false"
        android:fontFamily="sans-serif"
        android:textStyle="bold|italic"
        />

    <Button
        android:layout_width="100dp"
        android:layout_height="40dp"
        android:text="Log in"
        android:textColor="#ffff"
        android:id="@+id/loginButton"
        android:background="@drawable/loginbutton"
        android:textStyle="bold"
        android:translationZ="-10dp"
        android:layout_below="@+id/linearLayout1"
        android:layout_alignRight="@+id/linearLayout1"
        android:layout_alignEnd="@+id/linearLayout1"
        android:layout_marginTop="33dp" />

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="320.5dp"
        android:layout_height="162dp"
        android:background="@drawable/loginbox"
        android:orientation="vertical"
        android:padding="5dp"
        android:layout_marginTop="220dp"
        android:layout_centerHorizontal="true"
        android:elevation="100dp"
        android:clickable="false">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#393A35"
            android:textSize="14.4dp"
            android:id="@+id/username"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="26dp"
            android:singleLine="true"
            android:editable="true"
            android:autoText="false"
            android:clickable="false"
            android:hint="Username"
            android:textColorHint="#393A35"
            android:enabled="true" />

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#393A35"
            android:textSize="14.4dp"
            android:id="@+id/password"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="40dp"
            android:singleLine="true"
            android:password="true"
            android:editable="true"
            android:hint="Password"
            android:enabled="true"
            android:textColorHint="#393A35"
            android:clickable="false" />

    </LinearLayout>




</RelativeLayout>

Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:background">#282925</item>
    </style>

</resources>

Loginbox.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item >
        <shape
            android:shape="rectangle" android:bottom="3px">

            <solid android:color="#ffffff" />
            <corners
                android:bottomLeftRadius="4dp"
                android:bottomRightRadius="4dp"
                android:topLeftRadius="4dp"
                android:topRightRadius="4dp" /></shape>
    </item>

    <item android:left="20dp" android:right="20dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
            <stroke android:width="1.7dp"  android:color="#BDBDBB" />
        </shape>
    </item>



</layer-list>

Loginbutton.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:elevation="2dp">

    <solid android:color="#0259C8" />
    <corners
        android:bottomLeftRadius="8dp"
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp" /></shape>

Answer 1

I've made a few changes to your layout, I think this would be closer to what you're looking for:

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.how2evolve.conceptdesign.MainActivity">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Company"
    android:id="@+id/textView"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="122dp"
    android:textSize="110px"
    android:focusableInTouchMode="false"
    android:fontFamily="sans-serif"
    android:textStyle="bold|italic"
    />

<Button
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:text="Log in"
    android:textColor="#ffff"
    android:id="@+id/loginButton"
    android:textStyle="bold"
    android:translationZ="-10dp"
    android:layout_below="@+id/linearLayout1"
    android:layout_alignRight="@+id/linearLayout1"
    android:layout_alignEnd="@+id/linearLayout1"
    android:layout_marginRight="10dp"
    android:background="@drawable/rounded_button"
    />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="320.5dp"
    android:layout_height="162dp"
    android:orientation="vertical"
    android:padding="5dp"
    android:layout_marginTop="220dp"
    android:layout_centerHorizontal="true"
    android:background="@drawable/rounded_shape"
    android:elevation="10dp"
    android:clickable="false">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#393A35"
        android:textSize="14.4dp"
        android:id="@+id/username"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="26dp"
        android:singleLine="true"
        android:editable="true"
        android:autoText="false"
        android:clickable="false"
        android:hint="Username"
        android:textColorHint="#393A35"
        android:enabled="true" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:textColor="#393A35"
        android:textSize="14.4dp"
        android:id="@+id/password"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="40dp"
        android:singleLine="true"
        android:password="true"
        android:editable="true"
        android:hint="Password"
        android:enabled="true"
        android:textColorHint="#393A35"
        android:clickable="false" />
</LinearLayout>

Here is the rounded_shape :

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"   >

<solid
    android:color="@color/background_floating_material_light" >
</solid>

<stroke
    android:width="2dp"
    android:color="#C4CDE0" >
</stroke>

<padding
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"    >
</padding>

<corners
    android:radius="10dp"   >
</corners>

And the rounded button whit the gradient:

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"   >

<solid
    android:color="#1E3DD3" >
</solid>

<gradient
    android:angle="90"
    android:endColor="#1E6BD3"
    android:startColor="#1E3DD3"
    android:type="linear" />

<padding
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"    >
</padding>

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

Hope this could be helpful.

Regards Jose