CODEWITHSUNDEEP
android
digitaltoad
digitaltoad

Reputation: 95

What is the correct way to create full width forms in Android

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>

Upvotes: 0

Views: 725

Answers (2)

DeeV
DeeV

Reputation: 36035

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?

Upvotes: 1

Burkely91
Burkely91

Reputation: 902

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>

Upvotes: 0

Related Questions