Pr.Pg Next Pg

Custom Buttons tutorials

 

State List

  • A StateListDrawable is a drawable object defined in XML that uses a several different images to represent the same graphic, depending on the state of the object.

  • For example, a Button widget can exist in one of several different states (pressed, focused, or niether) and, using a state list drawable, you can provide a different background image for each state.

  • You can describe the state list in an XML file.

  • Each graphic is represented by an <item> element inside a single<selector> element.

  • Each <item> uses various attributes to describe the state in which it should be used as the graphic for the drawable.

  • During each state change, the state list is traversed top to bottom and the first item that matches the current state is used—the selection is not based on the "best match," but simply the first item that meets the minimum criteria of the state.

  • We now define the various XML elements

<selector>

  • Required. This must be the root element. Contains one or more <item> elements.

attributes:

xmlns:android

  • String. Required. Defines the XML namespace, which must be"http://schemas.android.com/apk/res/android".

android:constantSize

  • Boolean. "true" if the drawable's reported internal size remains constant as the state changes (the size is the maximum of all of the states); "false" if the size varies based on the current state. Default is false.

android:dither

  • Boolean. "true" to enable dithering of the bitmap if the bitmap does not have the same pixel configuration as the screen (for instance, an ARGB 8888 bitmap with an RGB 565 screen); "false" to disable dithering. Default is true.

android:variablePadding

  • Boolean. "true" if the drawable's padding should change based on the current state that is selected; "false" if the padding should stay the same (based on the maximum padding of all the states). Enabling this feature requires that you deal with performing layout when the state changes, which is often not supported. Default is false.

<item>

  • Defines a drawable to use during certain states, as described by its attributes. Must be a child of a<selector> element.

attributes:

android:drawable

  • Drawable resource. Required. Reference to a drawable resource.

android:state_pressed

  • Boolean. "true" if this item should be used when the object is pressed (such as when a button is touched/clicked); "false" if this item should be used in the default, non-pressed state.

android:state_focused

  • Boolean. "true" if this item should be used when the object has input focus (such as when the user selects a text input); "false" if this item should be used in the default, non-focused state.

android:state_hovered

  • Boolean. "true" if this item should be used when the object is being hovered by a cursor; "false" if this item should be used in the default, non-hovered state. Often, this drawable may be the same drawable used for the "focused" state.

Introduced in API level 14.

android:state_selected

  • Boolean. "true" if this item should be used when the object is the current user selection when navigating with a directional control (such as when navigating through a list with a d-pad); "false" if this item should be used when the object is not selected.

  • The selected state is used when focus (android:state_focused) is not sufficient (such as when list view has focus and an item within it is selected with a d-pad).

android:state_checkable

  • Boolean. "true" if this item should be used when the object is checkable; "false" if this item should be used when the object is not checkable. (Only useful if the object can transition between a checkable and non-checkable widget.)

android:state_checked

  • Boolean. "true" if this item should be used when the object is checked; "false" if it should be used when the object is un-checked.

android:state_enabled

  • Boolean. "true" if this item should be used when the object is enabled (capable of receiving touch/click events); "false" if it should be used when the object is disabled.

android:state_activated

  • Boolean. "true" if this item should be used when the object is activated as the persistent selection (such as to "highlight" the previously selected list item in a persistent navigation view); "false" if it should be used when the object is not activated.

Introduced in API level 11.

android:state_window_focused

  • Boolean. "true" if this item should be used when the application window has focus (the application is in the foreground), "false" if this item should be used when the application window does not have focus (for example, if the notification shade is pulled down or a dialog appears).

 

  • Note Remember that Android applies the first item in the state list that matches the current state of the object. So, if the first item in the list contains none of the state attributes above, then it is applied every time, which is why your default value should always be last (as demonstrated in the following example).

  • We will now add custom buttons to our MainActivity.

  • We add the button images to our drawable folder. In our example, we have saved them as default.png, highlight.png and select.png respectively.

  • Next we create an XML file in our drawable folder. We will name it as ourbuttons.xml.

  • For the latest android version put the files and create the file in appropriate folder, namely ldpi, mdpi and hdpi depending upon the image quality.

  • While making the file,choose the root element as selector.

 

XML Code

  • Type the code below in the XML file.

 

 

 

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

 

<item android:drawable="@drawable/select" android:state_selected="true"></item>

<item android:drawable="@drawable/highlight" android:state_focused="true"></item>

<item android:drawable="@drawable/select"></item>

 

</selector>

 

 

 

  • Type the names in the android:drawable attribute correctly according to the button which you would like to employ for each situation explained above.

  • Now add the attribute android:background for the button which you would like to customize.

  • android:background="@drawable/ourbuttons"

  • Now we are all set and you can see the different variations in the button on starting the activity.


 

Full Screen Activity

  • Setting up a Full Screen Activity

  • To set a Full Screen Activity, add the following code before setting up the contentView or setting up the List Adaptor for your activity.

 

 

 

requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

 

  • public void setFlags (int flags, int mask)

  • Added in API level 1

  • Set the flags of the window, as per the WindowManager.LayoutParams flags.

  • Note that some flags must be set before the window decoration is created (by the first call to setContentView(View, android.view.ViewGroup.LayoutParams) or getDecorView(): FLAG_LAYOUT_IN_SCREEN and FLAG_LAYOUT_INSET_DECOR. These will be set for you based on the windowIsFloating attribute.

  • Parameters

flags

The new window flags (see WindowManager.LayoutParams).

mask

Which of the window flag bits to modify.

 

  • The getWindow() method retrieves the window for the current activity.

  • Each activity has an associated window (on which the whole UI draws). This window has default way of being drawn (whether toolbar, actionbar, icons are drawn or now).

  • However, you can use requestWindowFeature to ask the system to include or exclude some of windows features (toolbar, actionbar and so on).

  • Here you can find the full list of supported features: r.android.com/reference/android/view/Window.html

  • As example, you can use FEATURE_NO_TITLE to make a window full screen or FEATURE_RIGHT_ICON to let system know that icon should be drawn on the right side.

  • In this case we have removed the title of the activity also.

  • Then we set the flags of the window so that the activity runs in Full Screen mode using the setFlags() method.

  • Below is the screenshot of the activity when it runs after implementing the above code.

 

 

Pr.Pg border                                              Next Pg