Android html link color

How to Change Link Colors with CSS

You can style links differently with CSS properties. In general, the properties used to style links are color, font-family and background-color.

There are three ways of changing the link color: inline, internal and external.

Inline method¶

Add the style attribute directly to the hyperlink code and specify the color property through the style attribute, then give a color value to it.

Example of changing a link color with the inline method:¶

Result

Internal method¶

Internal method requires you to use the tag within the section of your HTML document. In the tag, we set the color of our link.

Example of changing the link color with the internal method:¶

There are 4 link states that links can be styled depending on what state they are in:

• a:link — a normal, unvisited link,
• a:visited — a link the user has visited,
• a:hover — a link when a user mouses over it,
• a:active — the moment a link is clicked.

When setting the style for several link states, follow these rules:

• a:hover MUST come after a:link and a:visited,
• a:active MUST come after a:hover.

Example of using different link states:¶

How to change the colors of the hyperlink underline and anchor text¶

To change the underline color, first of all, you need to remove it with the «none» value of the text-decoration property and set the «none» value, then add the border-bottom property with the width (in this case, used as a hyperlink underline width) and border-style (solid, dotted, or dashed) properties. For the anchor text color, use the color property.

Example of changing a hyperlink underline and anchor text color:¶

Example of styling links with the mentioned methods:¶

Now, we’ll demonstrate another example, where we use the color property with its «inherit» value. This will make the element take the color of its parent.

Example of changing the link color with the «inherit» value of the color property:¶

Example of styling links with the CSS text-decoration-color property:CSS text-decoration-color property:»>¶

External method¶

Using external stylesheets you can take control of all the hyperlinks of your site. With external stylesheets, many attractive hyperlink effects can be created to develop the look of your website.

With the external method, you’ll link your web pages to an external .css file that can be created by any text editor in your device. This is a more efficient method, especially when you need to style a large website. You can change your whole site at once by editing one .css file.

Источник

Category: TextView Hyperlink – Change Color and Remove Underline

Sometimes, we need to display hyperlink in textview.

This hyperlink can of following format:

admin is attending Alchemist Rocks.

Which will be seen in the web view as displayed below

How do we create such text in android textview ?

Follow the given steps and you will successfully create a textview whose links will be displayed as shown in the webview:

1. Create a textview in xml

2. In your activity, initialize the String and textview as given in the following code snippet

3. Run your project.

When you run your project, you will see a textview similar to the give figure:

Here, in the given figure, you will see the user names in blue color, which is just as we want……..
But, we dont need the underline. To remove underline

i. Create a new class named as URLSpanNoUnderline as shown in the given code snippet:

ii. Go to your activity and replace the code

by the following code snippet:

iii. then, add the given function in your activity:

Then, run your code, you will get the perfect textview as shown in the given screenshot:

How did the underline disappeared ? What did the given class and function do ?

Heres the explanation :

As you may already know, the TextView object has a property named android:autoLink that creates HTML or email links automatically. You also got properties to change link colors such as android:textColorLink and android:textColorHighlight. The only missing option many of us would like to have is a way to remove the underline under the link itself.

Sadly, removing the underline seems to be somewhat “hard” to achieve. So i had added the given a news class and a new function.

Источник

How to Create a Hyperlink Using Android TextView

The TextView is a widget in Android that allows you to display text to the user. It is also possible to use the Android TextView widget to create a hyperlink which can load a web page in a mobile web browser when clicked.

To create a clickable hyperlink in your Android app using the TextView widget follow the steps below.

1. Create a new String resource in the strings.xml resource file representing the text to be placed inside the TextView
2. In your String resource use HTML markup to insert the hyperlink using an anchor tag
3. Add a TextView in the layout of your Activity or Fragment and use the android:text attribute on the TextView to reference the String resource containing the hyperlink
4. In your Activity or Fragment class use the setMovementMethod(…) on the TextView to enable the hyperlink

In the article below I will include Java and Kotlin code samples that show how to create a hyperlink using the Android TextView following the steps listed above.

I have also included some additional instructions along with code samples written in Kotlin for using links in Android apps in different ways such as:

• How to Change the Hyperlink Text Color in a TextView
• How to Create a Clickable Link to a Website Using a Button in Android
• How to Create a Clickable Link to Another Activity in a TextView

Android TextView Hyperlink Tutorial

Below is a screenshot of an Android app we will be building in this tutorial for creating a hyperlink using the Android TextView widget. When the hyperlink is selected the app will open a mobile web browser and navigate the user to the website https://learntodroid.com

In this tutorial will cover the following steps for creating a hyperlink using the Android TextView widget.

1. Creating a String Resource for the Hyperlink in HTML Markup
2. Creating an Activity Layout File with a TextView
3. Enabling the TextView Hyperlink in the Activity or Fragment Class

I will include code excerpts embedded into this tutorial. For step 3, I have included code samples for both Kotlin and Java.

I have created a video tutorial embedded below on how to create a hyperlink inside a TextView in an Android app. The code written in this video tutorial is also available on GitHub.

Creating a String Resource for the Hyperlink in HTML Markup

The first part of this tutorial for creating a hyperlink using the Android TextView widget will require you to add a new String Resource into the strings.xml file that will represent the text that will be used by the TextView for the hyperlink.

You will need to use HTML markup when writing your hyperlink in your resource file. This means you will need to use an anchor tag and use the href attribute on the anchor tag to capture the URI. Inside the anchor tag you will also need to add some text that will be displayed as a hyperlink to the user in the app.

You can also add a description to the link above or next to the link by adding some text outside of the anchor text in the String Resource. In my example I have also added a new line between my description of the link and the clickable link.

See the code sample of the strings.xml resource file below containing the hyperlink String resource.

Creating an Activity Layout File with a TextView

The next step in this tutorial will involve setting up the layout file for your Activity or Fragment that will contain the hyperlink TextView.

When you are creating the TextView in the layout file you will need to take care of a few things.

1. Give the TextView an id using the “android:id” attribute so that you can reference it in the next part of the tutorial in your Activity or Fragment class
2. Use the “android:text” attribute to reference the String resource you have created above for your hyperlink
3. If you the text shown in the TextView is going to spill over one row consider centering the TextView by setting the “android:textAlignment” attribute to the value of “center”

See the code sample of the activity_main.xml layout resource file below containing a TextView to be shown inside a ConstraintLayout.

Enabling the TextView Hyperlink in the Activity or Fragment Class

The final step of this tutorial involves enabling the hyperlink to be clickable in your Activity or Fragment class by using the setMovementMethod(…) on the TextView.

The setMovementMethod(…) takes a MovementMethod as a parameter. In this tutorial we will be making use of the LinkMovementMethod allow the hyperlink to be clickable and to handle the launching of the web browser and navigation to the link in the browser when selected.

Java Example

See the code sample of the MainActivity.java Activity class file below showing the enabling of the hyperlink using setMovementMethod(…)

Kotlin Example

See the code sample of the MainActivity.kt Activity class file below showing the enabling of the hyperlink using setMovementMethod(…)

How to Change the Hyperlink Text Color in a TextView

By default the hyperlinks shown in your Android TextView widget will be displayed in a dark pink text color with an underline.

You can change the default color of the text of the hyperlink using the setLinkTextColor(…) method on the TextView.

See the code sample of the MainActivity.kt Activity class file below setting the color of the hyperlink in the TextView to blue using setLinkTextColor(…)

See a screenshot showing the hyperlink inside the TextView in blue using the code from the excerpt above.

How to Create a Clickable Link to a Website Using a Button in Android

You can also use a Button widget in Android to load a web page in the mobile browser when clicked.

To do this you will need to make use of an Intent and use the startActivity(…) method to launch an Intent when the Button is clicked.

See the code sample of the MainActivity.kt Activity class file below showing how to use a Button to launch a web browser on the device at a given URI when clicked.

How to Create a Clickable Link to Another Activity in a TextView

I have written another blog post on this website about how to switch between Activities in Android using an Intent. To learn more about this including an example using a Button to switch between Activities using an Intent check out the article below.

If you want to use a TextView instead of a Button to create a link to another Activity you can take the code samples from that lesson and replace the Button with a TextView. You will need to style the text shown in the TextView to look like a hyperlink by setting the text color to blue and adding an underline. There you will need to add an OnClickListener to create the Intent when the TextView is selected.

See the code excerpt from the IntentNavigationActivity.kt Activity class file below which shows setting the text color of the TextView to blue and adding an on click listener to switch to the MainActivity using an Intent when the TextView is clicked.

See the code sample of the activity_intent_navigation.xml layout resource file below containing a TextView to be shown inside a ConstraintLayout.

See the code sample of the strings.xml resource file below containing String Resource for the activity link which is underlined using HTML markup.

You will ensure need to use you have included references to all of the Activities you will be using and navigating between in your manifest file. This is done using the activity tag inside the application tag of the Android Manifest file.

Loading…

Источник

How to change the color of links on a web page

Below are the steps on how you can change the color of the links shown on your web page using HTML and CSS. Although the link colors can be done with the HTML BODY tag, we always recommend doing any styling settings in CSS as shown below.

When defining the color of any web page element, you may need to use HTML color codes. For major colors, you can also specify the names of those colors instead of using the color codes, for example, red, blue, green, and black instead of using their respected color code values.

Understanding the different types of hyperlinks

Hyperlinks are special elements on your page, because they are interactive. To indicate that they are interactive, they are colored differently depending on their state. A hyperlink has three special colors, in addition to its default blue color, which represent three different states:

1. Visited link — The color of a visited link. If a hyperlink is this color, the user can expect that clicking the link takes them to a page they’ve already seen. Purple is the default hyperlink color for a visited link.
2. Hover link — The color when the mouse is hovering over a link. If a hyperlink is this color, the user can expect that pressing the left mouse button (clicking), then releasing the button, causes the link to be visited. Hover color is the same for both «Active» and «Visited» links.
3. Active Link — The color of the link when being clicked. When the user sees this color, they can expect that releasing the mouse button causes the browser to visit the link.

See our hyperlink definition for further information and related questions to hyperlinks.

CSS link color example

In the CSS example below, we are setting the hyperlink colors to resemble what is shown on this page. First, all anchors are set to the #2c87f0 (shade of blue), #636 a shade of purple, and all hover and active links color:#c33 (red). The below code can be added to the CSS style element or in your .css file.

If your page isn’t using CSS, the steps below show how to do this in the HTML BODY tag. However, as mentioned earlier, we highly recommend using the above CSS code instead of the body tag. You can add the above code into a CSS file and link all your web pages to that CSS file. Then, you could change the background-color values in that one CSS file to instantly change the background color of all pages linking to it.

HTML body tag example

In some very rare situations, it may not be possible to use CSS. For those situations, you can also define the background color, text color, link color, and other values in the HTML body tag as shown below.

Below are the descriptions of each of the HTML attributes in the body tag.

TEXT = The color of text.
LINK = The color of links.
VLINK = Visited link color.
ALINK = Color of the active link or the color the link changes to when clicked.
BGCOLOR = The page background color.

Источник