如何在Android中设计编辑文本和按钮

如何在

Instagram

应用程序中设计我的

EditText

和

按钮

？我知道我需要使用

Drawable

文件来实现这一点，但我找到的每个链接都只显示了如何使用

渐变进行设计，这看起来很可怕。我只想要一些简单的东西，但不知道从哪里开始

看起来他们在登录布局的背景中使用了一个渐变
可绘制的
，然后
editText
有一个几乎透明的白色背景，
按钮有一个完全透明的背景。要使
EditText
/
按钮的角变圆，请将背景设置为如下所示的可绘制背景：

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

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

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

您只需创建一个带有透明背景和彩色边框的
按钮
或
编辑文本
或
文本视图
：

活动代码：

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

颜色：

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

#3F51B5
#303F9F
#FF4081
#AAFF4081

它看起来像：


您可以更改
透明按钮\u selector.xml
，更改颜色、半径值、边框，并尝试先创建布局，然后考虑背景。是的，我也会说梯度。这里有一个问题：

此外，您还可以使用背景颜色，如果您使用少量透明白色，如
#33FFFFFF
，则结果将如下所示：
使用带边框和透明颜色的可绘制文本和按钮，整个紫色背景是图像，而不是渐变可绘制的。也可以使用TransitionDrawable在Instagram等两个绘图工具之间进行转换。
这段代码可能会对您有所帮助。这是activity.xml文件。使用
TextView
作为
按钮

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

而
按钮\u border.xml
将如下所示：

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

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

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




喜欢这个设计。
谢谢！真是太棒了！我还使用了你的例子来帮助我编辑文本，它们看起来也很棒！很高兴听到这个消息，我在这里就是为了这个目的，我很高兴。也谢谢你，祝你今天愉快！这是一个很好的背景，看起来像instagram，很像instagram，谢谢。