1. ホーム
  2. Android Studio

Andriod StudioのEditText入力ボックスの美化

2022-02-17 04:44:03
<パス

入力ボックスの以下の美化を実装する。

この表示の構造は、LinearLayoutの中にEditTextがあり、図の外郭はLinearLayoutのスタイルになっています。

LinearLayoutのセクションです。

  1. ページを操作したいDesignページに、適切な大きさのLinearLayoutを追加します。
  2. res>values>styles.xml にスタイルを追加します。
<style name="InputBoxStyle">
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:layout_marginLeft">18dp</item>
        <item name="android:layout_marginRight">18dp</item>
        <item name="android:background">@drawable/border_input_box</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">horizontal</item>
    </style>


  1. res>drawableにborder_input_box.xmlを追加する、コード。

<?xml version="1.0" encoding="utf-8"? >
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <stroke
        android:width="1dp"
        android:color="@color/border_color" />
</shape>



  1. LinearLayout xml ファイルに以下を追加:スタイルを適用する
 style="@style/InputBoxStyle"


この時点で、LinearLayoutセクションは完成しています。

EditTextセクションです。

  1. 先に追加したLinearLayoutにEditText(Plain Text)をドラッグします。

  2. res>values>styles.xml にスタイルを追加します。

     <style name="EditTextStyle">
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginRight">10dp</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:background">@null</item>
    </style>


  1. EditText xml ファイルに以下の文章を追加してスタイルを適用します。
   style="@style/EditTextStyle"