Skip to main content

Adding depth

Android sdk 5.0 - material, has a new property called elevation for views. Elevation gives z value for views. So views with higher elevation will cast a shadow.

Elevation can be set using xml
    android:elevation ="somevalue"

Or using code
    viewname.setElevation(5);


Let us look at how a textview uses elevation property.


<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#a3c6fa"
        android:elevation="5dp"
        android:text="Hello World!"/>

We are setting elevation of the textview to 5dp. We are setting light blue background color for textview.

Now our hello world textview looks like this.

Pretty simple. Isn't it?


Not quite so. Because elevation property needs sdk 21 or higher. You can not tell user to buy a new phone, just so that views will have a shadow. Can you?





The solution for older phones is layer-list. A layer-list drawable places different drawables on top of each other with given offset.

So let us write our layer-list .
shadow.xml

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

        </shape>
    </item>
    <item  android:top="0dp" android:right="2dp" android:bottom="2dp" android:left="0dp">
        <shape>
            <solid android:color="#8fd1f5"
              />

        </shape>
    </item>

</layer-list>

Each <item> in this is one layer drawable. We have two layers here. First layer is grey color rectangle. Next layer is light blue rectangle with offset of 2dp at right and bottom.


Next let us add this as background to our textview.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
     
        android:text="Hello World!"/>

After adding this code to the app, here is how our hello world looks like 


Who needs to spend hours on GIMP, when we know our xml?

Comments

Popular posts from this blog

Simple ListView Adapter and list item select

When you are using a listview in your applications many a times you will write your own adapter to display item. But if your list is very simple showing a list of strings, you can use inbuilt adapters like ArrayAdapter, SimpleCursorAdapter etc.

ArrayAdapterLet us look at an example

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ListView android:layout_height="wrap_content" android:id="@+id/listView1" android:layout_width="match_parent" android:layout_margin="20dp"> </ListView> </LinearLayout>

And add these lines to the onCreate method of the activity.

super.onCreate(savedInstanceState); …

Drawables in Android - Layer drawable

Let us see how to use layer drawable. You can have two or more bitmaps on different layers to create such a drawable

Using xml:

You should use layer-list in your xml file to create layerdrawable. Here is layer.xml
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/whiteicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/blueicon" android:gravity="top|left"/> </item> <item> <bitmap android:src="@drawable/redicon" android:gravity="top|left"/> </item> </layer-list>
We are using three different bitmaps whiteicon.png, redicon.png and blueicon.png which are present in /res/drawable/mdpi folder. All these are of different sizes and aligned to top left. This drawab…

DatePickers in Android

DatePicker is a view which lets the user select a date showing a calendar or 3 spinners for dd, mm and yy.

Let us see how to use this.
Easy Method: To use a DatePicker you can use DatePickerDialog. This can be created and shown programmatically too.

publicvoidonCreate(Bundle b){/*********/ Button btn =(Button)findViewById(R.id.btn); btn.setOnClickListener(new View.OnClickListener(){@OverridepublicvoidonClick(View v){ showPickerDialog();}});}privatevoidshowPickerDialog(){ DatePickerDialog dtPickerDlg =new DatePickerDialog(this,this, 2017,10,20); dtPickerDialog.show();}

In our xml file, let us have a button and in the onclick listener of the button, let us display the date picker dialog - we call showPickerDialog.

In showPickerDialog,  we are using a random date to initialize.

The first  parameter is the context. Second parameter is the class which implements the interface OnDateSetListener. Next three parameters are year, month (Jan is 0) and …