Android如何设计EditText和Button

Question

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

Answer 1

看起来他们使用单一渐变 drawable 作为登录布局的背景，然后 EditTexts 有一个几乎透明的白色背景，Button 有一个完全透明的背景。要圆化 EditText/Button 的角，将背景设置为如下所示的可绘制对象：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <solid android:color="@android:color/transparent"/>
    <corners 
        android:bottomRightRadius="2dp" 
        android:bottomLeftRadius="2dp" 
        android:topLeftRadius="2dp" 
        android:topRightRadius="2dp"/> 
</shape>

Answer 2

您需要做的就是创建一个具有透明背景和彩色边框的 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

Answer 3

为EditText和Button使用带边框和透明色的Drawable，整个紫罗兰色背景是图像，而不是渐变drawable。并且还使用 TransitionDrawable 在两个可绘制对象之间进行转换，例如 Instagram。

Answer 4

也许这段代码可以帮到你。这是 activity.xml 文件。使用 TextView 作为 Button.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FF929999">

    <EditText
        android:id="@+id/userName"
        android:layout_width="fill_parent"
        android:layout_height="48.0dip"
        android:layout_marginBottom="16.0dip"
        android:background="@drawable/input_field"
        android:hint="username"
        android:inputType="textNoSuggestions"
        android:paddingLeft="16.0dip"
        android:paddingRight="16.0dip"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="#b3ffffff"
        android:textCursorDrawable="@null"/>

    <TextView
        android:id="@+id/saveButton"
        android:layout_width="match_parent"
        android:layout_height="48.0dip"
        android:background="@drawable/button_border"
        android:gravity="center"
        android:text="Save"
        android:textColor="#ccffffff"
        android:textSize="16sp"
        android:textStyle="bold"/>

</LinearLayout>

input_field.xml 文件应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#1affffff"/>
    <corners android:radius="2.0dip"/>
</shape>

而button_border.xml会是这样的：

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#1affffff"/>
            <stroke 
                 android:width="1.0dip"
                 android:color="#80ffffff"/>
            <corners android:radius="2.0dip"/>
        </shape>
   </item>
   <item>
      <shape android:shape="rectangle">
          <solid android:color="#00000000"/>
          <stroke 
              android:width="1.0dip" 
              android:color="#33ffffff"/>
          <corners android:radius="2.0dip"/>
      </shape>
   </item>

欣赏设计。

Android如何设计EditText和Button

How to design EditText and Button in Android

xml

android

android-edittext

android-button