How to align and change the appearance in Android

In applications developed using Visual Studio and Xamarin ( in French:  applications développées à l'aide de Visual Studio et Xamarin  ), we may need to insert some text. These writings must be balanced so that they can be seen very well, and in addition, they can have the desired effect. In this part of the article, we want to tell you about some changes in the design and development of applications using Visual Studio and Xamarin.

When  designing and developing different types of applications, we must pay attention to the fact that those applications are in good condition regarding appearance, whether in terms of style, fonts, and text alignment. In the applications we design and develop, we may want to display some text to the user. In this case, these texts must be aligned. Alignment is the horizontal and vertical spacing of texts from a specified distance. To modify the alignments, we can do the alignments by setting the HorizontalOptions and VerticalOptions in the LayoutOptions.

How can we justify using LayoutOption?

A single Layout control along a particular axis is defined by features such as HorizontalOptions or VerticalOptions in the LayoutOptions classes.

- Start left or top — justifies the control (depending on the layout direction)

- Center centers the control.

- End right or bottom — justifies the control.

- Fill expands the size of the control to fill the space provided.

Like the following:

How can we do and expand activity using Space?
We can use the LayoutOptions class to configure HorizontalOptions and VerticalOptions text.

- StartAndExpand:

It can control the left or top and empty layers of Space around.

- CenterAndExpand:

It can be used to control the middle part.

- EndAndExpand:

It can control the right or bottom tradition and empty layers of Space around.

- FillAndExpand:

It can also be used to control all parts and layers around it.

Like the following:

What is Text Input?

On pages such as login pages and login pages, there is a box to get information from the user to enter the required information and requested information in the box. Below is the code that can create a text box to enter the asked details on some particular pages and login pages. The input also comes from the InputView class and the View class.

Like the following:

It should be noted that the user who is asked to enter some data and information required, when the user enters the data, the data is entered as a String in Text Property.

It should be noted that the Placeholder property is also a label that can be used for the field name.  Keyboard Property  is also a subset of Inputview that can have some options that can be used to .data information. This input information can be of different types such as numbers, letters, strings, phone numbers, URLs, email addresses, etc. And you must be careful before you can add InputBox to the Stack layout.

In other cases, if we do not want to show numbers and letters in the input boxes when entering numbers or letters and instead show an asterisk, we can enter the command Set IsPassword = "True." By entering this code, all the letters or numbers entered by the user in the input box will not be displayed, and the asterisk will be shown instead.

BoxView

You may be wondering what BoxView is and what it can be used for. BoxView is a control that can create color and graphic rectangles that can be used as a placeholder. Later this color visual rectangle can be used with more complex or group controls.

Like the following:

If we want to apply color properties to some members, we can set these properties for any number of members. The default dimensions of this color and graphic rectangle are about 40 × 40 pixels. Of course, it should be noted that the dimensions of this rectangle can be changed and edited, and its dimensions can be customized. By setting WidthRequest or HeightRequest, you can edit the dimensions of this rectangle and customize it.

BoxView must be added to StackLayout. Even BoxViews can be replaced with designed icons.

Image View

It should be noted that the use of this control is that it can store an ace and can display that photo on a local page or online.

Like the following:

Local Image

All internal images of the program have special folders that are stored on their respective platforms. Resources / drawable folders are special folders for local pictures in  the Android operating System. However, it would help if you kept in mind that some characters should not be used in naming these folders. And Build Action must be set to Android Resource mode.

Asset Lists can be used in iOS 9 and later versions. This particular folder used to store local images in the program is also / Resources.  Image Sizing: Aspect Property  We can also use the Image.Aspect property to measure images.

Like the following:

All members of this group are as follows:

- AspectFill:

This member can be used to fill the Image with Scale and View. Of course, this member can also cut the Image if needed.

- AspectFit:

This member can also fit the Image by maintaining and scaling.

- Fill:

This group member and image scale can fill images entirely and accurately.

How can we create a Clickable image using GestureRecognizer?

Some  images and icons in the app  and phones can be used for navigation. Some Xamarin.Forms views cannot be clicked or tapped. Because they cannot click on them, they must connect to GestureRecognizers and use them. A gesture recognizer is a feature or control that can answer or interact with many user questions.

Like the following:

Of course, it should be noted that to manage the Tapped event. We must create a handler. The value we have to give to the Opacity property in the handler is 0.5. This value for this property can blur the Image a bit.

Like the following:

Another way to use GestureRecognizer is to use the Command feature.

Like the following:

We can provide some unique features and settings for all users' actions. In this case, for example, when the user clicks a button, that button changes color for a while and, for example, becomes gray. To apply this setting, we can use the Opacity property to change the color. We can also use the async / await feature to slightly delay the color change of the buttons after pressing. Async / await causes a slight delay in fading or changing the color of buttons and images.

Be sure to use System.Threading.Tasks; Must be added to the top of the .cs file.

By inserting the codes listed above, after pressing a button or selecting an image, the Image will disappear a little after a bit of deletion and return to its normal state.

Note: To apply these settings to animations, we must use the Fade to feature instead of the Opacity feature.

Like the following:

ScrollView

Using this feature, we can also scroll through the contents.

Like the following:

Put StackLayout inside ScrollView until all layouts have views.

Like the following:

Of course, it should be noted that the ScrollView movement direction is intentional from top to bottom and from bottom to top by default. If we want to change the direction of its movement, then we can use Orientation.