Is there a way to create this on XML ? 2 colors box

Question

Is there a way to create these two boxes with XML only (beside the icon of course)

The tob box has rounded bordered around it and shadow but inside it divided to two parts which one is pink background and one is white background (without stroke between them)

It can be created by simple drawable Xml [Check this](https://stackoverflow.com/questions/8930555/android-drawable-with-rounded-corners-at-the-top-only) — ADM, Oct 03 '17 at 05:35
@ADM it's not simple at all and it's not what i need. I actually need to create 2 boxes combined without stroke between them. — user2396640, Oct 03 '17 at 05:54
use corners attribute in shape drawable. And set radius only to the desire corners and you are good to go . — ADM, Oct 03 '17 at 05:57
@ADM the main issue is the borders, not the corners. how to create a box with only two rounded corners and 3 strokes — user2396640, Oct 03 '17 at 06:07
I think it might be illegal to be posting ux documents to stack overflow as generally these are confidential. I'm wondering if we should restrict your picture... — JoxTraex, Oct 03 '17 at 07:45

score 1 · Answer 1 · answered Oct 03 '17 at 09:58

Create 2 XML drawables

rect_colored.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorAccent"/>
    <corners android:bottomRightRadius="5dp"
        android:topRightRadius="5dp"/>

</shape>

rect_white.xml

<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:color="@color/colorPrimaryDark"
        android:width="2dp"/>
    <corners android:radius="5dp"/>
</shape>

Position the drawables appropriately

This will work differently with different root views. I'm using ConstraintLayout for simplicity

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="8dp"
        android:background="@drawable/rect_white"
        android:id="@+id/frameLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="8dp">

        <!--Content here-->

    </FrameLayout>

    <FrameLayout
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="2dp"
        android:layout_marginTop="0dp"
        android:background="@drawable/rect_colored"
        app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
        app:layout_constraintRight_toRightOf="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="@+id/frameLayout">

        <!--Content here-->

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

The output

score 0 · Answer 2 · answered Oct 03 '17 at 06:26

Just use a LayerList with the shapes you need nested. May take a little tweaking, but it is simple enough. You can even add in your bitmaps for the left icon if you like. Just make your layers, and adjust from the sides and handle your corners.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:left="50dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#0000FF" />
            <corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
        </shape>
    </item>
    <item android:right="50dp">
        <shape
            android:shape="rectangle" >
            <solid android:color="#ffffff" />
            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
        </shape>
    </item>

</layer-list>

if i choose this method, how can i put one textview on the blue part and one on the white part ? — user2396640, Oct 03 '17 at 06:28
Oh even simpler, I thought you needed them combined lol. Just use a LinearLayout horizontal for your TextViews, and give each one their own drawable background that fits your style of rounded corner and color. Then set the background to the drawable and adjust the style to remove the outline in your Styles.xml file and apply the style to your TextView or EditText to avoid the outlines showing up. — Sam, Oct 03 '17 at 06:33

InsaneCat · Answer 3 · 2017-10-03T10:21:41.640

Here simply you create a one xml file & drawable file to create shape & border.

MyActivity.Xml

<LinearLayout
    android:id="@+id/ll_mobile_img"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="30dp"
    android:paddingLeft="15dp"
    android:paddingRight="15dp">

    <RelativeLayout
        android:id="@+id/rr_verification_code"
        android:layout_width="120dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.3">

        <EditText
            android:id="@+id/et_verification_code"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/ractangle_mobile_white_border"
            android:ems="10"
            android:hint="Enter Code"
            android:drawableLeft="@mipmap/ic_launcher"
            android:imeOptions="actionGo"
            android:inputType="number|textAutoComplete"
            android:maxLength="6"
            android:paddingBottom="15dp"
            android:paddingLeft="10dp"
            android:paddingTop="16dp"
            android:singleLine="true"
            android:textColor="@android:color/white"
            android:textColorHint="@android:color/white"
            android:textSize="18sp" />
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/ll_country_img"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:background="@android:color/white"
        android:gravity="center_vertical"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_verification_code_img"
            android:layout_width="38dp"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="@string/globe"
            android:textColor="@color/blue_font_color"
            android:textSize="20dp" />
    </LinearLayout>
</LinearLayout>

Drawable:- ractangle_mobile_white_border.xml

[![<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item>
                <shape>
                    <gradient android:angle="360" android:endColor="@android:color/transparent" android:startColor="@android:color/transparent" />
                    <stroke android:width="1dp" android:color="@android:color/white" />
                    <corners android:bottomRightRadius="1dp" android:topRightRadius="1dp"/>
                    <padding android:bottom="3dp" android:left="0dp" android:right="3dp" android:top="3dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Hope this helps you.

Is there a way to create this on XML ? 2 colors box

3 Answers3