我该怎么做才能使我的 android activity 设计更像这个应用程序屏幕截图?
What could I do to make my android activity design more like this app screenshot image?
我该怎么做才能使我的 android activity 设计更像这个应用程序屏幕截图?
基本上我已经看到了我喜欢的这个登录屏幕的外观,并且我试图让我的设计尽可能地匹配它。但是,尽管我的设计确实看起来很相似,但它看起来并没有那么好。
您认为我应该做哪些其他更改,使我的设计看起来像下面的屏幕截图一样好。 我的代码和到目前为止我的设计截图也在下面
应用程序的屏幕截图,我正在尝试匹配
的设计
到目前为止我的应用程序设计的屏幕截图:
到目前为止我的应用程序设计代码:
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>
我对您的布局做了一些更改,我认为这会更接近您要查找的内容:
<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>
这里是 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>
还有带有渐变的圆形按钮:
<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"/>
希望这对您有所帮助。
问候
何塞
我该怎么做才能使我的 android activity 设计更像这个应用程序屏幕截图?
基本上我已经看到了我喜欢的这个登录屏幕的外观,并且我试图让我的设计尽可能地匹配它。但是,尽管我的设计确实看起来很相似,但它看起来并没有那么好。
您认为我应该做哪些其他更改,使我的设计看起来像下面的屏幕截图一样好。 我的代码和到目前为止我的设计截图也在下面
应用程序的屏幕截图,我正在尝试匹配
的设计到目前为止我的应用程序设计的屏幕截图:
到目前为止我的应用程序设计代码:
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>
我对您的布局做了一些更改,我认为这会更接近您要查找的内容:
<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>
这里是 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>
还有带有渐变的圆形按钮:
<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"/>
希望这对您有所帮助。
问候 何塞