To achieve the same grouped design for address fields in your custom module as seen in the Contacts module, follow these steps:

1. Leverage Odoo Studio (UI Approach)

If you're using Odoo Studio, you can group fields visually to mimic the Contacts module's address section.

1. Go to Your Custom Module in Studio:
   • Open the module you want to modify in Odoo Studio.
2. Add a New Group:
   • Drag and drop a Group container to the form view where you want the address section.
3. Add Fields to the Group:
   • Add fields like Street, Street2, City, ZIP, State, and Country inside the group.
   • Ensure the fields are aligned horizontally (you can adjust this in the group properties).
4. Customize the Label:
   • Add a Static Text above the group and set it to "Contact" or another label to match the Contacts module.
5. Apply CSS (Optional):
   • If the design isn’t exactly what you want, you can add custom CSS using the "Custom JavaScript/CSS" section in Odoo Studio (only available in certain editions).

2. Manual XML Customization (Developer Mode)

If Odoo Studio doesn't provide enough flexibility or you're comfortable editing XML, you can directly modify the form view of your custom module.

Example:

Here’s how to create an address-like design:

xmlCopy code<record id="view_custom_module_form" model="ir.ui.view">
    <field name="name">custom.module.form</field>
    <field name="model">custom.module</field>
    <field name="arch" type="xml">
        <form string="Custom Module">
            <sheet>
                <!-- Address Section -->
                <group>
                    <div class="o_address_format">
                        <div>
                            <label>Contact</label>
                        </div>
                        <group>
                            <field name="street" placeholder="Street..." />
                            <field name="street2" placeholder="Street 2..." />
                            <group>
                                <field name="city" placeholder="City..." />
                                <field name="state_id" placeholder="State..." />
                                <field name="zip" placeholder="ZIP..." />
                            </group>
                            <field name="country_id" placeholder="Country..." />
                        </group>
                    </div>
                </group>
            </sheet>
        </form>
    </field>
</record>

3. Use the Address Formatting Style

Odoo's Contacts module uses predefined CSS styles to group address fields. You can apply the same styles to your custom module by adding o_address_format and related CSS classes.

CSS Styling (Optional):

If you want finer control over the appearance, you can add custom CSS.

Example:

xmlCopy code<template id="assets_backend" inherit_id="web.assets_backend" name="Custom Address Styles">
    <xpath expr="." position="inside">
        <style>
            .o_address_format {
                margin-bottom: 10px;
                padding: 10px;
                border: 1px solid #eaeaea;
                border-radius: 5px;
                background-color: #f9f9f9;
            }
            .o_address_format label {
                font-weight: bold;
                margin-bottom: 5px;
                display: block;
            }
        </style>
    </xpath>
</template>

4. Add Country and State Widgets

To enhance the functionality of the fields, use many2one fields for state_id and country_id, referencing the respective models (res.country.state and res.country). This provides dropdowns similar to the Contacts module.

Example:

xmlCopy code<field name="country_id" widget="many2one" options="{'no_create': True}" placeholder="Country..." />
<field name="state_id" widget="many2one" options="{'no_create': True}" placeholder="State..." />

5. Add Placeholders (Optional)

To make the fields look cleaner, you can add placeholders (like "Street...", "City...") as shown in the example XML above. These placeholders guide the user without needing labels for every field.

6. Test and Adjust

• Once you've implemented the changes, save your modifications and refresh the module.
• Test the form layout to ensure it looks and functions as expected.