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

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

Android : Custom Listview with EditText in it and Managing data of Editext

In One of my application we required to have EditText in Listview and i need to manage hot to fetch data from particular Editext when user done Editing after Using TextWatcher interface i can able to do what i required .

So I am sharing my code with you people ,if any one have better approach to work with Edittext in Listview and manage it's data as well then you can share your idear and implementation as well.


As my screen contain only list so i prefer to use List Activity.

public class ListActivity extends android.app.ListActivity {
private ListView mListview;
private final int TOTAL_ITEMS=100; 
private BaseListAdapter mBaseListAdapter;
ArrayList<String> mArrayList=new ArrayList<String>(TOTAL_ITEMS);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setContentView(R.layout.activity_list);
init();
}
private void init(){
mListview=getListView();
for(int i=0;i<TOTAL_ITEMS;i++){
mArrayList.add("");
}
mBaseListAdapter=new BaseListAdapter(ListActivity.this, mArrayList);
mListview.setAdapter(mBaseListAdapter);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.list, menu);
return true;
}

}


Other class required is my Listview adapter class which is below .

public class BaseListAdapter extends BaseAdapter implements OnTouchListener,TextWatcher{
private Context mContext;
private ArrayList<String> mArrayEdittxt;
private LayoutInflater mLayoutInflater;
private int mPosition;
private boolean isTouch=false;
public BaseListAdapter(Context _Context,ArrayList<String> mArrayEditTxtData){
this.mContext=_Context;
mArrayEdittxt=mArrayEditTxtData;
mLayoutInflater=(LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
// TODO Auto-generated method stub
return mArrayEdittxt.size();
}

@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder mViewHolder;
if(convertView==null){
mViewHolder=new ViewHolder();
convertView=mLayoutInflater.inflate(R.layout.list_row_items, parent, false);
mViewHolder.mEditxt=(EditText)convertView.findViewById(R.id.editxt);
mViewHolder.mImgView=(ImageView)convertView.findViewById(R.id.imgview);
convertView.setTag(mViewHolder);
}else{
mViewHolder=(ViewHolder) convertView.getTag();
}
isTouch=false;
mViewHolder.mEditxt.addTextChangedListener(BaseListAdapter.this);
mViewHolder.mEditxt.setOnTouchListener(BaseListAdapter.this);
mViewHolder.mEditxt.setTag(position);
mViewHolder.mEditxt.setText(mArrayEdittxt.get(position));
return convertView;
}
public class ViewHolder{
EditText mEditxt;
ImageView mImgView;
}


@Override
public boolean onTouch(View v, MotionEvent event) {
Log.v("LOG_TAG", "onTouch-->");
isTouch=true;
mPosition=(Integer) v.getTag();
return false;
}



@Override
public void afterTextChanged(Editable s) {
Log.v("LOG_TAG", "afterTextChanged -->"+ s.toString() );
if(isTouch){
mArrayEdittxt.set(mPosition, s.toString());
}
}



@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}



@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}

}


Below is my listview row xml file .

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

    <EditText
        android:id="@+id/editxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_toLeftOf="@+id/imgview"
        android:ems="10" >

        <requestFocus />
        
    </EditText>

    <ImageView
        android:id="@+id/imgview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:src="@android:drawable/ic_media_play" />

</RelativeLayout>

If any one want to check my source code they can directly download it from my Google Drive -->
https://drive.google.com/file/d/0B-8An4Rd1nmKNXNDTDRqM2FxWFU/edit?usp=sharing