Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

How to Add a TextView with Rounded Corner in Android?

To create a TextView with rounded corners in Android, you typically use a drawable resource as its background. Here's a step-by-step guide to achieve this:

1. Create a Drawable Resource:

Create a new drawable resource file, e.g., rounded_corner_background.xml, in your res/drawable directory:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Define the solid background color -->
    <solid android:color="#FF4081"/>

    <!-- Define the corner radius -->
    <corners android:radius="12dp"/>

    <!-- Optionally, add padding inside the TextView -->
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"/>
    
    <!-- Optionally, define a border -->
    <!--<stroke android:width="2dp" android:color="#fff"/>-->
</shape>

2. Assign the Drawable to TextView:

Assign the drawable you created as the background for your TextView:

In XML:

<TextView
    android:id="@+id/myTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rounded Corner TextView"
    android:background="@drawable/rounded_corner_background"
    android:textColor="#FFFFFF"/>

Programmatically:

If you want to set the background programmatically, you can use:

val textView: TextView = findViewById(R.id.myTextView)
textView.setBackgroundResource(R.drawable.rounded_corner_background)

3. Additional Tips:

  • Different Radii for Corners: If you want different radii for the four corners, you can use the android:topLeftRadius, android:topRightRadius, android:bottomLeftRadius, and android:bottomRightRadius attributes inside the <corners> element.

  • Clickable Feedback: If your TextView is clickable and you want visual feedback on click, consider wrapping your TextView in a MaterialCardView (from the Material Components library) or using a custom state-list drawable as a background.

With these steps, your TextView will have rounded corners and will stand out from a standard TextView. Adjust the corner radius, padding, and other attributes as per your design requirements.

  1. Creating rounded corner TextView in Android example code:

    • Description: Create a TextView with rounded corners to enhance its visual appearance.
    • Code:
      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rounded Corner TextView"
    android:background="@drawable/rounded_corner_background" />

  2. Using XML drawable for rounded corner TextView in Android:

    • Description: Use XML drawable resources to define the background with rounded corners for a TextView.

    • Code:

      <!-- res/drawable/rounded_corner_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <solid android:color="#FF4081" />
</shape>

      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rounded Corner TextView"
    android:background="@drawable/rounded_corner_background" />

  3. Customizing background and border for TextView in Android:

    • Description: Customize both the background color and border of the TextView using XML drawable.

    • Code:

      <!-- res/drawable/custom_background.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FF4081" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Custom Background and Border"
    android:background="@drawable/custom_background" />

  4. Applying gradients to rounded corner TextView in Android:

    • Description: Add gradients to the background of a TextView with rounded corners using XML drawable.

    • Code:

      <!-- res/drawable/gradient_rounded_corner_background.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#FF4081"
        android:endColor="#4CAF50"
        android:angle="45" />
    <corners android:radius="8dp" />
</shape>

      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Gradient Rounded Corner TextView"
    android:background="@drawable/gradient_rounded_corner_background" />

  5. Handling different states of TextView with rounded corners:

    • Description: Define different drawables for different states (e.g., pressed, focused) to provide visual feedback when interacting with the TextView.

    • Code:

      <!-- res/drawable/selector_rounded_corner_background.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#FF4081" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape>
            <solid android:color="#4CAF50" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#CCCCCC" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</selector>

      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Stateful Rounded Corner TextView"
    android:background="@drawable/selector_rounded_corner_background" />

  6. TextView with rounded corners and shadow in Android:

    • Description: Combine rounded corners with a shadow effect to add depth to the TextView.

    • Code:

      <!-- res/drawable/shadow_rounded_corner_background.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="#FF4081" />
        </shape>
    </item>
    <item android:right="1dp" android:left="1dp" android:top="1dp" android:bottom="1dp">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <solid android:color="#000000" />
        </shape>
    </item>
</layer-list>

      <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Rounded Corner TextView with Shadow"
    android:background="@drawable/shadow_rounded_corner_background" />
Copyright © devanddep.com | All Rights Reserved