Tag Archives: Android Development

SlidingDrawer in Android UI Control

SlidingDrawer

SlidingDrawer is a control which hides content (controls and text level) out of the screen and allows the user to drag a handle to bring the content on the screen.

SlidingDrawer can be used vertically or horizontally. A special Widget composed of two children views:

1) the handle: this is used to be drag by the user and content attached to the handle.

2) the content:the content layout is attached to the handle and drag on to the screen when the user pulls the handle.

sliding drawer should be used as an overlay inside layouts, this means that sliding drawer should only be used inside of a frame layout or a relative layout. the size of the sliding drawer defines how much space the content will occupy one slide out.

inside a xml layout sliding drawer must define the ID of the handle and the content layout.

Attributes of sliding drawer:-

a) android:allowSingleTab : it is used to set weather the drawer can be open/close by a single tab on a handle.

b) android:animateOnClick : this attribute sets weather the drawer should be open/close with an animation effect when the     user click on the handle.

c) android:bottomOffset : this sets the extra off sets for the handle at the bottom of the SlidingDrawer.

d) android:content : this attribute act as an identifier for the child that represents the drawers content.

e) android:handle : this attribute act as an identifier for the child that represents the drawers handle.

f) android:orientation : this sets the orientation of the sliding drawer.

g) android:topOffset : this sets the extra off sets for the handle at the top of the SlidingDrawer.

 

.xml file: 

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:id=”@+id/LinearLayout01″
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@drawable/androidpeople”>
<SlidingDrawer android:id=”@+id/SlidingDrawer”
android:layout_alignParentBottom=”true”
android:layout_width=”fill_parent”
android:layout_height=”250dip”
android:handle=”@+id/slideHandleButton”
android:content=”@+id/contentLayout”
android:padding=”10dip”
android:orientation=”vertical”>

<Button android:id=”@+id/slideHandleButton”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/closearrow” />

<LinearLayout android:id=”@+id/contentLayout”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”#c1cdcd”
android:gravity=”center|top”
android:orientation=”vertical”
android:padding=”10dip” >

<Button android:id=”@+id/Button01″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/download” />

<Button android:id=”@+id/Button02″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/download1″
android:layout_marginTop=”15dp”/>

<Button android:id=”@+id/Button03″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:background=”@drawable/images”
android:layout_marginTop=”15dp”/>

</LinearLayout>

</SlidingDrawer>

</RelativeLayout>

 

Java file: 

package com.CoreProgrammers.drawer;

import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SlidingDrawer;
import android.widget.SlidingDrawer.OnDrawerCloseListener;
import android.widget.SlidingDrawer.OnDrawerOpenListener;
import android.widget.Toast;

public class slidingDrawerExample extends Activity
{

Button slideHandleButton;
SlidingDrawer slidingDrawer;
Button Button01;
Button Button02;
Button Button03;

public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);

setContentView(R.layout.main);

slideHandleButton = (Button) findViewById(R.id.slideHandleButton);
Button01= (Button) findViewById(R.id.Button01);
Button02= (Button) findViewById(R.id.Button02);
Button03= (Button) findViewById(R.id.Button03);

slidingDrawer = (SlidingDrawer) findViewById(R.id.SlidingDrawer);

slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener()
{
@Override
public void onDrawerOpened()
{
slideHandleButton.setBackgroundResource(R.drawable.openarrow);
}
});

slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener()
{

@Override
public void onDrawerClosed()
{
slideHandleButton.setBackgroundResource(R.drawable.closearrow);
}

});

Button01.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{

Toast toast = Toast.makeText(slidingDrawerExample.this, “Facebook!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

Button02.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{
Toast toast = Toast.makeText(slidingDrawerExample.this, “Whatsapp!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

Button03.setOnClickListener(new OnClickListener()
{

@Override
public void onClick(View v)
{
Toast toast = Toast.makeText(slidingDrawerExample.this, “linkedin!!”, Toast.LENGTH_SHORT);
toast.setGravity(Gravity.LEFT, 0 , 0);
toast.show();
}
});

}

}

SeekBar in Android UI controls

SeekBar is an Android UI Control which is an extension of ProgressBar Class with an addition of drag-able thumb, the user can touch the thumb and drag left or right to set the current Progress level.

seekbar

.xml file:

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#ff009924″
tools:context=”com.CoreProgrammers.android.seekbar.MainActivity” >

<SeekBar android:id=”@+id/seekBar1″
android:layout_width=”400dp”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentTop=”true”
android:layout_marginTop=”26dp”
android:background=”#ffff2244″
android:thumb=”@drawable/ic_launcher”
android:scrollbarStyle=”outsideInset”
android:max=”100″/>

<TextView android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_below=”@+id/seekBar1″
android:layout_marginLeft=”29dp”
android:layout_marginTop=”14dp” />

</RelativeLayout>

Java file:

 

package com.CoreProgrammers.android.seekbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

private SeekBar seekBar;
private TextView textView;

@Override
protected void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initializeVariables();

textView.setText(“Covered: ” + seekBar.getProgress() + “/” + seekBar.getMax());

seekBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener()
{
int progress = 0;

@Override
public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser)
{
progress = progresValue;
textView.setText(“Covered: ” + progress + “/” + seekBar.getMax());
}

@Override
public void onStartTrackingTouch(SeekBar seekBar)
{
Toast.makeText(getApplicationContext(), “Started tracking seekbar”, Toast.LENGTH_SHORT).show();
}

@Override
public void onStopTrackingTouch(SeekBar seekBar)
{
Toast.makeText(getApplicationContext(), “Stopped tracking seekbar”, Toast.LENGTH_SHORT).show();
}
});
}

