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