Drawing custom oval and rectangle XML shape as buttom background
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I want to create custom button background that look like this:
I can't use corners
attribute in rectangle shape
because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.
I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.
android xml shapes layer-list
add a comment |
I want to create custom button background that look like this:
I can't use corners
attribute in rectangle shape
because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.
I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.
android xml shapes layer-list
add a comment |
I want to create custom button background that look like this:
I can't use corners
attribute in rectangle shape
because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.
I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.
android xml shapes layer-list
I want to create custom button background that look like this:
I can't use corners
attribute in rectangle shape
because its rounds only the corner and the middle of the left side is straight or whenver I set too much value to that attribute it looks like that.
I hope that i can combine 2 shapes (oval and rectangle) like in here but whenever I try to rotate that layer-list it doesnt look like wanted shape.
android xml shapes layer-list
android xml shapes layer-list
asked Nov 15 '18 at 12:49
ExpiredmindExpiredmind
364215
364215
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Try like this:
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="@drawable/test"
android:text="Button"
android:textColor="@color/black"
/>
and @drawable/test
will be like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:right="-100dp"
android:top="-30dp"
android:bottom="-30dp">
<shape android:shape="oval">
<solid
android:color="@android:color/white" />
</shape>
</item>
</layer-list>
Note:
I know this is not the best solution. But for now this can help.
and if you want to increase the width of Button then change the below attributes accordingly to fit your need.
android:top="-30dp"
android:bottom="-30dp"
and the result
will look like this:
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
add a comment |
Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#2b74d2"
android:startColor="#2b74d2"
android:type="linear" />
</shape>
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319855%2fdrawing-custom-oval-and-rectangle-xml-shape-as-buttom-background%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try like this:
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="@drawable/test"
android:text="Button"
android:textColor="@color/black"
/>
and @drawable/test
will be like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:right="-100dp"
android:top="-30dp"
android:bottom="-30dp">
<shape android:shape="oval">
<solid
android:color="@android:color/white" />
</shape>
</item>
</layer-list>
Note:
I know this is not the best solution. But for now this can help.
and if you want to increase the width of Button then change the below attributes accordingly to fit your need.
android:top="-30dp"
android:bottom="-30dp"
and the result
will look like this:
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
add a comment |
Try like this:
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="@drawable/test"
android:text="Button"
android:textColor="@color/black"
/>
and @drawable/test
will be like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:right="-100dp"
android:top="-30dp"
android:bottom="-30dp">
<shape android:shape="oval">
<solid
android:color="@android:color/white" />
</shape>
</item>
</layer-list>
Note:
I know this is not the best solution. But for now this can help.
and if you want to increase the width of Button then change the below attributes accordingly to fit your need.
android:top="-30dp"
android:bottom="-30dp"
and the result
will look like this:
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
add a comment |
Try like this:
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="@drawable/test"
android:text="Button"
android:textColor="@color/black"
/>
and @drawable/test
will be like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:right="-100dp"
android:top="-30dp"
android:bottom="-30dp">
<shape android:shape="oval">
<solid
android:color="@android:color/white" />
</shape>
</item>
</layer-list>
Note:
I know this is not the best solution. But for now this can help.
and if you want to increase the width of Button then change the below attributes accordingly to fit your need.
android:top="-30dp"
android:bottom="-30dp"
and the result
will look like this:
Try like this:
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="@drawable/test"
android:text="Button"
android:textColor="@color/black"
/>
and @drawable/test
will be like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="0dp"
android:right="-100dp"
android:top="-30dp"
android:bottom="-30dp">
<shape android:shape="oval">
<solid
android:color="@android:color/white" />
</shape>
</item>
</layer-list>
Note:
I know this is not the best solution. But for now this can help.
and if you want to increase the width of Button then change the below attributes accordingly to fit your need.
android:top="-30dp"
android:bottom="-30dp"
and the result
will look like this:
edited Nov 15 '18 at 13:50
answered Nov 15 '18 at 13:37
Muhammad warisMuhammad waris
16218
16218
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
add a comment |
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
it worked well thank you. I have another small task with it do you know how to round a right corners a little bit? (around 6 dp should work)
– Expiredmind
Nov 15 '18 at 15:06
add a comment |
Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#2b74d2"
android:startColor="#2b74d2"
android:type="linear" />
</shape>
add a comment |
Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#2b74d2"
android:startColor="#2b74d2"
android:type="linear" />
</shape>
add a comment |
Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#2b74d2"
android:startColor="#2b74d2"
android:type="linear" />
</shape>
Use the code below as drawable file and set as background to button. For Curvy edges, you can increase decrease radius from below.
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="3dp"
android:color="#ffffff" />
<corners android:radius="10dp" />
<gradient
android:angle="270"
android:endColor="#2b74d2"
android:startColor="#2b74d2"
android:type="linear" />
</shape>
edited Nov 19 '18 at 3:40
Pang
7,0121666105
7,0121666105
answered Nov 15 '18 at 13:02
mgouravsharma21mgouravsharma21
121
121
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53319855%2fdrawing-custom-oval-and-rectangle-xml-shape-as-buttom-background%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown