How to have four EditTexts side by side with a period in between each one?

Question

I'm trying to create a layout file which has four EditTexts side by side with a period in between the boxes (so three plain TextViews, each containing a single period). The four boxes will be used for IP address inputs. I want to have them centred in my layout but I can't get them to align properly using either RelativeLayout or LinearLayout(horizontal). Here's the code for the layout file:

<?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="match_parent"
                xmlns:tools="http://schemas.android.com/tools"
                android:background="@color/colorDartGray"
                android:paddingBottom="@dimen/activity_vertical_margin"
                android:paddingLeft="@dimen/activity_horizontal_margin"
                android:paddingRight="@dimen/activity_horizontal_margin"
                android:paddingTop="@dimen/activity_vertical_margin"
                tools:context="morega.mota.ui.SetIpAddressActivity">
    <!--
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleLarge"
        android:id="@+id/ipaddress_loading"
        android:progressDrawable="@drawable/circular_progress_bar"
        android:layout_centerInParent="true"/>
        -->



    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/searching_button_view"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" >
        <Button
            android:layout_width="200dp"
            android:layout_height="75dp"
            android:text="@string/cancel"
            android:id="@+id/cancel_button"
            android:layout_marginLeft="10dp"
            android:layout_marginStart="10dp"
            android:layout_toRightOf="@+id/connect_button"
            android:layout_toEndOf="@+id/connect_button"/>
        <Button
            android:layout_width="200dp"
            android:layout_height="75dp"
            android:id="@+id/connect_button"
            android:text="@string/connect"/>
    </RelativeLayout>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/company_logo"
        android:src="@drawable/logo"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/ip_address_instruction"
        android:id="@+id/textView"
        android:layout_below="@+id/company_logo"
        android:layout_centerHorizontal="true"
        android:textColor="#ffffff"
        android:textSize="40sp"/>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="750dp"
        android:layout_height="400dp"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true">

        <EditText android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"/>
        <TextView android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:text="."/>
        <EditText android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"/>
        <TextView android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:text="."/>/>
        <EditText android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"/>
        <TextView android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:text="."/>/>
        <EditText android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"/>

    </LinearLayout>


</RelativeLayout>

I've commented out the progress bar because it also centered in the middle and was interfering when I was trying to make changes using drag and drop, using the Design tab in Android Studio.

Answer 1

You should be able to use the RelativeLayout that you have set to set those 4 textviews side by side with a period between them. Just use the same attributes you set already for the button android:layout_toRightOf, while setting an id for each new textview that you create.

<EditText 
    android:id="@+id/first" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" />
<TextView
    android:id="@+id/second" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/first" />
<EditText
    android:id="@+id/third" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text=","
    android:layout_below="@id/name"
    android:layout_toRightOf="@id/second" />

relevant

Answer 2

Something like this will achieve the desired effect

<LinearLayout 
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true">

    <EditText
        android:id="@+id/ip_seg_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="3"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."/>

    <EditText
        android:id="@+id/ip_seg_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="3"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."/>

    <EditText
        android:id="@+id/ip_seg_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="3"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="."/>

    <EditText
        android:id="@+id/ip_seg_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="3"/>

</LinearLayout>

You will have to piece the actual IP together, but that shouldn't be too hard in your fragment/activity.

Answer 3

Just place following Linear layout in your Relative layout it will display 4 edit text separated by period, you can further customise this code to exactly match your need 

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        android:orientation="horizontal">

        <EditText android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="1234"/>
        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"

                  android:text="."
                  android:textSize="30dp"/>
        <EditText android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="1234"/>
        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"

                  android:text="."
                  android:textSize="30dp"/>
        <EditText android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="1234"/>
        <TextView android:layout_width="wrap_content"
                  android:layout_height="wrap_content"

                  android:text="."
                  android:textSize="30dp"/>
        <EditText android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_weight="1"
                  android:gravity="center"
                  android:text="1234"/>


    </LinearLayout>