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.
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..
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
#. 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:
Hope this will help~
Hi user23423534,
Applying xml shape as background to button and placing button side by side will help u solve the problem.
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>
Related
I'm trying to create a circular text-view with a rectangle at bottom for reference purpose here I'm sharing the Sample image and code what I'm trying to achieve
Can anyone help me in create this following screen shot, Thanks in advance.
Try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/myTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/ic_dot"
android:gravity="center"
android:padding="10dp"
android:text="sdsjhdsd"
android:textColor="#ff00" />
<TextView
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/myTv"
android:gravity="center"
android:layout_centerHorizontal="true"
android:background="#drawable/test"
android:text="sdsjhdsd" />
</RelativeLayout>
</LinearLayout>
android:background="#drawable/ic_dot"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
android:topLeftRadius="100dp"
android:topRightRadius="100dp" />
<solid android:color="#color/lightWhite" />
<size
android:width="100dp"
android:height="100dp" />
<stroke
android:width="3dp"
android:color="#22ff00" />
</shape>
android:background="#drawable/test"
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#e60707" />
<corners android:radius="50dp" />
</shape>
RESULT
I am trying to create rounded borders around two of the EditTexts in my one of my layouts. For this I have created a xml rounded_pass.xml and assigned it as a background to LinearLayout containing both the EditText fields. But I also want to have a seperator between EditViews.
rounded_pass.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
</shape>
</item>
</selector>
LoginActivity.xml:
.......
.......
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:layout_below="#+id/imageView"
android:background="#drawable/rounded_pass"
>
<EditText
android:layout_width="215dp"
android:layout_height="wrap_content"
android:id="#+id/editText"
/>
<EditText
android:layout_width="215dp"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:ems="10"
android:id="#+id/editText2"
/>
</LinearLayout>
.......
.......
The Effect I want to have is:
Desired Effect
Right Now:
Error Image
Create single xml rounded_border.xml and apply it to the root layout.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<corners
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
/>
<stroke android:width="1dip" android:color="#1caadf" />
<!--<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#ffffff" />-->
</shape>
</item>
</selector>
You can try this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_uname"
android:orientation="vertical">
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent" />
<View
android:id="#+id/v1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#1caadf"></View>
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:ems="10"
android:inputType="textPassword" />
</LinearLayout>
Instead of giving borders to both Email and password, give border to its parent view. i.e RelativeLayout, LinearLayout or any layout
<LinearLayout background="#drawable/round_corner_drawable">
//your both edittexts
</LinearLayout>
Add View having height of 1dp in between both your EditText, so that line will be drawn which will look like a border only
There is minor changes in your shape xml file.
You have set same corner value for both file.
There should be corner value 5 bottomLeft & bottomRight for password filed.
here is perfect code. please run in device and check it.
rounded_uname.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dip"
android:bottomRightRadius="0dip"
android:topLeftRadius="5dip"
android:topRightRadius="5dip"
/>
<stroke
android:width="1dip"
android:color="#1caadf" />
</shape>
rounded_pass.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="5dip"
android:bottomRightRadius="5dip"
android:topLeftRadius="0dip"
android:topRightRadius="0dip"
/>
<stroke
android:width="1dip"
android:color="#1caadf" />
</shape>
I'm creating a custom border to LinearLayout, to do it I'm using shape . The problem is when I set #drawable/custom_linear_border all EditText has background black. This problem occur with Android 2.3 because superior this problem does not occur.
How could I solve it ?
custom_linear_border
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>
LinearLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/custom_linearlayout_border"
android:layout_marginTop="50dp"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/icon_login"
/>
<EditText
android:id="#+id/etEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="13dp"
android:layout_gravity="center_vertical"
android:hint="Email"
android:inputType="textEmailAddress"
android:background="#00000000"
/>
</LinearLayout>
//Use this drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dip"
android:color="#android:color/darker_gray" />
</shape>
I'm trying to make a drawable like below:
I've made this by the following code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/white"
android:padding="10dp"
android:orientation="vertical">
<View
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/bg_round_button_green"/>
<View
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/bg_round_button_green"/>
<TextView
android:layout_width="match_parent"
android:layout_height="36dp"
android:text="Text"
android:textColor="#color/white"
android:textSize="22sp"
android:gravity="center"
android:layout_centerVertical="true"
android:background="#color/siam_green3"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
</RelativeLayout>
bg_round_button_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring">
<solid android:color="#FF0DAB61"/>
</shape>
I also tried this:
bg_round_button_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF0DAB61"/>
<corners android:radius="100dp"/>
</shape>
But it displays,
Is it possible to do this with a single shape drawable (without creating three Views) ?
Try this. Works perfectly for me.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#A5000000"/>
<stroke android:width="0dp"
android:color="#00FFFFFF"/>
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"/>
<corners android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
If you will do one drawable with corners set to some big value:
<corners android:radius="100dp" />
You will get what you want without 3 views
I try to make a design for my application. I order to attract user's attention I tried to imagine something interesting.
My plan is obtaining a design like below:
Visual elements:
red areas are buttons
thin circles are images i will out later...
My goals:
On creation of the activity, buttons will com into screen, from out
bounds of the screen. (they can come one by one in an order, because
I do not want to get crazy with asynctasks, handlers and etc. )
2 corners of each button will be rounded smoothly
The Important and last one: when I click on a button, I want it to
hide out of the screen with reverse action as it came to screen.
At the first second I have faced with a problem already. Here it is:
As you see there is some space between button and layout.
Current xml layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="22dp"
android:text="Button" />
</RelativeLayout>
How can I solve this problem?
And I will be very happy to here suggestions about how to achieve my suggestions.
Ok, try that:
drawable/corners.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#BBBBBB" />
</shape>
</item>
</selector>
with that:
layout/button.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginTop="22dp"
android:background="#drawable/corners"
android:text="Button" />
</RelativeLayout>
Here is the version with text and picture:
drawable/corner.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#BBBBBB"/>
</shape>
</item>
</selector>
drawable/corner_pressed.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<corners android:topRightRadius="10dp" android:bottomRightRadius="10dp" />
<solid android:color="#888888"/>
</shape>
</item>
</selector>
drawable/states.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/corner_pressed" />
<item android:drawable="#drawable/corner" />
</selector>
and the main layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="22dp"
android:background="#drawable/states"
android:clickable="true">
<TextView
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:layout_toRightOf="#id/button1"
/>
</RelativeLayout>
</RelativeLayout>