New Tutorial 2022

View All Tutorials

---

Android - Button Types

Added March 2022

For this tutorial, we are going to learn how to code different button types. These are the basic button types which can be quite useful when developing your apps. In Android coding, they would be considered standard buttons which means they work across all Android platform without the requirement of specialty support code being added. Most code for these is included in xml pages, so quite easy to code.

We are going to create a new app for this tutorial, and name is - Buttons App

---

Creating Our New App

Open AIDE, Select New Project, from the left menu, or center menu hierachy of files; and do the following:

Select


choose NEW ANDROID APP(Gradle/Android SDK/java/xml) if your using the newest version of AIDE.

Choose HELLO WORLD example app template(java/xml);if your using an older version of AIDE,
For app name; type 'ButtonsApp'

For app package name type: com.aac.button_examples_app

Click Create

Your new app is now created for you - named 'ButtonsApp'. For now, you will have the little green Android image as your app icon. Once you add your apps' image(s) and run your app with the updated and new pages you create, you'll see the "Image of Buttons' instead.

AIDE automatically opens your new app in the editor for you.

Where Code is Coded

For this Buttons App; we are creating 6 buttons; 1 basic(no border or color), 1 bordered button(has border and gray color),1 two color gradient button, 1 three color gradient button, 1 custom state button, and 1 rounded shape colored button.
The first two buttons are simple system generated buttons. The buttons with gradient color added are more of a custom styled. The custom states button is one where the color of the button itself changes depending on whether it is pressed, focused or just in a non state, meaning a user is not clicking or has not already pressed the button.
The only difference amongst all these button types is the amount of code you need to include and what new pages, if any, have to be created.
As with all our tutorials, the code you need to create for your app is at the 'Example Code' section on this page.

All 6 buttons, are coded on the main.xml page. This page provides the layout for our button designs, also known as the homepage of your app. Typically, users can select a button which takes them to another page in the app or might just show another action like displaying a message. This is what each of our buttons does when clicked/selected; it shows them a message.

In Android, these types of 'displayed messages' are called 'Toast Messages'. These Toast Messages are of two types, long and short; and these simply refer to the amount of time the message displays- usually 1 to 5 seconds. Because Toast Messages are created from a user interaction, they require a 'onClickListener', in order to function. These 'onClickListeners' are coded in the java class of your app. For our tutorial, the java class is MainActivity.java. Since all the buttons display a Toast Message, we must add the code for the onClickListener to each button in the MainActivity.java of our app.

System Default Buttons

The first two buttons we added are the simplest to code. We only need add code at the main.xml page. Button one has a basic system default code. Note that we added style attribute to make our button borderless.

Button two is the same code as button one, but the button is not borderless and it has the system default look with the light shade of grey.

Color Gradient Buttons

Button three is the 2 color gradient button. For this button we have to create a xml and add the colors we want to it. Then, we link to this page from the button code at main.xml, by using the android;background attribute.
Also before we create each xml page, we have to create the 'drawable" folder at res/drawable of our app project. In this folder we put all the xml pages we created for button 3, button 4, and button 5, and button 6.
This image shows the created pages at res/drawable.



This image shows the xml for button 3. gradient_1.xml



This image shows the xml for button 4. gradient_2.xml


Custom State Buttons

This image shows the xml code for button 5 - "custom button states'. custom_button_states.xml

The custom states button has 3 colors, and it requires a xml page for the custom states- including default, pressed and focused states. This page(custom_button_states.xml) links to each state xml page, and those xml pages must be created. So the custom states button requires four xml pages to be created: custom_button_states.xml
button_default.xml
button_pressed.xml
button_focused.xml

Each page; has 2 color choices added. We don't have to link to all four pages at main.xml, only the custom states xml (custom_button_states.xml); and we link it using the android background attribute like so;

android:background=
"@drawable/custom_button_states

Because this xml page is linked to the other 3 pages(focused, pressed, default), it will get all the colors for each button state when required.

Button six is a shaped button and we add the shape we want to the 'shape' attribute in the code. We used the 'rectangle' which gives the button the rounded look.

TIPS

Navigating The App Project Hierachy

To view A FILE do either: from right menu choose FILES or GOTO, this will show the apps files along the top of editor, dropdown, and left side menu. After editing a file, SAVE it, right side menu, choose SAVE. You can also Turn On AutoSave feature in settings.

Creating Pages

Check for the filename extensions of page your creating. If for example, your creating a new Java page, (goto java folder)you want to see pages already created in that folder that have the .java file extension. Click 'create new java class' to create your page.

For xml files, (like main.xml), you must create these in the 'res/layout' folder of your app project. Click 'add new xml file', to create your page.
For xml pages for colors you create,.like our Buttons App; those must be created at res/drawable.
When creating your java pages, leave no space of words.
FirstScreen.java

