CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-button
user23423534
user23423534

Reputation: 29

semi-circle button android

I have two buttons and I want to change the shape of them to be semi-circles. Then place them beside each other to make a full circle. An image has been attached to show how I want the buttons to look. Any help would be greatly appreciated. Thank you.

Semi-Circle Buttons

Upvotes: 1

Views: 8849

Answers (5)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

#. First, create two custom shape drawable for left and right half-circle.

left_half_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="1000dp"
        android:topLeftRadius="1000dp"
        android:bottomRightRadius="0dp"
        android:topRightRadius="0dp" />

    <solid android:color="@android:color/holo_red_light" />
</shape>

right_half_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:bottomLeftRadius="0dp"
        android:topLeftRadius="0dp"
        android:bottomRightRadius="1000dp"
        android:topRightRadius="1000dp" />

    <solid android:color="@android:color/holo_green_light" />
</shape>

USE:

1. Create a horizontal LinearLayout and add two Button inside it. Use attribute layout_weight to Buttons for equal width.

2. Set left_half_circle as a background of button_left and set right_half_circle as a background of button_right.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:orientation="horizontal"
    android:weightSum="2"
    android:layout_gravity="center">

    <Button
        android:id="@+id/button_left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="RED"
        android:textColor="@android:color/white"
        android:background="@drawable/left_half_circle" />

    <Button
        android:id="@+id/button_right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="GREEN"
        android:textColor="@android:color/white"
        android:background="@drawable/right_half_circle" />

</LinearLayout>

OUTPUT:

enter image description here

Hope this will help~

Upvotes: 3

mdb
mdb

Reputation: 166

Hi user23423534, Applying xml shape as background to button and placing button side by side will help u solve the problem.

Upvotes: 2

Android Geek
Android Geek

Reputation: 9225

Please check the below code.

Layout file: 

 <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
    <Button
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:background="@drawable/shape"/>
        <Button
            android:layout_width="50dp"
            android:layout_height="100dp"
            android:background="@drawable/shape1"/>
        </LinearLayout>

shape drawable 

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

shape1 drawable 

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

Upvotes: 0

Aditya Vyas-Lakhan
Aditya Vyas-Lakhan

Reputation: 13555

Try this way it work for me

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_horizontal"
android:layout_marginTop="15dp"        >

    <Button
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/btns"
        android:text="A"
        android:textColor="@android:color/white"

        />
        <View
            android:layout_width="1dp"
            android:layout_height="2dp"
            android:background="#f0f0f0"
            />
    <Button
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/bbb"

        android:text="B"
        android:textColor="@android:color/white"
        />
    </LinearLayout>
</LinearLayout>

btns.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="30dp"
        android:width="30dp"/>
    <solid android:color="#000000"/>
    <corners android:topLeftRadius="15dp"
        android:bottomLeftRadius="15dp"/>
</shape>

bbb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size android:height="30dp"
        android:width="30dp"/>
    <solid android:color="#000000"/>
    <corners android:topRightRadius="15dp"
        android:bottomRightRadius="15dp"/>
</shape>

OUTPUT

enter image description here

Upvotes: 3

Rujul Gandhi
Rujul Gandhi

Reputation: 1390

You have to create one drawable xml file.

left_corner.xml 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="1dp"
  android:bottomRightRadius="0dp" android:bottomLeftRadius="25dp" 
  android:topLeftRadius="25dp" android:topRightRadius="0dp"/>  // here you have to put dimen as per reqiurement

    <solid android:color="@color/green" />
</shape>

right_corner.xml 

 <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <corners android:radius="1dp"
      android:bottomRightRadius="25dp" android:bottomLeftRadius="0dp" 
      android:topLeftRadius="0dp" android:topRightRadius="25dp"/>  // here you have to put dimen as per reqiurement

        <solid android:color="@color/green" />
    </shape>

layout.xml 

<Linearlayout
             android:orientation="horizontal"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
     <Button android:layout_width="@dimen/_150sdp"
             android:layout_height="@dimen/_150sdp"
             android:background="@draable/left_corner"/>

     <Button android:layout_width="@dimen/_150sdp"
             android:layout_height="@dimen/_150sdp"
             android:background="@draable/right_corner"/>
</Linearlayout>

This was work for me..

Upvotes: 5

Related Questions