The Holo Light theme provides a clean and bright user interface that follows the design principles of early Android versions. While Material Design has taken over for newer applications, the Holo themes are still useful for maintaining a consistent look in apps targeting older Android versions. In this blog, we'll walk through the steps to implement a simple Android UI using the Holo Light theme.
Setting Up the Holo Light Theme
First, we need to set up the Holo Light theme in our Android project. This involves modifying the theme settings in your project’s manifest file.
Step 1: Define the Holo Light Theme in the Manifest
Open your AndroidManifest.xml file and set the theme for your application or activity.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.hololighttheme"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@android:style/Theme.Holo.Light"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest> |
By setting android:theme="@android:style/Theme.Holo.Light", we ensure that the entire application or the specific activity uses the Holo Light theme.
Example: Creating a Simple Login Screen
Let's create a simple login screen using the Holo Light theme.
Step 2: Define the Layout
Create an XML layout file (activity_main.xml) with the following content:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="16dp"> <TextView android:id="@+id/label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Enter your name:" android:textSize="18sp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:textColor="@android:color/black"/> <EditText android:id="@+id/nameEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Name" android:layout_below="@id/label" android:layout_marginTop="16dp" android:layout_centerHorizontal="true"/> <Button android:id="@+id/loginButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Login" android:layout_below="@id/nameEditText" android:layout_marginTop="16dp" android:layout_centerHorizontal="true"/> <TextView android:id="@+id/forgotPasswordTextView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Forgot password?" android:textColor="@android:color/holo_blue_light" android:layout_below="@id/loginButton" android:layout_marginTop="16dp" android:layout_centerHorizontal="true"/> </RelativeLayout> |
Step 3: Initialize in Activity
In your MainActivity.java or MainActivity.kt file, initialize the views and add any necessary functionality.
Java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
package com.example.hololighttheme; import android.os.Bundle; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; import android.widget.Toast; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText nameEditText = findViewById(R.id.nameEditText); Button loginButton = findViewById(R.id.loginButton); TextView forgotPasswordTextView = findViewById(R.id.forgotPasswordTextView); loginButton.setOnClickListener(v -> { String name = nameEditText.getText().toString(); if (name.isEmpty()) { Toast.makeText(MainActivity.this, "Please enter your name", Toast.LENGTH_SHORT).show(); } else { // Perform login action Toast.makeText(MainActivity.this, "Welcome, " + name, Toast.LENGTH_SHORT).show(); } }); forgotPasswordTextView.setOnClickListener(v -> { // Handle forgot password action Toast.makeText(MainActivity.this, "Forgot password clicked", Toast.LENGTH_SHORT).show(); }); } } |
Kotlin
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
package com.example.hololighttheme import android.os.Bundle import android.widget.Button import android.widget.EditText import android.widget.TextView import android.widget.Toast import androidx.appcompat.app.AppCompatActivity class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val nameEditText: EditText = findViewById(R.id.nameEditText) val loginButton: Button = findViewById(R.id.loginButton) val forgotPasswordTextView: TextView = findViewById(R.id.forgotPasswordTextView) loginButton.setOnClickListener { val name = nameEditText.text.toString() if (name.isEmpty()) { Toast.makeText(this, "Please enter your name", Toast.LENGTH_SHORT).show() } else { // Perform login action Toast.makeText(this, "Welcome, $name", Toast.LENGTH_SHORT).show() } } forgotPasswordTextView.setOnClickListener { // Handle forgot password action Toast.makeText(this, "Forgot password clicked", Toast.LENGTH_SHORT).show() } } } |
Conclusion
Using the Holo Light theme allows you to create clean, bright, and classic Android UIs that are consistent with early Android design guidelines. This example demonstrated how to set up a simple login screen using the Holo Light theme, showing how to define the theme in your manifest, create a corresponding layout, and initialize the views in your activity. By following these steps, you can easily implement the Holo Light theme in your own Android projects. Happy coding!
