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 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: