android apps, learn android programming, android for beginners, android
This Page - How To Add A Button To Android App Prev Page - Editing TextView - Adding Icon, String and Text
Next Tutorial How To Change Background Color, and Screen Orientation We are using AIDE, to create these tutorial apps on our 8.9" tablet with android version 4.2.2; using the Android Java XML programming language.

We are using the AIDE coding editor to code our pages; and then to Create - RUN our apps. AIDE is a SDK coding environment for android devices like a tablet or smartphone. AIDE has a free and paid version. The paid version is required if you want to create Java/xml template apps; and add a 'keystore' to your App. With a keystore, you can publish it to the market places like Google and Amazon.
Once you create your apps code pages, you need to RUN the app to build your apk package; then you INSTALL it on your tablet or smartphone.

You can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language. Android Studio is free to install and use; and has helpful guides.

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.

Lets Add A Button To our App named- Tutorials

You can add a button with text; you can add a button with an image as its background; or you can add image and text to a button.

In this tutorial, we will code each of these into our apps layout file; using the Button, and ImageButton elements.

You can also refer to the Android Developers website for additional reading on buttons.
From Android Developers website
....how to code a button - android app

Our app Named: Tutorials
Our App Named: Tutorials
If you are reading and coding from each of our tutorials; then your app
should now look like this one shown in this image.

If you are just arriving at this page; you can gohere to first create your simple app

If you just want to get the code for adding buttons goto:
our Example Codes on this page to copy the code for your app's layout file at:
res/layout/filename.xml


