1

Estou desenvolvendo uma aplicação mobile utilizando o Android studio 2.2.2, e queria deixar minha aplicação com esse visual.

inserir a descrição da imagem aqui

Mas não estou conseguindo colocar a borda e a linha encima do editText

inserir a descrição da imagem aqui

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.tulio.exercicio2.MainActivity">



<EditText
    android:id="@+id/editView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:hint="De"
    android:textColor="#5e605f"
     />
<EditText
    android:id="@+id/editView2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Para"
    android:gravity="left"
    android:textColor="#5e605f"
    />

<EditText
    android:id="@+id/editView3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Assunto"
    android:gravity="left"
    android:textColor="#5e605f"
     />

<EditText
    android:id="@+id/editView4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Mensagem"
    android:gravity="left"
    android:textColor="#5e605f"
    tools:layout_editor_absoluteY="0dp"
    tools:layout_editor_absoluteX="8dp" />

   </LinearLayout>

2 Respostas 2

4

Você pode utilizar xml-drawables para chegar neste resultado, mas também existem uma outra alternativa se caso você queira, por exemplo, aplicar sombras na sua view ao invés de deixar ela com um visual mais chapado.

XML Drawables

Você pode aprender um pouco mais sobre esses arquivos na seção recursos desenháveis da documentação do Android.

Neste caso, você utilizaria a tag selector para criar uma shape. Dentro desta shape, você utilizará as tags solid para criar um background sólido, corners para arredondar a drawable, se caso você queira, e stroke para adicionar a borda.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#fff"/> <!-- cor do sólido -->
            <corners android:radius="12dp"/> <!-- valor do arredondamento das bordas -->
            <stroke android:color="#eee" android:width="2dp"/> <!-- cor da borda e tamanho dela -->
            <padding android:bottom="8dp" android:left="8dp" android:right="8dp" android:top="8dp"/>
        </shape>
    </item>
</selector>

Pronto, você criou o seu background e agora poderá utilizar ele como o background da sua View. No código acima, você pode estar estranhando a tag padding, mas ela é basicamente para evitar que o background fique muito colado com a EditText.

<EditText
    ...
    android:background="@drawable/my_bg"/>
2
  • o que seria <shape android:shape="rectangle"> ?
    – User1999
    Commented 19/08/2017 às 21:42
  • O atributo shape="rectangle" significa de que forma a sua view irá se comportar, neste caso, como um retângulo (será criado um retângulo no preview). As opções disponíveis para este atributo são: rectangle, oval, line, ring, @FelipePatrocinio
    – itscorey
    Commented 20/08/2017 às 2:58
3

Em primeiro momento, há 3 opções de fazer isso:

  1. Criar um background customizado e definir no XML do EditText;
  2. Criar um background customizado e definir programaticamente no EditText;
  3. Criar um background programaticamente e definir programaticamente no EditText;

Inicialmente você precisa conhecer essas 3 propriedades abaixo:

  • <solid>: Define uma cor solida para o background
  • <corners>: define a configurações dos cantos, no qual pode ser definido em raios.
  • <stroke>: define a configurações das bordas que abaixo foi definido uma cor cinza @android:color/darker_gray e a largura de 1dp;

Então basta criar um arquiv o dentro res/drawable/ como como por exemplo border_rounded.xml. Veja:

Opção 1:

Definir no XML do EditText:

<EditText
    android:id="@+id/et"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border_rounded"
    android:layout_margin="4dp"
    android:padding="8dp"
    />

Opção 2:

Definir programaticamente no EditText:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
    et.setBackground(ContextCompat.getDrawable(this, R.drawable.border_rounded));
} else {
    et.setBackgroundDrawable( ContextCompat.getDrawable(this, R.drawable.border_rounded) );
}

Opção 3:

Criar um background programaticamente e defini-lo programaticamente no EditText.

Primeiro é necessário criar um GradientDrawable com as propriedades primordiais para definição das bordas redondas do EditText. Veja:

public GradientDrawable setBorderRounded(){
    GradientDrawable shape =  new GradientDrawable();
    shape.setColor(Color.WHITE);
    shape.setCornerRadius(10);
    shape.setStroke(2, Color.GRAY);
    return shape;
}

Logo depois, basta definir como background do EditText. Veja:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
    et.setBackground(setBorderRounded());
else
    et.setBackgroundDrawable(setBorderRounded());

Veja mais detalhes na documentação sobre recursos desenháveis.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .