web-dev-qa-db-fra.com

Comment placer le bouton à l'intérieur du texte d'édition

Je veux placer un bouton d'image à l'intérieur de EditText, mais je n'ai pas d'idée, dites-moi comment le faire comme indiqué sur la figure. Merci

enter image description here

androidandroid-layoutandroid-edittextimagebutton
36
Arshad Ali

Si vous ne voulez pas cliquer sur cette image, vous pouvez utiliser la propriété drawableRight pour EditText ..

Android:drawableRight="@drawable/icon"

Si vous voulez cliquer, utilisez le code ci-dessous.

<?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="wrap_content" >

    <EditText
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:hint="Enter search key" />

    <ImageButton
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:src="@drawable/search"
        Android:layout_centerVertical="true"
        Android:layout_margin="5dp"
        Android:text="Button"/>

</RelativeLayout>
48
Niranj Patel

Si vous voulez une telle disposition et une image cliquable, vous pouvez faire quelque chose comme ça

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content" >

    <EditText
        Android:id="@+id/editText1"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:layout_centerVertical="true" >

    </EditText>
     <ImageView
        Android:id="@+id/imageView1"
        Android:padding="5dp"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignTop="@+id/editText1"
        Android:layout_alignBottom="@+id/editText1"
        Android:layout_alignRight="@+id/editText1"
        Android:src="@drawable/ic_launcher" />

</RelativeLayout>

Sortie:

enter image description here

33
Azhar Shaikh

Dans Material, il y a ce soulignement sous EditText. Dans la plupart des applications, les icônes apparaissent à l'intérieur qui soulignent.

enter image description here

Pour cela, il suffit d'utiliser un rembourrage

Android:paddingEnd = "@dimen/my_button_size"

N'oubliez pas paddingRight pour les versions sous 4.2.

<RelativeLayout ....>
   ...
   <EditText
   ...
   Android:id="@+id/my_text_edit"
   Android:textAlignment = "viewStart"
   Android:paddingEnd = "@dimen/my_button_size"
   Android:paddingRight = "@dimen/my_button_size"
   .../>

   <ImageButton 
   ....
   Android:layout_width="@dimen/my_button_size" 
   Android:layout_height="@dimen/my_button_size"
   Android:layout_alignEnd="@id/my_text_edit"
   Android:layout_alignRight="@id/my_text_edit"/>
   ...
</RelativeLayout>

Cela limitera le texte à l'image et l'image ne chevauchera pas le texte, quelle que soit la longueur du texte.

15
Meymann

Ma solution s'adaptera à toutes les tailles d'écran sans que le editText passe "derrière" le imageButton. Cela utilise également les ressources Android, vous n'avez donc pas besoin de fournir votre propre icône ou ressource de chaîne. Copiez et collez cet extrait où vous voulez une barre de recherche:

   <LinearLayout
      Android:layout_width="match_parent"
      Android:layout_height="wrap_content"
      Android:orientation="horizontal">

   <EditText
        Android:layout_margin="8dp"
        Android:id="@+id/etSearch"
        Android:hint="@Android:string/search_go"
        Android:layout_weight="1"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"/>

    <ImageView
        Android:id="@+id/ivSearch"
        Android:background="@color/transparent_black"
        Android:padding="2dp"
        Android:layout_width="wrap_content"
        Android:layout_margin="8dp"
        Android:src="@Android:drawable/ic_menu_search"
        Android:layout_height="wrap_content"
        tools:ignore="contentDescription" />

</LinearLayout>

Restult:

enter image description here

7
Chad Bingham

vous pouvez utiliser le code ci-dessous:

Android:drawableRight="@Android:drawable/ic_menu_search"

4
Bhavesh Patadiya

Que diriez-vous de le placer dans un RelativeLayout comme celui-ci?:

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content">

    <!-- EditText for Search -->
    <EditText Android:id="@+id/inputSearch"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:hint="Search whatever..."
            Android:textSize="14dp"
            Android:textStyle="italic"
            Android:drawableLeft="@drawable/magnifyingglass"
            Android:inputType="textVisiblePassword"
            Android:theme="@style/EditTextColorCustom"/>

         <Button
            Android:id="@+id/btn_clear"
            Android:layout_width="14dp"
            Android:layout_height="14dp"
            Android:layout_marginTop="10dp"
            Android:layout_alignRight="@+id/inputSearch"
            Android:layout_marginRight="5dp"
            Android:background="@drawable/xbutton"
            Android:visibility="gone"/>
    </RelativeLayout>

De cette façon, vous pourrez également gérer la visibilité du bouton (GONE/VISIBLE) dans le code.

J'espère que ça aide.

2
Marcos

Il existe une solution avec un composé cliquable étirable. Ça marche très bien - je l'ai testé

SOLUTION

1
Yorgi

C'est assez simple, je pense. Utilisez la disposition relative comme disposition parent. Placez le editText à gauche et ImageButton à droite en utilisant soit,

  • propriété alignRight pour ImageButton
  • en spécifiant le poids de la mise en page pour chacun des champs
1
Akanksha Hegde

Je ne sais pas pourquoi vous voulez placer ImageButton à réaliser, ce qui peut être fait avec une simple propriété de EditText

Android: drawableRight = "votre drawable"

Cela ne peut-il pas fonctionner pour vous?

1
RobinHood

Placez votre EditText dans une disposition linéaire (horizontale) et ajoutez un bouton Image à côté (0 remplissage). La définition de la couleur d'arrière-plan de EditText et ImageButton se fondra.

1
Mani