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
A screenshot of my app design so far:
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