如何設計我的EditText
和Button
,就像在Instagram
應用程序中一樣?我知道我需要使用Drawable
文件來做到這一點,但是我發現的每個鏈接都只顯示瞭如何使用Gradients
來設計,這看起來很可怕。我只想要簡單但不確定從哪裏開始。如何在Android中設計EditText和Button
1
A
回答
3
所有你需要做的是建立一個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
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>
1
使用可繪製與邊框和透明色的EditText和按鈕,整個紫羅蘭色背景是圖像,而不是漸變可繪製。還可以使用TransitionDrawable在Instagram之類的兩個drawable之間進行轉換。
2
可能是這段代碼可以幫到你。這是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>
享受設計。
相關問題
- 1. Android:如何將EditText和Button設置爲相同的高度?
- 2. Android中EditText和Button的大小問題
- 3. 如何把EditText和Button放在一起?
- 4. Button和EditText檢查
- 5. 的Android的ImageButton不是的EditText和Button
- 6. 如何更改EditText和Button的高度?
- 7. 如何在Android UI中設計Button元素?
- 8. 在android中自定義EditText的設計
- 9. 如何設置由頂線對齊的EditText和Button的佈局?
- 10. 如何測試一個包含edittext,button和listview的android項目?
- 11. 在Android中製作EditText和Button相同的高度
- 12. 在Android佈局xml文件中放置TextView,EditText和Button
- 13. EditText和Button高度問題
- 14. EditText和Button上面TabLayout
- 15. 如何在Android的AlertDialog中設置Edittext
- 16. Android如何在Edittext中設置ScrollBar?
- 17. 根據Android中的EditText中的文本啓用和禁用Button
- 18. 在Android中設置long和double值EditText
- 19. 如何計算Android中的EditText值?
- 20. 如何在顯示InputMethodManager時自定義EditText和Button?
- 21. 如何將材質設計風格設置爲禁用EditText(android)?
- 22. Android Radio Button Group with EditText嵌入
- 23. 如何在WindowsFormsHost中設置Button的BackgroundImage?
- 24. Button和EditText上的Android視圖不會遮擋它們
- 25. 如何在運行時設置Android Activity中的Action Button圖標?
- 26. 可以在Android中更改Edittext,Radio Button和CheckBox的字體類型
- 27. 如何計算Edittext的整數值Android
- 28. 如何避免輸入法隱藏WebView底部的EditText和Button
- 29. 如何在Android中的listview中自動計算edittext
- 30. 如何在Android上爲EditText設置MultiLine和imeOptions =「actionDone」?
謝謝!這很好用!我還用你的例子來幫助我使用EditText,它們看起來也很棒! –
很高興聽到,即時通訊在這裏爲此目的,我很高興。謝謝你也有美好的一天! –