CODEWITHSUNDEEP
androidtextviewmaterial-designmaterial-components-androidmaterial-components
ar3
ar3

Reputation: 409

How to implement the round border and ?selectableItemBackground in textview android?

I am trying to have two text views inside a Linear Layout with a horizontal orientation. Now I want to have the following things for each text view:

  1. An icon at left - implemented using android:drawableLeft="@drawable/ic_lightbulb_outline_blue_24dp"

  2. A round border around the text view - implemented using android:background="@drawable/round_border"

  3. Also, need that ripple effect on touching a touch item

The 3rd point is implemented in other text views using the att.

android:background="?selectableItemBackground"
android:clickable="true"

But there is already a background att. for the round border. Now my question is how to achieve that ripple effect? Is using following att. only way:

android:foreground="?selectableItemBackground"

Android shows this att. is not supported in lower api versions so worried.

enter image description here

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/vision_mission"
        android:gravity="center"
        android:layout_margin="8dp"
        android:padding="8dp"
        android:textSize="16sp"
        android:onClick="openVisionMission"
        android:drawableLeft="@drawable/ic_lightbulb_outline_blue_24dp"
        android:background="@drawable/round_border"
        android:clickable="true"
        android:focusable="true"/>

    <TextView
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/team"
        android:textSize="16sp"
        android:drawableLeft="@drawable/ic_people_blue_24dp"
        android:background="@drawable/round_border"
        android:clickable="true"
        android:focusable="true"
        android:padding="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"
        android:gravity="center"/>

    </LinearLayout>

Upvotes: 0

Views: 2141

Answers (3)

Shivam Sharma
Shivam Sharma

Reputation: 96

You can achieve ripple effect and text view rounded background at the same time using the following code.

Custom ripple drawable, it require API level 21+

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />

            <stroke
                android:width="1dp"
                android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <stroke
                android:width="1dp"
                android:color="@android:color/holo_blue_dark" />
        </shape>
    </item>
</ripple>

After that set background of your text view

 android:background="@drawable/custom_ripple"

For pre lollypop ie. below API level 21

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorDarkGray"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorButtonGreen"/>
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorButtonGreenFocused"/>
        </shape>
    </item>
</selector>

Upvotes: 3

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364730

It is not exactly what you are looking for.
You can achieve easily something similar with a MaterialButton with a OutlinedButton style.

Something like:

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        app:icon="@drawable/ic_add_24px"
        android:text="...."
        .../>

enter image description here

You can customize the padding between the icon and the text, the textColor, the strokeWidth, the strokeColor and also the color selector used for the app:rippleColor

   <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
        app:icon="@drawable/ic_add_24px"
        app:strokeColor="@color/primaryDarkColor"
        app:strokeWidth="2dp"
        app:iconPadding="16dp"
        .../>

enter image description here

Upvotes: 1

indra lesmana
indra lesmana

Reputation: 261

you can change your background drawable with selector tag

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
          android:drawable="@drawable/button_pressed" /> <!-- pressed -->
    <item android:state_focused="true"
          android:drawable="@drawable/button_focused" /> <!-- focused -->
    <item android:state_hovered="true"
          android:drawable="@drawable/button_focused" /> <!-- hovered -->
    <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

Upvotes: 0

Related Questions