Skip to content
Related Articles

Related Articles

How to Add SlantedTextView in Android App?
  • Last Updated : 21 Apr, 2021

SlantedTextView is an Android library that allows us to easily create a slanted text in an android app. We can use this feature in many apps such as educational courses app or subscription-based app and in many other apps where some features are available for free and some are paid features. Note that we are going to implement this project using the Java language. 

Attributes of SlantedTextView 

Different SlantedMode

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: Before going to the coding section first do some pre-task

Go to app -> res -> values -> colors.xml file and set the colors for the app.

XML




<?xml version="1.0" encoding="utf-8"?>
<resources>
  
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>
    <color name="white">#ffffff</color>
    
</resources>


Go to Gradle  Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up.

implementation ‘com.haozhang.libary:android-slanted-textview:1.2’

Step 3: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to RelativeLayout and add the SlantedTextView and a normal TextView as shown below. 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"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
      
    <!-- adding slant text view -->
    <com.haozhang.lib.SlantedTextView
        android:id="@+id/slantTextView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:slantedBackgroundColor="@color/colorPrimary"
        app:slantedLength="40dp"
        app:slantedMode="left"
        app:slantedText="Pro"
        app:slantedTextColor="@color/white"
        app:slantedTextSize="16sp" />
      
    <!-- normal text view -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Advance Programming in Python"
        android:textSize="24dp" />
      
</RelativeLayout>


Properties of SlantedTextView 

Property xml  java Description 
1 app:slantedBackgroundColor setSlantedBackgroundColor( int color) Used to set the text background color
2 app:slantedLength setSlantedLength(int length) Used to set the text slanted length 
3 app:slantedMode setMode(int mode) Used to set the slant mode
4 app:slantedText setText(String str) Used to set the text
5 app:slantedTextColor setTextColor(int color) Used to set the text color
6 app:slantedTextSize setTextSize(int size) Used to set the text size 

Step 4: Coding Part

There is nothing to do with the MainActivity.java, but we can make changes to the SlantedTextView using java code, for this, we create a slantText() method, inside which we create and initialize SlantedTextView and changes its value as shown below.

Java




void slantText()
 {
        // getting slant text view reference
        SlantedTextView slantedTextView =(SlantedTextView)findViewById(R.id.slantTextView);
  
        // changing the values of slant text view
        slantedTextView.setText("Pro") // change the text
                .setTextColor(Color.WHITE) // change the text color
                .setSlantedBackgroundColor(Color.RED) // change the text background color
                .setTextSize(16) // change the text size
                .setSlantedLength(40) // change the slanted length
                .setMode(SlantedTextView.MODE_LEFT); // change the Mode
  }


Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import android.graphics.Color;
import android.os.Bundle;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.haozhang.lib.SlantedTextView;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // call if we need
        // slantText();
     
    }
  
    void slantText() {
          
        // getting slant text view reference
        SlantedTextView slantedTextView = (SlantedTextView) findViewById(R.id.slantTextView);
  
        // changing the values of slant text view
        slantedTextView.setText("Pro") // change the text
                .setTextColor(Color.WHITE) // change the text color
                .setSlantedBackgroundColor(Color.RED) // change the text background color
                .setTextSize(16) // change the text size
                .setSlantedLength(40) // change the slanted length
                .setMode(SlantedTextView.MODE_LEFT); // change the Mode
    }
}


Output: 

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :