圆角矩形背景editext与背景边框左上角的提示

Question

我在创建用户界面时遇到困难。请帮助我创建。

我有一个EditText有圆角的矩形边框，但是占位符在离开边框的边框的顶部。

这里是图像预先

感谢。

Answer 1

你必须使用Vector Drawable用于创建自定义形状，因为你需要。

我为此创建了一个样本。 创建custom_vector.xml下的文件RES /绘制/

<vector xmlns:android="http://schemas.android.com/apk/res/android" 
    android:height="20dp" 
    android:width="20dp" 
    android:viewportWidth="400" 
    android:viewportHeight="400"> 

    <group 
     android:pivotX="10.0" 
     android:pivotY="10.0"> 

     <!-- the outside box --> 

     <!-- top line & top left corner --> 
     <path android:pathData="M 30 60 H 40 c -40 0 -35 0 -35 35 " 
      android:strokeColor="#000000" android:strokeWidth="10" /> 

     <!-- left line & bottom left corner --> 
     <path android:pathData="M 5 64 v 271 c 0 40 0 35 35 35 " 
      android:strokeColor="#000000" android:strokeWidth="10" /> 

     <!-- bottom line & bottom right corner --> 
     <path android:pathData="M 30 370 h 330 c 40 0 35 -10 35 -35" 
      android:strokeColor="#000000" android:strokeWidth="10" /> 

     <!-- right line & top right corner --> 
     <path android:pathData="M 395 356 v -261 c0 -40 0 -35 -50 -35" 
      android:strokeColor="#000000" android:strokeWidth="10" /> 

     <!-- top line till end--> 
     <!-- 140 is the starting point of line after TEXT--> 
     <path android:pathData="M 140 60 370 60" 
      android:strokeColor="#000000" android:strokeWidth="10" /> 
    </group> 
</vector> 

您可能需要更改的最后一个路径变量的值

顶线，直到结束

为根据您的文本在处'姓名'。您也可以根据需要修改形状或角落。

下RES /布局创建test_layout.xml文件/

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="#faffd5"> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="@drawable/custom_vector" 
     android:layout_margin="20dp" 
     android:orientation="vertical"> 

     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="40dp" 
      android:paddingLeft="5dp" 
      android:textSize="20sp" 
      android:paddingRight="5dp" 
      android:text="Name"/> 

     <EditText 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="40dp" 
      android:layout_marginRight="20dp" 
      android:layout_marginBottom="15dp" 
      android:textSize="25sp" 
      android:background="@android:color/transparent" 
      android:text="Alex Smith"/> 

    </LinearLayout> 
</LinearLayout> 

看起来像这样的屏幕截图

Answer 2

试试下面...

你实现这个使用ConstraintLayout。

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout 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:id="@+id/linearLayout" 
    android:layout_width="match_parent" 
    android:background="@android:color/white" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <EditText 
     android:id="@+id/edittext" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/_10sdp" 
     android:layout_marginBottom="8dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="8dp" 
     android:background="@drawable/round" 
     android:padding="@dimen/_10sdp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintEnd_toEndOf="parent" 
     app:layout_constraintStart_toStartOf="parent" 
     app:layout_constraintTop_toTopOf="parent" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@android:color/white" 
     android:padding="@dimen/_5sdp" 
     android:text="Name" 
     app:layout_constraintLeft_toLeftOf="@+id/edittext" 
     android:layout_marginLeft="@dimen/_15sdp" 
     app:layout_constraintTop_toTopOf="@+id/edittext" 
     app:layout_constraintBottom_toTopOf="@+id/edittext" 
     android:textColor="@android:color/black" 
     tools:layout_editor_absoluteX="107dp" 
     tools:layout_editor_absoluteY="90dp" /> 
</android.support.constraint.ConstraintLayout> 

round.xml

<?xml version="1.0" encoding="utf-8"?> 
<!-- res/drawable/rounded_edittext.xml --> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle" android:padding="10dp"> 
    <solid android:color="#FFFFFF"/> 
    <stroke android:color="@android:color/darker_gray" android:width="@dimen/_1sdp"/> 
    <corners 
     android:bottomRightRadius="15dp" 
     android:bottomLeftRadius="15dp" 
     android:topLeftRadius="15dp" 
     android:topRightRadius="15dp"/> 
</shape> 

输出：see