Android #10 - Adding Buttons to Layout | Colors, Relative Layout property and Button Attributes | Calendar #2
Hello friends, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know, how to add Buttons to Relative Layout. We will also know about the properties of button and relative layout, which is useful for designing our apk's UI. Along with this we will know about the color resources and string resources ( Creating resources and accessing it ). So friends, let's begin....
P.I.Disc. :- Above is the video of the full tutorial in hindi. You can watch it, if you don't want to read the whole tutorial.
Creating Project ( IndiCalendar )
We will start with creating the apk project using android studio (official android app developing software provided by google developers ). We will use empty activity with this project, which contains a pre-defined layout, which will be edited by us and then button will be added to it. Below is the steps for creating the project.....
1. Open Android Studio, a dialog box will open. Click Create a new Android studio project in it.
2. Enter the application name ( IndiCalendar for the app, you can use any name for the app or can use IndiCalendar) with first letter as capital letter (Calendar - has capital letter C, India - has capital letter I ) and company domain ( can be your website's home page URL, email-id or any unique text that you want to enter in the desired format ) used for generating unique package name for the application, which is used by the android phones to uniquely identify app to prevent duplicate app.We can also edit the package name for giving uniqueness to it. After doing all this, we had to select the project location, where the project will be created and click Next.
3. Select the minimum API Level, on which you want your application to run i.e. we had to select the minimum android version on which we want our application to run. The maximum API Level is automatically selected to the latest android version available and installed in the android studio.
I recommend to select the API Level 14; Android Ice Cream Sandwich to select almost all the android phones available these days as minimum API Level. After doing all this, Click Next.
P.I. Fact :-
1. Select Phone and Tablet from the options, as, we are developing app for tablet and android phones.
2. The Android Studio will automatically shows the percentage of android phones on which the application will be able to run, when we select the minimum API Level.
4. Select the empty activity from the available options, which provides us a predefined layout. We will add our buttons in this layout and add function to it. After doing all this, Click Next.
5. Enter the Activity Name ( the name you want to apply to the java class for the activity and toolbar title or activity title ). Check Generate Layout file to automatically generate a layout resource. The layout name will be automatically generated, when we write the activity name. We can edit it according to our need. Enter the layout name ( in small letters, without any space and special characters in it, e.g. :- activity_indicalendar is true, whereas, activity-indicalendar is false ). After doing all this, Click Finish.
The Android Studio will now automatically create the project for the app, after a few time. We can then edit it and then generate our app, when our project is finished.
Colors Resources
The Resources is a very important part of any app, which helps the app for drawing its UI and also provide functions to the app. It includes layout, string, dimensions, colors, codes and so on.
We will here, know about the colors resources, and also know, how to edit the colors resources in our favourite colors easily.
Colors resource is a resource which contains different-different colors required for the app's design, like colors for toolbar, status bar, buttons etc. and we can use it anywhere within the app with unique name, by which color resource is identified.
All the colors resources is stored in the res/values/colors.xml folder. By default, it contains the following code.....
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- color for the app bar and other primary UI elements -->
<color name="colorPrimary">#3F51B5</color>
<!-- a darker variant of the primary color, used for the status bar (on Android 5.0+) and contextual app bars -->
<color name="colorPrimaryDark">#303F9F</color>
<!-- a secondary color for controls like checkboxes and text fields -->
<color name="colorAccent">#FF4081</color>
</resources>
First line of the code contains the XML Declaration, which is a must for any XML Resource, because it tells the XML Parser ( which will parse the data, and show the defined UI ) the version of the XML code used and the encoding used. This information is used by the XML Parser to parse the XML code properly as it is defined.
Second line of code is the root element <resources>, which contains all the another element or all the color resource in it. The color resource is declared using <color> tag having its attribute as, name, which takes its value a unique name ( It is same as id, which is used with any element like button, checkbox etc. The name must be unique, and we will use this name to access it within the app ). The content of the <color>...</color> element is the hex code of the particular color.
We can therefore, use any color by knowing its hex code, or we can manually edit color by clicking on the color shown in the side bar.
P.I. fact :-
There are three predefined colors namely, colorPrimary, colorPrimaryDark and colorAccent. These are used for......
- colorPrimary :- It is used for giving colors to primary UI elements like, toolbar, tab layout and so on.
- colorPrimaryDark :- It is a darker variant of the colorPrimary. It is used for giving colors to the status bar in android lollipop + and also to the contextual bars ( the menu which appears when any folder in the file manager is long clicked ).
- colorAccent :- It is used for giving colors to secondary UI elements ( the element made by combination of two or more primary or secondary element ) like, button, checkbox and so on.
We can now customize the colors acccording to our need for giving proper design to the app.
Relative Layout ( android:layout_below )
The layout defines the UI of the app. In the empty activity, a layout is already created in res/layout/activity_indicalendar.xml with its root element as constraint layout. This layout is almost same as of relative layout, as it defines the child position of the element relative to another child elements or the parent layout. It is the modified version of relative layout.
By default, the layout of the empty activity contains a Constraint Layout and a TextView. In our UI, we will use relative layout as the root element and add Buttons to it. So remove the TextView and replace the Constraint Layout with Relative Layout. After doing all this, the XML code for the layout will be.....
<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"
tools:context=".IndiCalendar">
</RelativeLayout>
In the above code, there are certain unknown attributes for us, which is a very important attribute, while designing the app's UI.
P.I.attr. :-
P.I.attr. :-
- xmlns:android :- This attribute is automatically imported when adding android based attribute like layout_width, layout_height and so on.
- xmlns:tools :- This attribute is also automatically imported, when adding tools based attribute like context, ignore and so on.
- android:layout_width :- This is an android based attribute, used to set the width for any UI element.
- android:layout_height :- This is also an android based attribute, used to set the height for any UI element.
- tools:context :- This is an tools based attribute, used to set the context for the layout i.e. assigning the java class for an activity. It takes its value as the name of the java class with prefix ".".
P.I. Property ( android:layout_below ) :-
} android:layout_below :- It is a property of a relative layout, which takes ID of the element as its value. It is used, when we want to set the position of any UI element below another UI element. It takes the ID of the element, below which we want the another element to be aligned.
Button ( Customizing properties )
Button is an useful UI element with the ability to detect clicks. It is declared using the <Button> tag. There are many attributes related to the button, which helps us to design the button to match our UI design, like changing background color, text color etc. Below is the code for the button with changed text, text color and text size.....
<Button
android:id="@+id/january"
android:layout_width="match_parent"
android:layout_height="80dp" android:text="January"
android:textColor="@color/colorAccent"
android:textSize="18sp"/>
In the above code, every attributes is used for specific purposes. Let's know about these specific purposes of the attributes.....
- android:id :- It is an android based attribute, which is used to define id for button or any UI element, and we can use this id for various purposes. In the above code, the id is january, which is unique and we will use it for adding function to it.
- android:layout_width :- It is an android based attribute, which is used to sets the width of the button or any another UI element. In the above code, the width is set to match_parent, which means that it will occupy every available space by width. Here, whole screen is available, so it's width will be equal to the screen width.
- layout_height :- It is an android based attribute, which is used to sets the height of the button or any another UI element. In the above code, the height is set to 80dp. You can use any size according to your design.
- android:text :- It is an android based attribute, used to sets the text for button or any text UI element. In the above code, it is January. You can use whatever you want. In the above code, we had directly written January as it's value. This can sometimes cause error in the app. So, I recommend to use string resources instead, in the same way as, the color resources is used.
- android:textColor :- It is an android based attribute, used to sets the text color of button or any text based UI element. In the above code, the value is the color resource, named colorAccent. We can also use hex code of color directly, but I recommend to use color resources instead.
- android:textSize :- It is also an android based attribute, used to sets the text size of the button's text. In the above code, text size is defined 18sp.
P.I. Fact :-
By default, all the text of the button will be in capital letters, despite you had added small letters as text. If you doesn't want the text to be capitalized, then add android:textAllCaps attribute with value false.
Text Resources ( Adding and Accessing )
Text Resources are stored in the res/Values/strings.xml folder. By default, empty activity has the following text resources......
<resources>
<string name="app_name">IndiCalendar</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string><string name="title_activity_main">IndiCalendar</string>
</resources>
The <resources> is the root element, which contains all the text resources in it. Text Resources are added using the <string> tag with attribute name, which takes its value a unique name ( It is same as of ID for any UI element ). We will use the name to access it anywhere within the app. The content of the <string>.....</string> element is the text that we want to store with unique name in string resources. We can remove the unwanted string resources.
We had to store all the month name, so that, we can add it to buttons, and on click, will show respective month calendar.
<string name="january">January</string>
We will use <string> tag with name attribute having it's value january, and it's content January. The january is assigned as vale of name attribute. Like this, we can create string resources for all months.
For reading the resources and assigning to any text based UI element, we use @string/ as prefix of the unique name, for using it in the XML.
e.g. :- A button having its text january.
String unique name = january,
For using it in XML = @string/january.
<Button
android:id="@+id/january"
android:layout_width="match_parent"
android:layout_height="80dp" android:text="@string/january"
android:textColor="@color/colorAccent"
android:textSize="18sp"/>
Adding buttons and initializing
We had to add a total of 12 buttons, which resembles the month of the year. Below is the code of adding 2 buttons.....
<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"
tools:context=".IndiCalendar">
<Button
<Button
android:id="@+id/january"
android:layout_width="match_parent"
android:layout_height="80dp" android:text="@string/january"
android:textColor="@color/colorAccent"
android:textSize="18sp"/>
<Button
android:id="@+id/february"
android:layout_width="match_parent"
android:layout_height="80dp" android:text="@string/february"
android:textColor="@color/colorAccent"
android:textSize="18sp"
android:layout_below="@+id/january"/>
</RelativeLayout>
In the above code, we had added two buttons with unique id, and it's text as january and february from the string resource respectively.
We had added a new attribute to the second button, named android:layout_below, which is used to set the position of the second button below the button with id january, that is, the first button. We had not use it with the first button, because it is already at the top of the screen. If we don't use this, then all the button will be aligned on top of one another, results in the visibility on only the last button. So, we had to use it with all the buttons except the first one, and it's value will be the id of the button above it.
In this way, we will add 12 buttons to the relative layout one below another. but, only 6 or 7 buttons will be visible to the user based on the screen size, because the relative layout is not scrollable. For showing all the buttons, we will use scroll view, about which we will learn in the next tutorial.
So friends, that's all for this tutorial. Hope u enjoyed it. I, thank you for being here.
Thanks and Have a Nice Day-
Programming Infinity ( Samridh Sharma ).
Comments
Post a Comment