How can I have a long line under icon and editText and also leave some space at the end of editText?

Question

I want to have a dialog looked similar to this

I tried to code but the design of the dialog looked weird.

How can I have a long line under icon and editText and also leave some space at the end of editText?

xml layout

<?xml version="1.0" encoding="utf-8"?>

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


    <ImageView
        android:id="@+id/img"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@mipmap/add_new_task"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:id="@+id/edtText"
        android:layout_marginLeft="70dp"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:hint="Add a new task"/>

    <ImageView
        android:id="@+id/dateImg"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@mipmap/imgdate"
        android:layout_below="@+id/edtText"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:id="@+id/date"
        android:layout_marginLeft="70dp"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edtText"
        android:hint="Date"/>

    <ImageView
        android:id="@+id/timeImg"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:src="@mipmap/imgtime"
        android:layout_below="@+id/date"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:id="@+id/time"
        android:layout_marginLeft="70dp"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/date"
        android:hint="Time"/>

    <Button
        android:id="@+id/cancelBtn"
        android:background="@color/red"
        android:textColor="@color/white"
        android:text="Cancel"
        android:layout_width="165dp"
        android:layout_height="40dp"
        android:layout_below="@+id/time"
        android:layout_marginLeft="13dp"/>

    <Button
        android:id="@+id/okBtn"
        android:background="@color/light_sky_blue"
        android:textColor="@color/white"
        android:text="Save"
        android:layout_width="165dp"
        android:layout_height="40dp"
        android:layout_below="@+id/time"
        android:layout_marginLeft="190dp"/>


</RelativeLayout>

Code

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_add_task:
                AlertDialog.Builder builder = new AlertDialog.Builder(this);
                LayoutInflater inflater = getLayoutInflater();
                builder.setView(inflater.inflate(R.layout.dialog_with_edittext,null));
                builder.show();
                return true;

            default:
                return super.onOptionsItemSelected(item);
        }
    }

Draw the lines with something like this: http://stackoverflow.com/questions/2658772/vertical-line-using-xml-drawable And as for the space just add some padding to the EditTexts — ivan, Sep 24 '16 at 15:23

score 2 · Accepted Answer · edited May 23 '17 at 10:34

Try this xml i changed the padding on the Relative layout so that it doesnt looks weird from the top/bottom and the sides, also added the lines using the link i provided in my comment (Vertical line using XML drawable) and also centered the buttons a little bit since they seemed a little bit off with another relative view inside and removed the underbar of the editTexts

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:paddingTop="8dp"
    android:paddingBottom="5dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:layout_height="wrap_content">


    <ImageView
        android:id="@+id/img"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="#000"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:layout_marginTop="11dp"
        android:layout_marginBottom="11dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/img"
        android:background="@android:color/transparent"
        android:id="@+id/edtText"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:hint="Add a new task"/>
    <View
        android:layout_below="@id/edtText"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000"
        android:layout_marginTop="-4dp"/>
    <ImageView
        android:id="@+id/dateImg"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="#000"
        android:layout_below="@+id/edtText"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:layout_marginTop="11dp"
        android:layout_marginBottom="11dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/dateImg"
        android:background="@android:color/transparent"
        android:id="@+id/date"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/edtText"
        android:hint="Date"/>
    <View
        android:layout_below="@id/date"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000"
        android:layout_marginTop="-4dp"/>

    <ImageView
        android:id="@+id/timeImg"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:background="#000"
        android:layout_below="@+id/date"
        android:layout_marginLeft="13dp"/>

    <EditText
        android:layout_marginTop="11dp"
        android:layout_marginBottom="11dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@id/timeImg"
        android:background="@android:color/transparent"
        android:id="@+id/time"
        android:layout_width="270dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/date"
        android:hint="Time"/>

    <View
        android:layout_below="@id/time"
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000"
        android:layout_marginTop="-4dp"/>

<RelativeLayout
    android:layout_centerHorizontal="true"
    android:layout_below="@+id/time"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_marginTop="5dp"
        android:id="@+id/cancelBtn"
        android:background="#fc2a2a"
        android:textColor="#ffffff"
        android:text="Cancel"
        android:layout_width="165dp"
        android:layout_height="40dp"
        android:layout_marginLeft="15dp"
        android:layout_alignParentLeft="true"/>

    <Button
        android:layout_marginTop="5dp"
        android:id="@+id/okBtn"
        android:background="#64e3ff"
        android:textColor="#fff"
        android:text="Save"
        android:layout_width="165dp"
        android:layout_height="40dp"
        android:layout_marginRight="15dp"
        android:layout_alignParentRight="true"/>
</RelativeLayout>

</RelativeLayout>

Thanks for your answer and all the useful tips. I tried to remove the underbar line of the editText by using `android:background="@android:color/transparent"`, all the layout run — John Joe, Sep 24 '16 at 15:55
Ohh sorry didnt notice that ill try to implement it right away (/o-o)/ — ivan, Sep 24 '16 at 16:00
Thanks again :) But I don't why, mine and the Original seems different — John Joe, Sep 24 '16 at 16:18
Looks like the lines between editTexts are a different color (almost non visible) and the buttons have arent fully a rectangle and they have an effect on its borders those are the only things i can spot — ivan, Sep 24 '16 at 16:20
I run my app in real device, the cancel `button` width longer than the save `button`. Do you have any idea for this ? — John Joe, Sep 24 '16 at 16:23
they shouldnt have different width, try lowering the marginRight of the save button by 5dp and the marginLeft of the cancel button by 5dp aswell — ivan, Sep 24 '16 at 16:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/124114/discussion-between-john-joe-and-ivan). — John Joe, Sep 24 '16 at 16:30

How can I have a long line under icon and editText and also leave some space at the end of editText?

1 Answers1