Muhammad Hamza
Muhammad Hamza

Reputation: 89

how to make a custom drawable using xml in android studio for layout background

I want to draw this set following the background in my layout but I am not able to do this in XML

enter image description here

if anyone expert in this please help me with this task thank you in advance for helping

Upvotes: 0

Views: 842

Answers (1)

Rafat Ansari
Rafat Ansari

Reputation: 21

This is the best I could come up with. You may need to modify it as per your requirement.

Toggle button drawable code:

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

    <item android:width="100dp" android:height="70dp">
        <shape android:shape="rectangle">
            <solid android:color="#4169e1"/>
            <corners android:radius="50dp"/>
            <padding android:top="10dp" android:bottom="10dp" android:left="10dp" android:right="10dp"/>
        </shape>
    </item>

    <item android:gravity="center" android:width="50dp" android:height="35dp">
        <shape android:shape="rectangle">
            <stroke android:color="@color/white" android:width="2dp"/>
            <corners android:radius="25dp"/>
        </shape>
    </item>

    <item android:gravity="center">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="180%"
            android:pivotY="25%" >
            <shape
                android:shape="line"
                android:top="1dip" >
                <stroke
                    android:width="2dip"
                    android:color="@color/white" />
                <size android:width="20dp" />
            </shape>
        </rotate>
    </item>

    <item android:gravity="center">
        <rotate
            android:fromDegrees="110"
            android:toDegrees="20"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:shape="line"
                android:top="1dip" >
                <stroke
                    android:width="3dip"
                    android:color="#4169e1" />
                <size android:width="50dp" />
            </shape>
        </rotate>
    </item>

    <item android:gravity="center">
        <rotate
            android:fromDegrees="45"
            android:toDegrees="45"
            android:pivotX="-82%"
            android:pivotY="77%" >
            <shape
                android:shape="line"
                android:top="1dip" >
                <stroke
                    android:width="2dip"
                    android:color="@color/white" />
                <size android:width="20dp" />
            </shape>
        </rotate>
    </item>
</layer-list>

Curved background drawable code:

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#f5f5f5"/>
    <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"/>
</shape>

Layout file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/linear_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="16dp"
        android:gravity="center"
        android:background="@drawable/curved_bg"
        android:orientation="horizontal"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="English"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:layout_weight="1"
            android:src="@drawable/toggle" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Polish"/>

    </LinearLayout>

    <View
        android:layout_width="100dp"
        android:layout_height="10dp"
        android:background="@drawable/curved_bg"
        app:layout_constraintTop_toBottomOf="@+id/linear_layout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

Result

Upvotes: 1

Related Questions