Skip to main content

Background And Borders (Drawable - layer-list)

  • Rounded Corners


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="10dp"
    android:shape="rectangle" >
    <solid android:color="#C8C8C8" />
    <corners
         android:bottomLeftRadius="10dp"
         android:bottomRightRadius="10dp"
         android:topLeftRadius="10dp"
          android:topRightRadius="10dp" />
</shape>
__________________________________________________________________


  • Rectangle frame


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
     <solid android:color="#FFFFFF" />
     <stroke
        android:width="1dp"
        android:color="#CCCCCC" />
</shape>
__________________________________________________________________

Use of <layer-list> in drawable (xml)


  • Rounded Corners with Shadow



<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Shadow At Bottom-->
     <item>
        <shape android:shape="rectangle" >
            <solid android:color="#d8d8d8" />
             <corners android:radius="10dp" />
        </shape>
    </item>

    <!-- White Color At Top -->

    <item android:bottom="3px">
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFF" />
             <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>
__________________________________________________________________



  • Rectangle frame with Shadow



<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
             <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
             <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
             <solid android:color="#20CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
             <solid android:color="#30CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
             <solid android:color="#50CCCCCC" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/White" />
             <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>


Change padding in all items and see the difference.
e.g. 

 <padding
                android:bottom="1dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
__________________________________________________________________



<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- dropshadow -->
    <item>
        <shape>
            <solid android:color="#10CCCCCC" />
             <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#20CCCCCC" />
             <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#40CCCCCC" />
             <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#50CCCCCC" />
             <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#60CCCCCC" />
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="0dp"
                android:top="0dp" />
        </shape>
    </item>

    <!-- content background -->
    <item>
        <shape>
            <solid android:color="#FDC650" />
        </shape>
    </item>
</layer-list>


Comments

Post a Comment

Popular posts from this blog

Transparent Color Code

Transparent Color Code : Color hexadecimal notation is like the following:  #AARRGGBB A: alpha R: red G: green B: blue ____________________________________________ E.g. for 50% white you'd use             #80FFFFFF.              # ( Transparent  hex value ) (Any Color code) ____________________________________________ Normal opaque black hex- "#000000" Fully transparent - "#00000000" Fully opaque - "#FF000000" 50% transparent - "#80000000" ____________________________________________ Percentages to hex values.  100% — FF 95% — F2 90% — E6 85% — D9 80% — CC 75% — BF 70% — B3 65% — A6 60% — 99 55% — 8C 50% — 80 45% — 73 40% — 66 35% — 59 30% — 4D 25% — 40 20% — 33 15% — 26 10% — 1A 5% — 0D 0% — 00 ____________________________________________ All hex value from 100% to 0% alpha: 100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% ...
Post a Comment
Read more
Dark Theme elevation overlay hex 00dp 0% #121212 01dp 5% #1e1e1e 02dp 7% #222222 03dp 8% #242424 04dp 9% #272727 06dp 11% #2c2c2c 08dp 12% #2e2e2e 12dp 14% #333333 16dp 15% #343434 24dp 16% #383838
Post a Comment
Read more

Custom Fonts

In android, you can define your own custom fonts for the strings in your application. You just need to download the required font, and then place it in assets/fonts folder. Y ou can access it in your java code through Typeface class. - Use  setTypeface()  method TextView textView = (TextView) findViewById(R.id. TextView1 ) ; Typeface custom_font = Typeface. createFromAsset (getAssets() , "fonts/font name.ttf" ) ; textView.setTypeface(custom_font) ;
Post a Comment
Read more