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

Question

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:

enter image description here

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>

stackoverflow is for coding problems not design problems/suggestions — tyczj, Jan 13 '15 at 15:28
What does you layout lack? nearly nothing (The `Join` button, maybe). It seems near perfect. Then, I saw... `android:textSize="110px"` you should use **sp** for text sizes. It's the font equivalent of **dp** (there's not enough clarity between sp and dp - just that sp is used by fonts and dp for anything else). Adjust the margins and/or paddings, too. — Phantômaxx, Jan 13 '15 at 15:29
Der Golem, you do see what I mean though. Although my code/design above is very similar, it doesn't look as nice as the original screenshot — , Jan 13 '15 at 15:30
Close enough, to my eyes. I can't see from the picture if you achieved some kind of rounding for the EditTextes - but I can see that you didn't by looking at the layout code. — Phantômaxx, Jan 13 '15 at 15:33
The white shape which holds the edittexts is rounded (Loginbox.xml) — , Jan 13 '15 at 15:35
Basing upon this [post](http://stackoverflow.com/questions/3646415/how-to-create-edittext-with-rounded-corners)'s accepted answer, it's easy to create the upper EditText with a drawable which has only the `top left and right corners rounded` and the lower EditText with a drawable which has the `bottom left and right corners rounded`. — Phantômaxx, Jan 13 '15 at 15:37
Although I'm completely up for modifying the above using the coding advice you suggested. Neither EditText has a background so nothing would be achieved by rounding, they are simply placed within the LinearLayout (with a background of Loginbox.xml, the white shape - which already has rounded corners) — , Jan 13 '15 at 15:40
Rounding the container, won't likely work. Try `android:background="@drawable/rounded_upper_edittext"` (after creating this drawable for your upper EditText). The answer comes from a very experienced user, and got a lot of upvotes - I'd give it a try. I also did something similar, but using TextViews. And it works just fine. — Phantômaxx, Jan 13 '15 at 15:44
Check the image link, the corners are rounded via the use of LinearLayout background etc.: http://i.stack.imgur.com/TFuoF.png I can increase the amount of rounding, but nothing is achieved by using a different methodology to acheive the same result — , Jan 13 '15 at 15:46
I think it's because of this line in your LinearLayout: `android:padding="5dp"`: try removing it. — Phantômaxx, Jan 13 '15 at 16:02

score 1 · Accepted Answer · answered Jan 13 '15 at 18:24

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

This is how it looks on my device.

Hope this could be helpful.

Regards Jose

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

1 Answers1