android - 如何在Android中设计EditText和Button

Question

如何像在 Instagram 应用程序中一样设计我的 EditText 和 Button？我知道我需要通过使用 Drawable 文件来做到这一点，但我找到的每个链接都只展示了如何使用看起来很糟糕的 Gradients 进行设计。我只想做一些简单的事情，但不确定从哪里开始。

Answer 1

您需要做的就是创建一个具有透明背景和彩色边框的 Button 或 Edittext 或 TextView，例如:

Activity 代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorpink">

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Transparent Button with blue border"
    android:id="@+id/button"
    android:padding="10dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/transparent_button_selector"
    android:textColor="@color/colorPrimary"
    android:textAllCaps="false"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

transparent_button_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed state -->
<item android:state_pressed="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners  android:radius="22dp" />

</shape></item>

<!-- focused state -->
<item android:state_focused="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
<!-- normal state -->
<item><shape>

    <solid android:color="@android:color/transparent"/>
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
</selector>

颜色:

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorpink">#AAFF4081</color>

它看起来像:

您可以更改 transparent_button_selector.xml ，更改颜色、半径值、边框并尝试先创建您的布局，然后再考虑背景。是的，我也会说渐变。这里有一个问题:changing-gradient-background-colors-on-android-at-runtime

你也可以玩背景色，如果你使用像#33FFFFFF这样的透明白色，那么结果会像:http://imgur.com/poGN2nn