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;








0















I want to create custom button background that look like this:



enter image description here



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.
enter image description here



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.










share|improve this question




























    0















    I want to create custom button background that look like this:



    enter image description here



    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.
    enter image description here



    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.










    share|improve this question
























      0












      0








      0








      I want to create custom button background that look like this:



      enter image description here



      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.
      enter image description here



      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.










      share|improve this question














      I want to create custom button background that look like this:



      enter image description here



      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.
      enter image description here



      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






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 15 '18 at 12:49









      ExpiredmindExpiredmind

      364215




      364215






















          2 Answers
          2






          active

          oldest

          votes


















          2














          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:



          enter image description here






          share|improve this answer

























          • 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


















          0














          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>





          share|improve this answer

























            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


















            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









            2














            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:



            enter image description here






            share|improve this answer

























            • 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















            2














            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:



            enter image description here






            share|improve this answer

























            • 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













            2












            2








            2







            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:



            enter image description here






            share|improve this answer















            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:



            enter image description here







            share|improve this answer














            share|improve this answer



            share|improve this answer








            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

















            • 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













            0














            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>





            share|improve this answer





























              0














              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>





              share|improve this answer



























                0












                0








                0







                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>





                share|improve this answer















                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>






                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 19 '18 at 3:40









                Pang

                7,0121666105




                7,0121666105










                answered Nov 15 '18 at 13:02









                mgouravsharma21mgouravsharma21

                121




                121



























                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    Darth Vader #20

                    Ondo

                    How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker