dimanche 3 mai 2015

What can I do to make my layout design, more similar to Clean Master app's layout?

What can I do to make my android (xml) design, more similar to this app screenshot?

Basically I've seen this application 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

To be more specific, the parts of the design within the screenshot I'm having difficulty duplicating are:

  • keeping the rounded edges to just the top two corners of the blue section
  • my percentage bar, looks no where near as good as the original
  • The four square white buttons, from the white section of mine look no where near as good. And I can't quite figure out how to fix mine to accomplish the same.
  • The font color and style of the original looks fantastic and well mine doesn't

I have made an attempt in each of the above, as you can see below. But Any help would be, much appreciated. Thank You

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

http://ift.tt/1GQ2DvN

A screenshot of my app design so far:

http://ift.tt/1GQ2FnB

The code for my app design so far:

Activity_main.xml

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4"
xmlns:andrpod="http://ift.tt/GEGVYd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/transparent"
tools:context=".MainActivity">

<RelativeLayout

    android:layout_width="fill_parent"
    android:layout_height="320dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/mainbackground"
    android:id="@+id/Main">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressBar"
        android:layout_width="240dp"
        android:layout_height="240dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="75"
        android:progressDrawable="@drawable/style_circular_fill"
        android:secondaryProgress="10"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="45%"
        android:id="@+id/Percentage"
        android:textColor="#fff"
        android:textSize="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="127dp"
    android:fontFamily="sans-serif-light"
        android:textIsSelectable="false"
        android:layout_marginLeft="69dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="30.93GB/63.57GB"
        android:id="@+id/Size"
        android:textColor="#fff"
        android:textSize="22.5dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="95dp"
        android:fontFamily="sans-serif-light"
        android:layout_marginLeft="30dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Storage"
        android:id="@+id/Type"
        android:textColor="#fff"
        android:textSize="25dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="57dp"
        android:fontFamily="sans-serif-light"
        android:layout_marginLeft="69dp" />

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:id="@+id/progressBar2"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="75"
        android:progressDrawable="@drawable/style_circular_fill"
        android:secondaryProgress="10"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="150dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="77%"
        android:id="@+id/RamPercentage"
        android:textColor="#fff"
        android:textSize="25dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="115dp"
        android:fontFamily="sans-serif-light"
        android:textIsSelectable="false"
        android:layout_marginLeft="300dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Ram"
        android:id="@+id/HardwareType"
        android:textColor="#fff"
        android:textSize="25dp"
        android:fontFamily="sans-serif-light"
        android:layout_alignBottom="@+id/Type"
        android:layout_alignParentEnd="true"
        android:layout_marginRight="37.5dp"
        android:layout_marginBottom="20dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Vulnerability Scanner"
        android:id="@+id/ApplicationTitle"
        android:layout_alignParentTop="true"
        android:layout_alignStart="@+id/Size"
        android:focusableInTouchMode="false"
        android:textColor="#fff"
        android:fontFamily="sans-serif-light"
        android:freezesText="false"
        android:textIsSelectable="false"
        android:textSize="23dp"
        android:layout_marginTop="15dp" />

    <ImageView
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:id="@+id/imageView5"
        android:scaleType="fitXY"
        android:layout_marginLeft="310dp"
        android:src="@drawable/menu"
        android:layout_alignParentTop="true"
        android:layout_alignEnd="@+id/progressBar2"
        android:layout_marginTop="5dp"
        android:layout_marginRight="5dp"
        android:tint="#fff" />

    <LinearLayout
        xmlns:android="http://ift.tt/nIICcg"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="208.5dp"
        android:gravity="top"
        android:visibility="visible">

        <RelativeLayout
            xmlns:tools="http://ift.tt/LrGmb4"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|end">


                <Button
                    android:id="@+id/add_button"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:background="@drawable/add_button_selector"
                    android:gravity="center"
                    android:stateListAnimator="@null"
                    android:text="+"
                    android:textSize="27sp"
                    android:elevation="3dp"
                    android:fontFamily="sans-serif-light"
                    android:textColor="#2C5AA8"
                    tools:ignore="HardcodedText,UnusedAttribute" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

