Creating Buttons In Android And Customizing them

Creating Buttons In Android And Customizing Them

Buttons are the primary features of any android app. A button makes it very simple to change from activity to activity or start any activity and more. Thus, today, we are going to make simple buttons and learn how we can customize them to look different.

We have two options to create buttons,

1) Using widgets provided by Eclipse. 

2) Using XML.

However, when you drag and drop those widgets, the xml code is written in your xml file. So, if you ask me, to save time, we will use widges. To customize a button, then we will think of xml. But for now, lets make our button work.

Just see your Project Explorer and expand your project. Expand res and go to layout

Right click on layout and go to New --- Other --- Android XML Layout File and click Next.

Select Linear Layout ; give your file a name : newlayout and click on Finish.  

Next, go to activity_main.xml and drag the Button widget on the screen. If You check the graphical layout, you will see the button. Now to xml layout.

Here you will see the id of the button, its height and width and text.

Note : If you are unable to see the button in graphical layout, the just go to xml and add the following to that button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
This happens because you button might not have width and height.

Now, go to MainActivity.java and add " implements OnClickListener " to class

" public class MainActivity extends ActionBarActivity  implements OnClickListener "

Press Ctrl + Shift + O to import the required package. ie. import android.view.View.onClickListener;

Now, before @Override, we need to declare our button

Button b1;

Now go to onCreate Method

public void onCreate(Bundle savedInstanceState)

Here, we need to tell b1 that you are button1 (check the id assignd to button in activity_main.xml)

Below setContentView(R.layout.activity_main); type the following :

b1=(Button)findViewById(R.id.button1);

b1.setOnClickListener(this);

Here we type-cast b1 as Button and call the findViewById( ) method and pass the id of our button.

Next we enable this button using "this" keyword.

Now, our button will receive our click but will not perform any action because we have not assigned any action to it. To do this, outside onCreate( ) mehod, create another method : 

@Override

public void onClick(View v ) {

}

In this method, we will make the button do an activity. The activity will be to change a layout.

From activity_main to newlayout that we made earlier.

In " public void onClick(View v ) " , add the following :

setContentView(R.layout.newlayout);

Run the emulator

Right click on project and select Run --- Run As Android Application.

Click on the Button.

Woallla !!! Your Button Works !!!

Customizing The Created Button 

You can do so many things with the button that we created. Some of them are listed below :

1) Gravity Of Button

Notice that, we can adjust the alignment of our button. Just add the following code in

android:layout_gravity="center"

This will set the gravity to center.

2) Adding Margin

Want some space around your button ?? Check this out !!

android:layout_marginTop="50dp"

Similarly, you can add space to right,left and bottom as well.

3) Adding A Background Color To Button

Want your button to look different ? Why not try adding a background color ?

android:background="#33bbee"

You can change the color to any hexadecimal value but try to keep it live. You can check this website Color-Hex for some cool colors.

4) Transparent Button

How about making your button transparent ? Is it possible ?

android:background="@android:color/transparent"

Yes !!! It is.

5) Changing Text Size And Text Color

android:textColor="#ffffff" 

android:textSize="30dp"

                

6) Changing Style Of Text

android:textStyle="bold"

You can make text "Bold","Italic","BoldandItalic".

Thank You