Android Views and it’s typical elements like textview, imageview, edittext, scrollview and so on are explained in this article alongside details on every one of them.
Any Android app consists of various forms of Activities, and each one of the Activities possess User interface. Android offers us many previously built user interface elements to produce an elegant appearing UI for our app.
Various layouts can be used to offer structure to your application’s User Interface. The layout is merely an empty placeholder for Android views. Let us see a few of the majority of the most utilized Android Layout widgets and a few of its lovely properties.
In Android, every layouts are XML based. Although you obtain a good graphical editor, in the end, the elements are just XML code.
Palette segment possesses all your fundamental UI elements grouped into different segments such as Form Widgets, TextFields, Layouts and so on. You can merely select any Element by Dragging and Dropping it to the working area on the right hand side of the Screen.
The top bar which you observe with options such as Nexus one, App Theme etc. is known as control bar. It possesses various options to test the UI against various situations. You can take charge of the size of the screen, orientation, theme and so on from the control bar. You can as well alter Zoom level, check lint warnings and so on from the control bar.
The rest of the area to the right side of the palette is the Design Area. In this location can drag and drop elements to incorporate in the UI, rearrange already added elements, reorganize them, alter their properties and so on.
Basic characteristics and Properties
Every one of UI elements are of type View and possess basic properties which are helpful to comprehend their attitude. Anytime you drag and drop a UI element from Designer view, it as well routinely creates at least 3 properties of the android view shown below:
This is used to recognize a specific View in Java Code. When you designate an ID to a View, it makes that android view exclusively identifiable via this ID in that Layout. In code, it will look like : android:id=”@+id/textView1″
This layout_width property of android views defines the width of the view. You ought to specify the width in px or dp.
layout_height property of android views specifies the height of that view. You ought to define height in px or dp.
The Height and Width will appear in code as shown below:
Because everyone of the UI elements are inherited from android views, every one of them possesses an onClick property. We will investigate onClick for a few of the UI elements.
A few basic attributes or terminology which will be excellent to comprehend prior to the observation of the action of the UI elements are explained below:
This is the value which you can a give to layout’s width or height. This signals the android to make the size of the UI element exactly the same as the as the size of content of the UI.
For instance, a text view with the text “HELLO” with width as wrap_content will merely be 5 characters wide(as HELLO is 5 characters wide).
match_parent or fill_parent
At all times make use of this value to be designated to the width or height. This signals to android to match the view’s height or width to its parent’s height or width. If the parent is occupying the entire screen size, setting this value on any UI element will as well make its height or width to be the same with the screen size.
Dp is density self-regulating pixels. As Android devices come with various screen density and so this value can be made use of rather than PX (pixle). If you make use of dp, Android will routinely estimate px for you in relation to the screen of the android device.
For instance: On a few device 1 dp may be equivalent to 1 px but on a few device 1dp = 5px
Padding is the space within the border, between the border and the actual view’s content. Padding is at all times inside the view and goes entirely around content. You can place padding on every one of the 4 sides, or on a single side.
For Example: If you set padding property in EditText, the cursor inside the EditText will move.
In code, padding will look like the example below:
For every one of the sides
For single Sides
android:paddingLeft="2dp" android:paddingRight="3dp" android:paddingTop="5dp" android:paddingBottom="8dp
Margins are the spaces at the exterior side of the border, between the border and the other elements following this view, IE margin is the exterior view, it is a space between 2 Android views, any time you wish to assign space between 2 views you can make use of Margin.
For instance: If you put margin in EditText, the EditText will shift by that value from it’s parent view.
See below how margin will appear at the code:
For everyone of the sides
For single Sides
android:layout_marginLeft="2dp" android:layout_marginRight="3dp" android:layout_marginTop="5dp" android:layout_marginBottom="8dp
The difference between margin and padding
Margin is the area outside the whole object. The border is the point where your view stops.
Margin and Padding are equivalent concept, as in CSS.
Anytime you intend to align content inside the view, make use of gravity. android:gravity places the gravity of the content of the View it is being used on. Android Gravity, anytime it is applied on a view, specifies the direction of its content to be aligned.
For instance: In A Linear Layout when you place the Gravity at the middle every one of its View will be centrally aligned.
You set the gravity of layout as: android:gravity=”center”
Layout Gravity is the exterior gravity of the View. It sets the gravity of the View or Layout in its parent.
You set layout gravity as: android:layout_gravity=”right”
android:layout_gravity = float in CSS
android:gravity = text-align in CSS
You may speculate why every one of the properties begin with android:`. If you observe the first line of any XML file there is a namespace definition :
Observe the characteristic of android here, which is known as Android Schema. This Schema possesses every one of the entire references to values such as id, text other attributes.
Textview is the simplest UI element. It is used to show stationary text, which cannot be altered by the user.
In HTML world, TextView is nothing but a tag.
A few essential properties of TextView
This property spells out the text which will appear inside the TextView
This property specifies the color of text. It takes HexaDecimal text color for instance #ffff00
This characteristic specifies the size of text. It takes figures in Sp. For instance “15sp”
Example of the way a simple textview will appear in code.
<TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Hello World" android:textColor="#ffff00" android:textSize="15sp"/>
The majority of times you would need to set the text of TextView energetically through code. See below the way you can alter the text of textView through code.
First Step is to obtain reference of TextView.
TextView textView = (TextView)findViewById(R.id.textView1);
At this point you call findViewByID technique by passing the android:id of the TextView.
Due to the fact that every one of the UI elements are view, findViewbyId returns a view object which we require to typecase into correct subview, in this case TextView.
At this point to alter the text, you merely call setText method on the textView object like:
textView.setText("Set your Text Here");
With the above 2 easy lines of code, you can alter the text of textview animatedly.
EditText is the next frequently utilized UI element in Android. Anytime you wish to take a few input from the user, you can make use of EditText.
In HTML world EditText is nothing but an input tag.
Below are a few practical properties of EditText
android:text : this property specifies the text which will appear within the EditText, or the text which user will go through. Characteristically in Java code, immediately you have obtained the reference of editText object, this is the attribute which you call to obtain the value which user may have set.
android:hint: this property specifies the hint which you want to offer to user, this hint is present within the edittext but vanishes immediately the user begin typing anything inside the edit text.
android:ems: this specifies the number of characters long the text ought to be. For the fact that there is no text within edit text, creating it wrap_content will not be of any assistance. This attribute assists you in defining the exact width for edit text.
android:background: this attribute specifies the background of the edit text. You can either select a color or set an image as the background of the edit text.
android:inputType: this attribute specifies the kind of content the edit text will be made of.
For instance: textPassword will cause the text to become routinely converted into * as user begins typing. Number will alter the keyboard layout to numeric, thus assisting the user to type the number more speedily.
This is an extremely powerful attribute of EditText and if you are aware of the type of content your EditText requires ensure to define that with the use of an inputType.
A simple simple editText Code will appear as shown below:
<EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:ems="10" android:text="Pranay" android:hint="Enter User Name" android:background="#ff0000" android:inputType="text">
Often times, you would desire to obtain the value of EditText or pre populate the value vigorously. See below how this can be done in code:
First obtain the reference of the EditText
EditText editText = (EditText)findViewById(R.id.editText1);
And just call findViewById to obtain the reference of a view in code.
Afterwards to obtain the content of the edit text, merely call getText method, in this way:
Related to TextView, to set the text of EditText, you can call
editText.setText("You can set a value")
Button is the most utilized and applied UI element in Android. For every action you wish to carry out, you want the user to click on a button.
See below a few essential properties of a Button
android:text : this attribute specifies the text which will appear on the top of a button. You can alter the text energetically via code
android:textColor: this attribute specifies the color of text on the button. This assume HexaDecimal text color for instance #ffff00
android:background: this attribute specifies the background of the button. You can either select a color or set an image as background of the button
android:clickable : this attribute makes the button either enabled or disabled. This assumes boolean values (false/true)
Any android app is deficient without the utilization of an image. Image View is the UI control which you can employ to show image in your android app.
In html, image view is merely img tag.
A few essential properties of Image View
android:src : The most significant property of ImageView is src . This property assists you to define the image which will be shown in the image view. You can pass android drawable or your own drawable. For instance,
In this example “@drawable” means your drawable folder which is located within res folder. At the end of that, you place the image name without the extension.
android:contentDescription : This is not a necessary property, but it is recommended to set this property. ContentDescription is a text explanation of the image which you have set. This attribute assists with ease of access. If this property is set, users facing obscurity in screening the image can make use of a Screen Reader, which will interpret the text from content description.