Three Edit text Boxes of Material design side by side

Question

I am new to the Android Development. I would like to have three input fields [Edit Text] in my layout as can be seen in Attached picture. I am developing my UI with Android Material design and not able to figure out how to place these there inputs.

I will really appreciate the prompt help

Answer 1

android：orientation = horizo​​ntal的 线性布局 。

Answer 2

Use a horizontal LinearLayout in your layout along with 3 TextInputLayout Views each having an EditText . Something like:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout1"
         android:layout_height="wrap_content"
         android:layout_width="0dp"
         android:layout_weight="1"
         android:hint="MM">

         <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="number"/>

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout2"
         android:layout_height="wrap_content"
         android:layout_width="0dp"
         android:layout_weight="1"
         android:hint="YY">

         <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="number"/>

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout3"
         android:layout_height="wrap_content"
         android:layout_width="0dp"
         android:layout_weight="1"
         android:hint="CVV">

         <EditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="number"/>

    </android.support.design.widget.TextInputLayout>
</LinearLayout>

Answer 3

If you could provide more Details, eg which Layout you use you'll get better answers

For a LinearLayout i would guess something like

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText3"
    android:layout_weight="1"
    android:layout_marginTop="50dp"
    android:text="xxx"
    android:gravity="center" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText4"
    android:layout_weight="1"
    android:layout_marginTop="50dp"
    android:gravity="center"
    android:text="yyy" />

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/editText5"
    android:layout_weight="1"
    android:layout_marginTop="50dp"
    android:text="zzz"
    android:gravity="center" />

would match your question

Answer 4

Step 1: Create Drawable named demo.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:color="#000000" android:width="5dp"/>
</shape>

step 2:Create layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/demo"
    android:layout_margin="10dp"
    android:orientation="horizontal"
    android:gravity="center"
    android:weightSum="3">

    <EditText
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:hint="MM"
        android:layout_weight="1"
        android:gravity="center"/>


    <EditText
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:hint="YY"
        android:layout_weight="1"
        android:gravity="center"/>


    <EditText
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:hint="CVV"
        android:layout_weight="1"
        android:gravity="center"/>

</LinearLayout>