CODEWITHSUNDEEP
androiduser-interfaceandroid-studio
Madona wambua
Madona wambua

Reputation: 1428

How to Customize a button in Android to look as the one shown below, See image

I am learning how to make good UI in Android and i wanted to know how i can make this kind of a button or similar. Any help will be appreciated.

I have struggled with UI, i dont i am not a designer but will like to learn slowly. This is what i have tried so far, I want to know how i can add the corners. Thanks in advance

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="14dp"
        />
    <gradient
        android:angle="45"
        android:centerX="55%"
        android:centerColor="#FFE9B3"
        android:startColor="#FFC627"
        android:endColor="#FFD152"
        android:type="linear"
        />
    <padding
        android:left="4dp"
        android:top="2dp"
        android:right="4dp"
        android:bottom="2dp"
        />
    <size
        android:width="270dp"
        android:height="60dp"
        />
    <stroke
        android:width="7dp"
        android:color="#FFFFFF"
        />
</shape>

See image

enter image description here

Upvotes: 0

Views: 42

Answers (1)

user4617571
user4617571

Reputation:

you can use layer-list like fallowing :

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#b0a079"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>

    <item android:bottom="5dp">
        <shape>
            <solid android:color="#efefef"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>

    <item android:bottom="15dp">
        <shape>
            <solid android:color="#df9931"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>

    <item android:bottom="25dp">
        <shape>
            <solid android:color="#ffc627"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
</layer-list>

Updated : for "EASY" (button text) you can change your button typeface for custom typeface(font) that similar with preview image. find your custom font, copy font in asset and use it like following code :

Button btnEasy =(Button)findViewById(R.id.btn_easy);
Typeface typeFace = Typeface.createFromAsset(getAssets(),"your_custom_font_name.ttf");
btnEasy.setTypeface(typeFace);

I suggest create your typeface from assets once time and store it in singleton object if you want use it in other place in your application (it's just show use case)

Upvotes: 2

Related Questions