For xml pages, you can have space but use _ to separate words. And, use lowercase. Same applies to image names;.use lowercase and _ for spacing.

Updating Pages - Code From Our Example Code

Because we create our App using a template, all app pages are created for us. That way; we only have to edit the code on pages we have to then Save the page(s) and Run the app again. If you have to Create a new page; same thing, replace all code with code from the tutorial Example Code and Save page(s), then Run the app.

Additional Reading on Buttons at Android Developer Website
Coding Buttons

---

EXAMPLE CODE - Code For This Tutorial.

JUST copy the code for this tutorial from the Example Code in this section. Just replace this code with the code already on the page and Save the page.

Example Code:
Copy Paste the Code
//has the code for app icon at icon attribute AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.aac.button_examples_app" > <application android:allowBackup="true" android:icon="@drawable/app_buttons480" android:label="@string/app_name" android:theme="@style/AppTheme" android:resizeableActivity = "true"> <activity android:name=".MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> ____________ //has all the buttons code snd design and button ids main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical"> <Button android:id="@+id/Button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:text="Button Example" style="?android:attr/borderlessButtonStyle"/> <Button android:id="@+id/Button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:text="Button Example"/> <Button android:id="@+id/Button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:letterSpacing=".2" android:padding="5dp" android:text="Button Example" android:background="@drawable/gradient_1" android:onClick="gradient_button1"/> <Button android:id="@+id/Button4" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:letterSpacing=".2" android:padding="5dp" android:text="Button Example" android:background="@drawable/gradient_2" android:onClick="gradient_button2"/> <Button android:id="@+id/Button5" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:letterSpacing=".2" android:padding="5dp" android:text="Button Example" android:background="@drawable/custom_button_states" android:onClick="button_states"/> <Button android:id="@+id/Button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="25dp" android:padding="5dp" android:text="Button Example" android:textColor="#37474f" android:letterSpacing=".2" android:background="@drawable/rounded_button_code"/> </LinearLayout> _____________ //here we add the text for each Toast message that displays when the buttons are selected MainActivity.java package com.aac.button_examples_app; import android.app.*; import android.os.*; import android.widget.Button; import android.widget.Toast; import android.view.View; import android.content.Context; public class MainActivity extends Activity { Button b1, b2, b3, b4, b5, b6; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); b1 = (Button) findViewById(R.id.Button1); b1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Borderless Button", Toast.LENGTH_LONG).show(); }}); b2 = (Button) findViewById(R.id.Button2); b2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Bordered Button", Toast.LENGTH_LONG).show(); }}); b3 = (Button) findViewById(R.id.Button3); b3.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Button with 2 Color Gradients, using Material Design Color Blends ", Toast.LENGTH_LONG).show(); }}); b4 = (Button) findViewById(R.id.Button4); b4.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Button with 3 Color Gradients, also using Color Blends ", Toast.LENGTH_LONG).show(); }}); b5 = (Button) findViewById(R.id.Button5); b5.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Button with Custom States - Pressed, Focused, Default. A color added for each state ", Toast.LENGTH_LONG).show(); }}); b6 = (Button) findViewById(R.id.Button6); b6.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getApplicationContext(), "This is a Button with Rounded Corners", Toast.LENGTH_LONG).show(); }}); }} ___________________ //xml for buttons code for custom button states 3 xml are created default, pressed, focused all these files put at res/drawable folder, must create it the drawable folder button_default.xml ___________ <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#7986cb" android:endColor="#7986cb" android:angle="270" /> </shape> </item> </selector> ______________ button_focused.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#ffffff" android:endColor="#4dd0e1" android:angle="270" /> </shape> </item> </selector> _____________ button_pressed.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#ffffff" android:endColor="#ff0000" android:angle="270" /> </shape> </item> </selector> ____________ //this uses 2 colors for the button gradient_1.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#fce4ec" android:endColor="#d81860" android:angle="270" /> </shape> </item> </selector> _____________ //this uses 3 colors for the button gradient_2.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <gradient android:startColor="#ff9e80" android:centerColor="#fff5ee" android:endColor="#bf360c" android:angle="270" /> </shape> </item> </selector> _____________ //this is a round button with color rounded_button_code.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#4db6ad"/> <corners android:radius="10dp" /> </shape> </item> </selector> _____________ put at res/drawable folder also //this has the code for the custom states being pressed focused and default custom_button_states.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_pressed" android:state_pressed="true" /> <item android:drawable="@drawable/button_focused" android:state_focused="true" /> <item android:drawable="@drawable/button_default" /> </selector> _______ SAVE IMAGE(S): Right Click and Save As
app_buttons480.png

This free script provided by
JavaScript Kit

AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
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 Taste World Wines Flavours and Aromas


AndroidAppCoding.com, All Rights Reserved