Reputation: 89
I want to draw this set following the background in my layout but I am not able to do this in XML
if anyone expert in this please help me with this task thank you in advance for helping
Upvotes: 0
Views: 842
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>
Upvotes: 1