如何在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> 

享受設計。