如何在Android中设计EditText和Button

Question

如何设计我的EditText和Button，就像在Instagram应用程序中一样？我知道我需要使用Drawable文件来做到这一点，但是我发现的每个链接都只显示了如何使用Gradients来设计，这看起来很可怕。我只想要简单但不确定从哪里开始。

Answer 1

所有你需要做的是建立一个Button或Edittext或TextView与透明背景和彩色边框，如：

活动码：

<?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

你也可以用backgorund色玩，如果你使用一些白色透明状#33FFFFFF那么结果会是怎样：http://imgur.com/poGN2nn

Answer 2

看起来他们使用的是单个梯度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 3

使用可绘制与边框和透明色的EditText和按钮，整个紫罗兰色背景是图像，而不是渐变可绘制。还可以使用TransitionDrawable在Instagram之类的两个drawable之间进行转换。

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> 

享受设计。