Argthtjtr

I would like to accomplish the task shown in the two images below; more precisely, be able to "extend" somehow the TextInputLayout to the Switch so that it is included in the forementioned layout, along with the TextInputEditText.

All tries I have done so far have failed me.

The XML code for one item is listed below:

                        <LinearLayout

                        android:layout_width="match_parent"

                        android:layout_height="match_parent">



                        <android.support.design.widget.TextInputLayout

                            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

                            android:layout_width="0dp"

                            android:layout_height="wrap_content"

                            android:layout_weight="1"

                            android:layout_marginEnd="10dp">



                            <android.support.design.widget.TextInputEditText

                                android:id="@+id/myprofile_twitter"

                                android:layout_width="match_parent"

                                android:textColor="@color/blue_grey_800"

                                android:layout_height="wrap_content"

                                android:hint="Twitter" />



                        </android.support.design.widget.TextInputLayout>



                        <Switch

                            android:id="@+id/twitter_switch"

                            android:layout_width="45dp"

                            android:layout_height="30dp"

                            android:layout_marginEnd="10dp"

                            android:layout_gravity="center_vertical"/>



                    </LinearLayout>

And here are the two images (image 1 is how it's currently presented and image 2 is what I would like to accomplish - see Linkedin). Though, not sure if it's possible to do this.

Although it's not ideal this is a workaround to get behavior similar to what you're looking for. You can also change or create another border for the Switch to match an unfocused TextInputLayout state.

layout.xml

<LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">



        <android.support.design.widget.TextInputLayout

            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:layout_marginEnd="10dp"

            android:layout_marginRight="10dp">



            <android.support.design.widget.TextInputEditText

                android:id="@+id/myprofile_twitter"

                android:layout_width="match_parent"

                android:textColor="@color/colorPrimaryDark"

                android:layout_height="wrap_content"

                android:hint="Twitter" />



        </android.support.design.widget.TextInputLayout>



        <Switch

            android:id="@+id/twitter_switch"

            android:background="@drawable/border"

            android:padding="18.5dp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="1.5dp"

            android:layout_marginStart="-19dp"

            android:layout_marginLeft="-19dp"

            android:layout_marginEnd="10dp"

            android:layout_gravity="center_vertical"

            android:layout_marginRight="10dp" />



    </LinearLayout>

border.xml

<?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="@color/colorAccent" />

        <corners android:topRightRadius="5dp" android:bottomRightRadius="5dp"/>



        <padding

            android:bottom="2dp"

            android:top="2dp"/>

    </shape>

</item>

<item android:right="10dp">

    <shape android:shape="rectangle" >

        <solid android:color="#fff" />



        <padding

            android:right="2dp" />

    </shape>

</item>

<item>

    <shape android:shape="rectangle" >

        <corners android:topRightRadius="5dp" android:bottomRightRadius="5dp"/>

        <solid android:color="#fff" />

    </shape>

</item>

You can achieved that format with this sample layout.

<RelativeLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center"

    android:layout_margin="10dp">





    <EditText

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:background="@drawable/background"

        android:inputType="text"

        android:layout_centerVertical="true"

        android:hint="LinkedIn"

        android:paddingLeft="5dp"/>



        <Switch

            android:id="@+id/twitter_switch"

            android:layout_width="45dp"

            android:layout_height="30dp"

            android:layout_centerVertical="true"

            android:layout_alignParentRight="true"/>



</RelativeLayout>

Sample screenshot: