How to Add Hyperlink to TextView in Android?

0 0 2 minutes read

Hello geeks, today we are going to make an application where we will see that how we can add a link to a TextView in Android, and using this concept we will add portals – home and practice (of Lazyroar) in our application. So that, user can directly go to these portals from our application.

What we are going to build in this article?

We will be using the strings.xml file to do our task and then will us setMovementMethod() in our java file so that whatever link we provided we can direct there. Here is how our application will look like.

So, now let us see step by step implementation of the application.

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 on strings.xml file

Open values > strings.xml file. We have to make two strings to add a hyperlink, so use the code provided below.

XML

<resources>
    <string name="app_name">Hyperlink_textview</string>
      
    <!-- href tag is used to add link-->
    <!-- link for home text view-->
    <string name="hyperlink"><a href="https://www.zambiatek.com/">zambiatek.com</a></string>
    <!-- link for practice textview-->
    <string name="hyperlink2"><a href="https://practice.zambiatek.com/">practice.zambiatek.com</a></string>
  
</resources>

Step 3: Working with the activity_main.xml file

In the activity_main.xml file, we have to name the TextViews by a string that we created in the strings.xml file. Below is the code for it.

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Constraint layout is used to constrain all components easily-->
<androidx.constraintlayout.widget.ConstraintLayout 
    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:background="#6C6B74"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/textView11"
        android:layout_width="381dp"
        android:layout_height="78dp"
        android:layout_marginTop="252dp"
        android:background="#1B0D0D"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />
  
    <!-- ImageView for the logo-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="135dp"
        android:layout_height="136dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.026"
        app:srcCompat="@drawable/gfg_round" />
  
    <!-- TextView for the tagline of zambiatek -->
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="141dp"
        android:text="A Computer Science Portal for geeks"
        android:textColor="#000C01"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.576"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView"
        app:layout_constraintVertical_bias="0.022" />
  
    <!-- textview as a container to other two text views-->
    <TextView
        android:id="@+id/textView4"
        android:layout_width="381dp"
        android:layout_height="78dp"
        android:layout_marginTop="76dp"
        android:background="#1B0D0D"
        app:layout_constraintBottom_toTopOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.235" />
  
    <!-- Home text view-->
    <TextView
        android:id="@+id/textView7"
        android:layout_width="96dp"
        android:layout_height="44dp"
        android:gravity="center"
        android:text="Home"
        android:textColor="#027507"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/textView4"
        app:layout_constraintHorizontal_bias="0.15"
        app:layout_constraintStart_toStartOf="@+id/textView4"
        app:layout_constraintTop_toTopOf="@+id/textView4"
        app:layout_constraintVertical_bias="0.47" />
  
    <!-- Hyperlink number 1 to the textview-->
    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hyperlink"
        app:layout_constraintBottom_toBottomOf="@+id/textView4"
        app:layout_constraintEnd_toEndOf="@+id/textView4"
        app:layout_constraintHorizontal_bias="0.709"
        app:layout_constraintStart_toEndOf="@+id/textView7"
        app:layout_constraintTop_toBottomOf="@+id/textView3"
        app:layout_constraintVertical_bias="0.788" />
  
    <!-- Hyperlink number 2 to the textview-->
    <TextView
        android:id="@+id/textView12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Practice"
        android:textColor="#027507"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="@+id/textView11"
        app:layout_constraintHorizontal_bias="0.133"
        app:layout_constraintStart_toStartOf="@+id/textView11"
        app:layout_constraintTop_toTopOf="@+id/textView11"
        app:layout_constraintVertical_bias="0.474" />
  
    <!-- Practice text view-->
    <TextView
        android:id="@+id/textView13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hyperlink2"
        app:layout_constraintBottom_toBottomOf="@+id/textView11"
        app:layout_constraintEnd_toEndOf="@+id/textView11"
        app:layout_constraintHorizontal_bias="0.812"
        app:layout_constraintStart_toEndOf="@+id/textView12"
        app:layout_constraintTop_toTopOf="@+id/textView11"
        app:layout_constraintVertical_bias="0.593" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

After implementing the above code our UI looks like this.

Step 4: Working with the MainActivity.java file

We will be using setMovementMethod() to redirect users to the provided link. We will also be using setcolorlink() method to change the color of the link according to our convenience. Below is the code for it.

Java

import android.graphics.Color;
import android.os.Bundle;
import android.text.method.LinkMovementMethod;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Text view number 1 to add hyperlink
        TextView linkTextView = findViewById(R.id.textView8);
          
        // method to redirect to provided link
        linkTextView.setMovementMethod(LinkMovementMethod.getInstance());
          
        // method to change color of link
        linkTextView.setLinkTextColor(Color.YELLOW);
  
        // Text view number 2 to add hyperlink
        TextView linkTextView2 = findViewById(R.id.textView13);
          
        // method to redirect to provided link
        linkTextView2.setMovementMethod(LinkMovementMethod.getInstance());
          
        // method to change color of link
        linkTextView2.setLinkTextColor(Color.YELLOW);
    }
  
}

Congratulations, you have successfully made a complete application its time to run and test it. You can use this method to redirect users of your application to your website. Here is the final output of your application.

Output: