A user interacts with the Android app through a user interface (UI) which makes it very important to understand the basics about the User Interface of an android application. 

View 

It is the basic building block of UI in android. The View class is a superclass for all GUI components in Android. It occupies a rectangular area on the screen and is responsible for drawing and event handling. It shows some type of content like image, text, button or anything that an android application can display.

Some of the commonly used views are –

  1. TextView
  2. EditText
  3. Button
  4. ImageView

Basic attributes of any views are:

1.layout_height & layout_width: This attribute defines the height and width of the view respectively.

match_parent – Occupy the complete space available on the display of the device.
wrap_content – Occupy only that much space as required for its content to display.

2. id: This attribute defines the id of the view and are used to find specific views within the view tree. It’s not necessary to be unique for every layout file but it’s a good practise to keep it unique.

Syntax - android:id = "@+id/<unique id>"
Here @+ means that we are creating a new id in the layout file.

3. padding: It is the space inside the border, between the border and the actual view’s content. 

Syntax - android:padding = "10dp"  
We will cover the “dp” below.

4. gravity: It sets the gravity of the contents (i.e. its subviews) of the View it’s used on.
5. layout_gravity: It sets the gravity of the View or Layout in its parent.

6.margin: It is the space outside the border, between the border and the other elements next to this view.

Syntax - android:layout_margin = "10dp"

Measurement units

Density-independent Pixels(dp): A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
Scale-independent Pixels(sp): It is like the dp unit, but it is also scaled by the user’s font size preference. It is recommended to use this unit when specifying font sizes, so they will be adjusted for both the screen density and user’s preference.

Common Views

1.TextView – This view is basically meant for displaying the text of application. You can format the text appearance with the help of color, style, font style, size and much more.

<TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Hello World!" />
Ouput

2.ImageView – This view is basically used for displaying images in the application. You can set the size of the image, scale it, rotate it and much more. The image is stored in a drawable folder in the app structure and is accessed with the help of “src” attribute. Here, “fish” is the name of the image which is kept in drawable folder.

<ImageView
     android:layout_width="240dp"
     android:layout_height="200dp"
     android:src="@drawable/fish" />
Ouput

3.Button – It is the UI component that users can click upon to trigger an event. Trigger can be anything like change of property or navigating to other screens. We can handle the click with the help of “id” in the Java/Kotlin code and implementing OnClickListener interface or by specifying the event method in onClick attribute in XML layout. 

<Button
     android:id="@+id/submit_button" 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Submit" />
Output

Java

dButton submitButton = findViewById(R.id.submit_button);
submitButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
	Toast.makeText(context, “Button pressed”, Toast.LENGTH_SHORT).show();
}
});

Kotlin

val submitButton = findViewById(R.id.submit_button)
submitButton.setOnClickListener(object: View.OnClickListener {
	override fun onClick(v: View?) {
	Toast.makeText(context, “Button pressed”, Toast.LENGTH_SHORT).show()
	}
})

findViewById() method helps to access the view from the layout in the logic. R is the resource class that generates automatically and contains a reference to all the views in the layout.

4.EditText – This is a modification of TextView. It is editable so user can give input dynamically. You can get the input data with the help of getText() method on the EditText object.

<EditText
     android:id="@+id/name_edit_text"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="Name" />
Ouput

Java

EditText nameEditText = findViewById(R.id.name_edit_text);
String name = nameEditText.getText().toString();

Kotlin

val nameEditText: EditText = findViewById(R.id.name_edit_text);
val name = nameEditText.text.toString();

Structure of an App:

The res java folder contains all the java/kotlin files along with test files. The res folder contains all the resources required in the app like images, layout files, style files etc. The drawable folder in res contains all the images and layout contains all the resource files.


That’s all I have and thanks a lot for reading. Please let me know if any corrections/suggestions. Please do share and comments if you like the post. Thanks in advance… 😉

Thanks Shubham Pathak for helping us to grow day by day. He is passionate to develop the different apps and loves to solve challenging problem in Android.

Categories: Miscellaneous

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Insert math as
Block
Inline
Additional settings
Formula color
Text color
#333333
Type math using LaTeX
Preview
\({}\)
Nothing to preview
Insert