private void initializeVariables()
{
seekBar = (SeekBar) findViewById(R.id.seekBar1);
textView = (TextView) findViewById(R.id.textView1);
}
}

ImageView in Android UI controls

ImageView is one of the UI Widgets that is used to display images in our Android Application. ImageView comes with different configuration options to support different scale types. Scale types options are used for scaling the bounds/boundary of an image to the bounds/boundary of current view.

below are the listed scale type configuration property of current view:

1) center
2) centerCrop
3) centerInside
4) fitCenter
5) fitEnd
6) fitStart
7) fitXY
8) matrix

imageview

.xml file:

java file:

package com.example.imageview;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity
{
ImageView _objimageView;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//setting image resource from drawable
_objimageView = (ImageView) findViewById(R.id.imageView2);

}

}

DatePicker in Android UI controls

DatePicker is an Android UI Control which allows the user to select the date consisting of day, month and year in any custom user interface, to achieve this functionality Android Provides DatePicker dialog components/class.

Important Methods of the DatePicker control:

1) getDayOfMonth() :- This method of DatePicker control returns the selected day of month.

2) getMonth() :- This method of DatePicker control returns the selected month.

3) getYear() :- This method of DatePicker control returns the selected year.

4) setMaxDate(long maxDate) :- This method of DatePicker control, sets the maximum date supported by the DatePicker control in milliseconds started from January 1, 1997 00:00:00 .

5) setMinDate(long minDate) :- This method of DatePicker control, sets the minimum date supported by the DatePicker control in milliseconds started from january 1 , 1997 00:00:00 .

6) setSpinnerShown(boolean shown) :- This method of DatePicker control, sets the spinner of the DatePicker controlto true or false.

7) updateDate(int year, int month, int dayOfMonth) :- This method of DatePicker class is a very Important method which sets the date in the DatePicker control provided by the user or the developer.

DatePicker

.xml file:


java file:

package com.example.androiddatepicker;

import java.util.Calendar;

import android.app.Activity;
import android.app.DatePickerDialog;
import android.app.Dialog;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.ImageButton;

public class MainActivity extends Activity
{
private ImageButton imageButton;
private Calendar cal;
private int day;
private int month;
private int year;
private EditText editText;

private DatePickerDialog.OnDateSetListener datePickerListener;

@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imageButton = (ImageButton) findViewById(R.id.imageButton);

cal = Calendar.getInstance();
day = cal.get(Calendar.DAY_OF_MONTH);
month = cal.get(Calendar.MONTH);
year = cal.get(Calendar.YEAR);

editText = (EditText) findViewById(R.id.editText);

imageButton.setOnClickListener(new OnClickListener()
{
@SuppressWarnings(“deprecation”)
@Override

public void onClick(View v)
{
showDialog(0);
}
});

datePickerListener = new DatePickerDialog.OnDateSetListener()
{
public void onDateSet(DatePicker view, int selectedYear, int selectedMonth, int selectedDay)
{
editText.setText(selectedDay + “-” + (selectedMonth + 1) + “-” + selectedYear);
}
};

}

@Override
@Deprecated
protected Dialog onCreateDialog(int i)
{
DatePickerDialog _objDatePickerDialog;

_objDatePickerDialog=new DatePickerDialog(MainActivity.this, datePickerListener, year, month, day);

return _objDatePickerDialog;
}

}

Design Layout For Multiple Android Screens

When we need to create different layout for different screen size. Support all screen we need to create following layout:

 

1) Low density Small screens QVGA 240×320 (120dpi):

layout-small-ldpi (240x320)  
layout-small-land-ldpi (320x240)

 

2) Low density Normal screens WVGA400 240×400 (x432) (120dpi):

layout-ldpi  (240 x 400 )
layout-land-ldpi  (400 x 240 )

 

3) Medium density Normal screens HVGA 320×480 (160dpi):

layout-mdpi (320 x 480 )
layout-land-mdpi (480 x 320 )

 

4) Medium density Large screens HVGA 320×480 (160dpi):

layout-large-mdpi (320 x 480 )
layout-large-land-mdpi (480 x 320)

 

5) Galaxy Tab ( 240 dpi ):

layout-large  (600 x 1024) 
layout-large-land  (1024 x 600)

 

6) High density Normal screens WVGA800 480×800 (x854) (240 dpi):

layout-hdpi (480 x 800)
layout-land-hdpi (800 x 480)

 

7) For Screen Size of 720×1280 (320 dpi):

layout-xhdpi (720 x 1280)
layout-land-xhdpi (1280 x 720)

 

8) Xoom (medium density large but 1280×800 res) (160 dpi):

layout-xlarge (800 x 1280)
layout-xlarge-land (1280 x 800)

 

 Also add following code in .manifest file:- 

<supports-screens                                 
    android:smallScreens="true"                    
    android:normalScreens="true"         
    android:largeScreens="true"            
    android:xlargeScreens="true"             
    android:anyDensity="true" />

 

Skip to toolbar