Thursday 27 March 2014

Designing And Implementing Android UI For Phones and Tablets

I have found one of Google IO pdf document which give us some fundamental guide for making android UI design for Phone and Tables.


Please have look on pdf from below link.

http://goo.gl/QJFCTG

Tuesday 11 March 2014

How to show PopupWindow in android with background transparent when it show

In this tutorial we will make android popup which will show as drop-down window at particular view point.

Below is Activity class which use to make Popup window on button click.


public class PoupWindowActivity extends Activity implements OnClickListener{


public Button mBtnPopUpWindow;

private PopupWindow mPopupWindow;

private Button mBtnCancel;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);

setContentView(R.layout.main_screen_layout);

initView();
}



private void initView(){

mBtnPopUpWindow=(Button)findViewById(R.id.btn_popup);
mBtnPopUpWindow.setOnClickListener(this);


}



@Override
public void onClick(View v) {

switch(v.getId()){


case R.id.btn_popup:

showPopupWindow();

break;

case R.id.btn_cancel:


if(mPopupWindow!=null & mPopupWindow.isShowing()){
mPopupWindow.dismiss();
mPopupWindow=null;
}
break;
}
}


private void showPopupWindow(){

LayoutInflater mLayoutInflater=LayoutInflater.from(this);
View mView=mLayoutInflater.inflate(R.layout.pop_up_layout, null);
mPopupWindow=new PopupWindow(mView, LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true);
// mPopupWindow=new PopupWindow(mView,,LayoutParams.WRAP_CONTENT);
mPopupWindow.setContentView(mView);
mBtnCancel=(Button) mView.findViewById(R.id.btn_cancel);
mBtnCancel.setOnClickListener(this);
Drawable d = new ColorDrawable(Color.WHITE);
        d.setAlpha(130);
     
mPopupWindow.setBackgroundDrawable(new BitmapDrawable());

mPopupWindow.showAsDropDown(mBtnPopUpWindow, 0, 0,Gravity.LEFT);
getWindow().setBackgroundDrawable(d);
mPopupWindow.setOnDismissListener(new OnDismissListener() {

@Override
public void onDismiss() {

Drawable d = new ColorDrawable(Color.WHITE);

getWindow().setBackgroundDrawable(d);
}
});
}


}


Here are xml file use for Activity and Popup window layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="horizontal" >

        <Button
         
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/popupwindow"
            android:id="@+id/btn_popup"
            />
    </LinearLayout>

</LinearLayout>



Popup window xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/img_popup_arrow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_marginRight="30dp"
            android:scaleType="fitXY"
            android:src="@drawable/ic_alerts_and_states_warning" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:layout_below="@+id/img_popup_arrow"
            android:background="@drawable/bg_orange_round" >
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_white_round"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/editxt_search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName" >

            <requestFocus />
        </EditText>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="right" >

            <Button
                android:id="@+id/btn_search"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/search" />

            <Button
                android:id="@+id/btn_cancel"
                style="?android:attr/buttonStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="right|center_vertical"
                android:text="@string/cancel" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>


Here is output of our popup window:


You can download source code from my drive as well:

https://drive.google.com/file/d/0B-8An4Rd1nmKeVJSejlEYUxwRGc/edit?usp=sharing