Android：画像が入った半透明の編集テキストを作成

Question

私は、ユーザー名とパスワードのフィールドを追加するログインページがあるAndroidプロジェクトに取り組んでいます。私が持っているデザインは、この半透明の方法で、イメージを内部に入れておく必要があります。どのようなアイデアを私はそれを半透明にし、それを形にするためにEditTextを変えることができますか、それを透明にするために背景をnullまたは色などで設定しますが、これは何も見つかりませんでした。

デザイン：

私は相対的なレイアウトを使用して、右側のこれらのアイコン午前、私は別のPNGファイルでそれらを持っています。私はEdittextの中に直接それらを追加することができますが、私は、ユーザー名とパスワードが長いと、画像の上に行くことを心配しています。そのための戦略はありますか？ありがとうございました。

コード：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:background="@drawable/background" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 


    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textAppearance="?android:attr/textAppearanceLarge" 
     android:text="Text" 
     android:id="@+id/textView" 
     android:textSize="32sp" 
     android:textColor="@color/common_signin_btn_dark_text_default" 
     android:layout_marginTop="75dp" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" /> 

    <EditText 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/editText" 
     android:layout_below="@+id/textView" 
     android:layout_marginTop="41dp" 

     android:layout_alignRight="@+id/textView" 
     android:layout_alignEnd="@+id/textView" 
     android:layout_alignLeft="@+id/textView" 
     android:layout_alignStart="@+id/textView" /> 
</RelativeLayout> 

更新スクリーンショットのEditText

<EditText 
     android:layout_width="wrap_content" 
     android:layout_height="45dp" 
     android:id="@+id/emailEditText" 
     android:inputType="textEmailAddress" 
     android:layout_below="@+id/textView" 
     android:layout_marginTop="41dp" 
     android:drawableEnd="@drawable/Mail" 
     android:drawableRight="@drawable/Mail" 
     android:maxLines="1" 
     android:ellipsize="end" 
     android:hint="Email" 
     android:textColorHint="@color/common_signin_btn_dark_text_focused" 
     android:background="@drawable/layout_bg" 
     android:layout_alignRight="@+id/textView" 
     android:layout_alignEnd="@+id/textView" 
     android:layout_alignLeft="@+id/textView" 
     android:layout_alignStart="@+id/textView" > 
    </EditText> 

layout_bg.x更新

ミリリットル：

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="@color/traslucent_background" /> 
    <stroke android:width="1dip" android:color="#B1BCBE" /> 
    <corners android:radius="17dip"/> 
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" /> 
</shape> 

Answer 1

画像の場合、android:drawableEnd="@drawable/..."とandroid:drawableRight="@drawable/..."を使用できますが、テキストの長さも制限されます。あなたは、このようなカスタム描画可能に定義することができます背景について

：

<color name="shadow_lighter_color">#64000000</color> 

EDIT：traslucent_colorは、このように、例えば、colors.xmlで定義されます

<!-- background_edittext.xml --> 
<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <corners android:radius="8dp" /> 
    <solid android:color="@color/traslucent_background" /> 

</shape> 

これは希望drawableEnd/drawableRightをテキストとアイコンの間にスペースを入れて使用する方法の例：

<EditText 
     android:background="@drawable/background_edittext" 
     android:drawablePadding="16dp" 
     android:drawableEnd="@drawable/icon" 
     android:drawableRight="@drawable/icon" 
     android:maxLines="1" 
     android:ellipsize="end" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

Answer 2

これを試してみてください：

1. このようなプロジェクトにおける形状描画可能な定義：

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <solid android:color="#88ff0000"/> 
    <corners android:radius="32dp"/> 
</shape> 

そして、あなたのEditTextのための背景として設定します。また、XMLでのごEditTextに属性として追加：

android:drawableRight="@drawable/any_drawable_file" 

あなたが描画可能で、テキストの重複を懸念している場合、あなたはそれに取り組むために、あなたのEditTextにカスタムpaddingRightを追加することができます。それはカスタムレイアウトを膨らませる労力を節約します。