<RelativeLayout
    android:layout_width="192dp"
    android:layout_height="125dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/buttonshape"
    android:id="@+id/Button_A"
    android:layout_marginTop="320dp" >

    <ImageView
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:id="@+id/imageView"
        android:src="@drawable/bin"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="JUNK FILES"
        android:id="@+id/textView"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="190dp"
    android:layout_height="125dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/buttonshape"
    android:id="@+id/Button_B"
    android:layout_marginTop="320dp"
    android:layout_marginLeft="192dp" >

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/imageView2"
        android:src="@drawable/rocket"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:scaleType="fitXY" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="PHONE BOOST"
        android:id="@+id/textView2"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="192dp"
    android:layout_height="125dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/buttonshape"
    android:id="@+id/Button_C"
    android:layout_marginTop="445dp" >

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/imageView3"
        android:src="@drawable/shield"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:scaleType="fitXY" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="ANTIVIRUS"
        android:id="@+id/textView3"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp" />
</RelativeLayout>

<RelativeLayout
    android:layout_width="190dp"
    android:layout_height="125dp"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:background="@drawable/buttonshape"
    android:id="@+id/Button_D"
    android:layout_marginTop="445dp"
    android:layout_marginLeft="192dp"  >

    <ImageView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/imageView4"
        android:src="@drawable/appstore"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:scaleType="fitXY" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="APP MANAGER"
        android:id="@+id/textView4"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="5dp" />
</RelativeLayout>

circularmaterialselected.xml

  <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://ift.tt/nIICcg">
<item>
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="#E1E1E1"/>
    </shape>
</item>
</layer-list>

circularmaterial.xml

   <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://ift.tt/nIICcg">
<item>
    <layer-list>
        <item>
            <shape android:shape="oval">
                <solid android:color="#08000000"/>
                <padding
                    android:bottom="3px"
                    android:left="3px"
                    android:right="3px"
                    android:top="3px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#09000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#10000000"/>
                <padding
                    android:bottom="2px"
                    android:left="2px"
                    android:right="2px"
                    android:top="2px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#11000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#12000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#13000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#14000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#15000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#16000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
        <item>
            <shape android:shape="oval">
                <solid android:color="#17000000"/>
                <padding
                    android:bottom="1px"
                    android:left="1px"
                    android:right="1px"
                    android:top="1px"
                    />
            </shape>
        </item>
    </layer-list>
</item>
<item>
    <shape android:shape="oval">
        <solid android:color="#E1E1E1"/>
    </shape>
</item>
</layer-list>

buttonshape.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://ift.tt/nIICcg" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="0.9dp" android:color="#000" />
            <solid android:color="#FFDDDDDD" />

        </shape>
    </item>

    <item android:top="0.1dp" android:bottom="0.1dp" android:left="0.1dp" android:right="0.1dp">
        <shape
            android:shape="rectangle">
            <stroke android:width="0.9dp" android:color="#FFDDDDDD" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

mainbackground.xml

<shape xmlns:android="http://ift.tt/nIICcg"
    android:shape="rectangle" >

    <solid android:color="#2C5AA8" />
    <corners
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" /></shape>

add_button_selector.xml

<selector xmlns:android="http://ift.tt/nIICcg">
    <!--  <item android:state_selected="true" android:drawable="@drawable/add_button_selected"/> -->
    <item android:state_pressed="true"  android:drawable="@drawable/circularmaterialselected"/>
    <item android:state_pressed="false" android:drawable="@drawable/circularmaterial"/>
</selector>

style_circular_fill.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://ift.tt/nIICcg" >

    <item android:id="@android:id/secondaryProgress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true" >
                <gradient
                    android:centerColor="#A9E2F3"
                    android:endColor="#A9E2F3"
                    android:startColor="#A9E2F3"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true" >
                <gradient
                    android:centerColor="#26ce61"
                    android:endColor="#26ce61"
                    android:startColor="#26ce61"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>

</layer-list>

Aucun commentaire:

Enregistrer un commentaire