0

I'm having trouble figuring out how one goes about creating a full width form in the style of a normal compose window, say for an email or forum topic. The screenshot below from material design guidelines should give an idea of what I'm trying to achieve. If you need anymore details about the layout let me know, but its basically as of this moment, just two EditText views in a LinearLayout.

Full width form

[Edit]

I should clarify that I do understand how layouts works. I can get full width EditText fields, but the actual look of the example is quite different. I am not sure if this is a custom styling for the EditText or if the EditText are wrapped in a specific layout to make them look as if they are in a table or list.

[Edit with My Solution]

drawable/full_width_edit_text

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#FFE0E0E0" />
        </shape>
    </item>
</layer-list>

values/styles

<resources>
    <style name="EditTextLightFullWidth" parent="AppTheme">
        <item name="android:textColorHint">#FF989898</item>
        <item name="android:textSize">16sp</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
        <item name="android:paddingTop">20dp</item>
        <item name="android:paddingBottom">20dp</item>
        <item name="android:background">@drawable/full_width_edit_text_bg</item>
    </style>

    <style name="EditTextLightFullWidth.NoBorder" parent="EditTextLightFullWidth">
        <item name="android:background">@null</item>
    </style>
</resources>

layout/compose_activity

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <EditText
        android:id="@+id/titleText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Title"
        android:theme="@style/EditTextLightFullWidth"
        style="@style/EditTextLightFullWidth"
        />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <EditText
            android:id="@+id/bodyText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textMultiLine"
            android:gravity="top|left"
            android:hint="Body"
            android:theme="@style/EditTextLightFullWidth.NoBorder"
            style="@style/EditTextLightFullWidth.NoBorder"
            />
    </ScrollView>
</LinearLayout>
digitaltoad
  • 95
  • 1
  • 6
  • just match_parent for your layout width – Elltz Aug 09 '15 at 22:51
  • I've edited to clarify what I'm having trouble with. I understand how to match_parent. Thank you for the quick comment though. – digitaltoad Aug 09 '15 at 23:19
  • No need to be snarky. I meant no harm and was just stating what I currently understand. The thank you was sincere as you had taken the time to lend a hand. It just showed me that I needed to clarify a bit. Thank you again. – digitaltoad Aug 09 '15 at 23:34
  • oh no sir, maybe my way to it was bad, i am sorry i didn't mean act like snide though i wil delete the comment, but i hope you have found your solution or a way to get it, it is probably the background set for the EditText which might be transparent or a divider-like background and aligned vertically in a linearlayout, or if a transparent background is used then a view acted as a divider in-between the EditTexts. hope you solve it and have a nice day – Elltz Aug 10 '15 at 00:44
  • Yeah I think this is the way that I am going. Once I get it, I will post what worked for me. – digitaltoad Aug 10 '15 at 01:53

2 Answers2

1

This is actually a custom styling for EditText. They simply set the EditText background to transparent or null.

How to change style of a default EditText

android : how to change the style of edit text?

Community
  • 1
  • 1
DeeV
  • 35,865
  • 9
  • 108
  • 95
  • I'm going to accept this answer as I think it got me going in the right direction. I'll post an update with the full solution a bit later. – digitaltoad Aug 10 '15 at 01:54
0

Add a width attribute in your layout.xml that has the value "match_parent" or "fill_parent" for each of your editText items and they should expand as wide as their parent container. As long as your parent also fills the width of the screen it should work.

Eg

<LinearLayout>
    <!-- This will make your parent container fill the screen-->
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"

      <EditText
          android:id="@+id/edit_message"
          android:layout_height="40dp"
         <!--Here is where we stretch editText item as wide as parent -->
          android:layout_width="match_parent">

</LinearLayout>
Burkely91
  • 902
  • 9
  • 28
  • This does work, but I think the other answer is probably going in the right direction. What I wasn't sure about is the actual look. The underline for the EditText will not be flush with the parent and instead have a small bit of margin on either side. – digitaltoad Aug 09 '15 at 23:37