Styling Button and Text using Style Attribute in Android

Android is an open-source operating system, based on the Linux kernel and used in mobile devices like smartphones, tablets, etc. Further, it was developed for smartwatches and Android TV. Each of them has a specialized interface. Android has been one of the best-selling OS for smartphones. Android OS was developed by Android Inc. which Google bought in 2005. In this article, we are going to show styling on a button and text without the use of any drawable file or without using any library. Here we are going to use the style attribute to change the layout of the button in just one line of code. Let’s see the implementation of this feature.

Step By Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn1"
        android:layout_marginTop="10dp"
        android:text="Default"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn2"
        android:layout_marginTop="10dp"
        android:text="Info type Appearance"/>

    <Button
        android:layout_width="match_parent"
        android:layout_marginTop="10dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn3"
        android:text="Time layout"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:id="@+id/btn4"
        android:text="Inverse Mode"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn5"
        android:layout_marginTop="10dp"
        style="@style/Widget.AppCompat.ActionButton.CloseMode"
        android:text="Close Mode"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/btn6"
        style="@style/Widget.AppCompat.Button.Colored"
        android:text="Coloured"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:id="@+id/btn7"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:text="Borderless"/>

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:id="@+id/btn8"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:text="Borderless coloured"/>

</LinearLayout>

Step 3: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.example.stylebutton;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button movie,download,pic,music,whatsapp;
    Button btn1,btn2,btn3,btn4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initialise the layout
        btn1=findViewById(R.id.btn1);
        btn2=findViewById(R.id.btn2);
        btn3=findViewById(R.id.btn3);
        btn4=findViewById(R.id.btn4);

        // add style as showing info text
        btn2.setTextAppearance(R.style.TextAppearance_Compat_Notification_Info);

        // add style as showing time in the text
        btn3.setTextAppearance(R.style.TextAppearance_Compat_Notification_Time);

        // add inverse button appearance, it will inverse the color of text
        btn4.setTextAppearance(R.style.TextAppearance_AppCompat_Widget_Button_Inverse);

    }
}

Output: