How to code a inner-outer gradient for a button
0
I want to achieve two gradients:
Goal gradient images
- For login I am not able to achieve the goal.
- For SignUp, I have coded following drawable:
XML:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
<shape>
<corners android:radius="@dimen/button_shadow_corner_radius" />
<solid android:color="@color/shadow_black" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
<stroke android:width="1dp" android:color="@color/button_background_light" />
<corners android:radius="@dimen/button_corner_radius" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Please suggest the solution for login gradient.
android gradient asked Nov 23 '18 at 11:06
Andro Developer
134
add a comment |
0
I want to achieve two gradients:
Goal gradient images
- For login I am not able to achieve the goal.
- For SignUp, I have coded following drawable:
XML:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
<shape>
<corners android:radius="@dimen/button_shadow_corner_radius" />
<solid android:color="@color/shadow_black" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
<stroke android:width="1dp" android:color="@color/button_background_light" />
<corners android:radius="@dimen/button_corner_radius" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Please suggest the solution for login gradient.
android gradient asked Nov 23 '18 at 11:06
Andro Developer
134
1
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09
add a comment |
0
0
0
I want to achieve two gradients:
Goal gradient images
- For login I am not able to achieve the goal.
- For SignUp, I have coded following drawable:
XML:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
<shape>
<corners android:radius="@dimen/button_shadow_corner_radius" />
<solid android:color="@color/shadow_black" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
<stroke android:width="1dp" android:color="@color/button_background_light" />
<corners android:radius="@dimen/button_corner_radius" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Please suggest the solution for login gradient.
android gradient asked Nov 23 '18 at 11:06
Andro Developer
134
I want to achieve two gradients:
Goal gradient images
- For login I am not able to achieve the goal.
- For SignUp, I have coded following drawable:
XML:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
<shape>
<corners android:radius="@dimen/button_shadow_corner_radius" />
<solid android:color="@color/shadow_black" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
<stroke android:width="1dp" android:color="@color/button_background_light" />
<corners android:radius="@dimen/button_corner_radius" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Please suggest the solution for login gradient.
android gradient android gradient asked Nov 23 '18 at 11:06
Andro Developer
134
asked Nov 23 '18 at 11:06
Andro Developer
134
edited Nov 23 '18 at 11:08
asked Nov 23 '18 at 11:06
Andro Developer
134
asked Nov 23 '18 at 11:06
Andro Developer
134
asked Nov 23 '18 at 11:06
Andro Developer
134
134
1
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09
add a comment |
1
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09
1
1
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09
add a comment |
4 Answers
4
active
oldest
votes
0
Try using the below drawable, change the colors and size as you need.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
Output:
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
add a comment |
0
I have achieved it in harder way but if someone is looking for this then following will save someone time.
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
This is the result:
enter image description here
Thanks everyone for your help :)
answered Nov 23 '18 at 13:13
Andro Developer
134
add a comment |
0
Please check this : you can play with Stroke/Solid colors as your need.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:width="2dp"/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
add a comment |
0
Try this layout. just adjust the blending of color, depends on you.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
Sample screenshot
answered Nov 24 '18 at 4:10
No Name
6610
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
});
}
});
draft saved
draft discarded
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%2f53445537%2fhow-to-code-a-inner-outer-gradient-for-a-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try using the below drawable, change the colors and size as you need.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
Output:
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
add a comment |
0
Try using the below drawable, change the colors and size as you need.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
Output:
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
add a comment |
0
0
0
Try using the below drawable, change the colors and size as you need.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
Output:
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
Try using the below drawable, change the colors and size as you need.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
Output:
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
answered Nov 23 '18 at 11:44
Karan Mer
4,25832762
4,25832762
add a comment |
add a comment |
0
I have achieved it in harder way but if someone is looking for this then following will save someone time.
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
This is the result:
enter image description here
Thanks everyone for your help :)
answered Nov 23 '18 at 13:13
Andro Developer
134
add a comment |
0
I have achieved it in harder way but if someone is looking for this then following will save someone time.
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
This is the result:
enter image description here
Thanks everyone for your help :)
answered Nov 23 '18 at 13:13
Andro Developer
134
add a comment |
0
0
0
I have achieved it in harder way but if someone is looking for this then following will save someone time.
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
This is the result:
enter image description here
Thanks everyone for your help :)
answered Nov 23 '18 at 13:13
Andro Developer
134
I have achieved it in harder way but if someone is looking for this then following will save someone time.
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
This is the result:
enter image description here
Thanks everyone for your help :)
answered Nov 23 '18 at 13:13
Andro Developer
134
answered Nov 23 '18 at 13:13
Andro Developer
134
answered Nov 23 '18 at 13:13
Andro Developer
134
answered Nov 23 '18 at 13:13
Andro Developer
134
134
add a comment |
add a comment |
0
Please check this : you can play with Stroke/Solid colors as your need.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:width="2dp"/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
add a comment |
0
Please check this : you can play with Stroke/Solid colors as your need.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:width="2dp"/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
add a comment |
0
0
0
Please check this : you can play with Stroke/Solid colors as your need.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:width="2dp"/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
Please check this : you can play with Stroke/Solid colors as your need.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:width="2dp"/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
answered Nov 23 '18 at 13:25
Deep Patel
1,3302617
1,3302617
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
add a comment |
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
It will give me a fixed colour on button border instead of a layer of darker to lighter colour from border start to border end respectively.
– Andro Developer
Nov 23 '18 at 13:34
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
You can use gradient file in place of solid color.
– Deep Patel
Nov 24 '18 at 14:12
add a comment |
0
Try this layout. just adjust the blending of color, depends on you.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
Sample screenshot
answered Nov 24 '18 at 4:10
No Name
6610
add a comment |
0
Try this layout. just adjust the blending of color, depends on you.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
Sample screenshot
answered Nov 24 '18 at 4:10
No Name
6610
add a comment |
0
0
0
Try this layout. just adjust the blending of color, depends on you.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
Sample screenshot
answered Nov 24 '18 at 4:10
No Name
6610
Try this layout. just adjust the blending of color, depends on you.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
Sample screenshot
answered Nov 24 '18 at 4:10
No Name
6610
answered Nov 24 '18 at 4:10
No Name
6610
answered Nov 24 '18 at 4:10
No Name
6610
answered Nov 24 '18 at 4:10
No Name
6610
6610
add a comment |
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53445537%2fhow-to-code-a-inner-outer-gradient-for-a-button%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
1
post your code. what you have tried?
– Karan Mer
Nov 23 '18 at 11:08
Well, to achieve the gradient on the inner border (dark area) you need a radial gradient. Radial gradient with selectors only will work for perfect circles... You should use a image for this, or you will have a hard border as you can see in @KaranMer answer.
– Giovanne
Nov 23 '18 at 12:09