Lets edit this first page of our app (the app's first Activity layout); we are going to:

add a button with text placed to the right
add a button with text placed to the left
add a button with an image as its background
add a button with an image for its background and with some text

Adding a Basic Button with Text


We have added 4 buttons to our apps firstpage which is coded in our app's View layout file at res/layout/main.xml
This is the file where you code all your Textviews for your app; and things like buttons, images, menus, also are coded in this file.

Our App named Tutorials
Looking at the tablet screen view image of these buttons...
How To Add Buttons To TextView Android Apps
...you can see they are all different.

The first button has text placed in it on the right side of the button.
The second button has text placed in it on the left side of the button.
The third button has an image as its background, no text.
The last button has the same image, and some text was added also.

Lets look at the coding for each button we added:

The Button element is used for creating the basic button. In this first button's code; we placed the text to the right side of the button using the android:gravity-"right" attribute.
Button 1 Place text in right side of button


If we want to determine where to place the text within the button, we use android:gravity; and we can place text where ever we want: common choices being right, center, or left.

For all attributes available: Browse Android Developers
Attributes for android:gravity

Button Text

Next, we added text to the button: to do so we must create a string for the text, as shown is this next image; name it whatever you like; and code it into our strings.xml file .
Since we added text to 3 of the buttons, we create 3 separate strings, 1 for each button's text.

And, as we already know: (from our strings tutorial) all strings are placed in the strings.xml file, located at:
res/values/strings.xml
Strings.xml String for this button
Your strings are coded in the strings.xml file, and; a reference to it must be coded into the Button element in your layout file as shown here in the first image.
android:text = "@string/stringname"

Margins

This first button has a margin added to allow for spacing between the previous element and this button. Looking at the Tablet Screen View image; you can see the spacing allowed from the line of text to where the button is placed.

This is done using the android:layout_marginTop = "125dp" code. By default the android system places the buttons with some spacing between them; but you can also customize the spacing using additional code attributes and values as shown.
For all margin_layout attributes; browse Android Developers Margin Layout Parameters

Width and Height

For this button we also defined its width and height; using the android:layout_width="486dp" and android:layout_height="86dp" attributes.
For all android width and height layout attributes; browse, android:layout_width and android:layout:height
You can make your buttons any size you like using these coding attributes and their value. The dp means density pixel; this is usually used as it is most appropriate to the screen density pixels of tablets and more easily scalable to different screen sizes. Most commonly used are dp(density pixel) and px(pixel).

You can read about other attributes as well from Android Developer website:

The second button has its text placed to the left in the button.

This is done using the same attribute as the first button, however, we use the value 'left' android:gravity="left" and, we made this button the same size as the first button.
Button 2 example android button element


The third button has an image as its background, so it is coded differently than the first two buttons. When you want to add an image as the button background you use the ImageButton element, instead of the Button element.
How To add ImageButton element  android buttons
To add the image we use this code:
android:src="@drawable/button_examples
@drawable means its an image, and as we know from our drawables tutorial; all images are placed in the
res/drawable folder. The image we used is named button_examples.png. You can download the button to add to your drawables folder from our Code Examples on this page.


Just right click to save it to your tablet; then copy/paste it to the
AppProjects/tutorials/res/drawable/ drawable-hdpi folder
You code it as button_examples, you don't need to include the .png as you can see looking at this image of the coding.

This button image has been placed on the right side of the screen view.
To do this, we added the
android:layout_gravity="right"; attribute;
as shown in this image of the code. Common choices are right, left, center; for all available attributes browse to Developers Android
Attributes for android:layout_gravity
For the android:layout_with and android:layout_height coding of this image button; we used the wrap_content attribute. This means that the button will wrap around and match the image's size.

The fourth button we added is the same width and height as our first two buttons; having used the android:layout_width and android:layout_height attributes to define its dimensions. And, since we added text also to this image button; the button size has allowed for the text being added.

We wanted to center this button in the Screen View; so we used the android:gravity="center", code.

To add text to the button: we coded
android:text="@string/buttontextandimage
and, to add our image and place it left on the button; we coded:
android:drawableLeft="@drawable/button_examples

Other common attribute values are: drawableRight, drawableCenter.

The Button element was used, not the ImageButton element; because we added an image and text. If you are just adding an image No Text - then you can use the ImageButton element.









Here is the image view of all code changes we have made to this app named - "Tutorials"
Buttons Tutorials app textview




Having made our changes: We will now RUN, INSTALL, OPEN our app to update the app files:
(To RUN your app, click the top right icon in AIDE, the choose RUN. Follow prompts to install, and update the app.)
Then, simply open the app to view it.

Coding From This Tutorial

This is the code for all edits we have done to our app named Tutorials, including this button tutorial; so you can just copy and paste to replace the code you now have on your res/layout/main.xml page;
and copy - replace the res/values/strings.xml file code also,
save each page, then RUN your code, INSTALL OPEN the app, to see the Buttons we added in this tutorial.








This Tutorial Codes:
Use Mouse To Copy Paste the Code

Download button for android app, imagebutton element
Save this button to res/drawable-hdpi folder

This free script provided by
JavaScript Kit

Share This Page


AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free create android Java/xml template apps and couple free android lessons. With paid some lessons included, create android Java/xml template apps; and create a keystore for your app. With a keystore you can publish your app at markets like Google.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.


You May Like:
Make Sushi Rolls at Home Taste World Wines Flavours and Aromas

TUTORIALS I
Java XML
The Coded Pages

Beginners Article
About Our Tutorials
Coding androidmanifest.xml
Coding R.java
Coding buildconfig.java
Coding mainactivity.java
Coding main.xml
Coding strings.xml
Coding drawables

TUTORIALS II
Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in
Buttons


Change View
Background Color


Change Screen
Orientation


Add Image to
Activity View


Add Horizontal
Scroll View


Add a Frame Layout

How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource
Identifiers



from the Web
SPECIFIC CODING TASKS

Add Clickable Button
To textView

Image Button with
Selector

Linear Layout with
weight attribute

OnClick Displays
Message

Screen Density
Coding Practices


CODING ENVIRONMENTS

AIDE
for android tablets

Android Studio
For desktop computers


IMAGES ICONS FOR YOUR APPS

Code Canyon Paid From $1

IconFinder.com Free and Paid From $1


Our ARTICLES

App Distribution
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them


ScrollView
How To Implement
ScrollView


View All Articles



Tweets by @codeandroidapps