Add background for TextView

Question

How to write XML background (corner rectangle and a line between) for TextView (#test1 and #test2)

You can have parent with rounded corner rectangle drawable background then have 3 child `TextView`,` View` and `TexView`. Use View just as separator. This is one way of achieving it, yes there are multiple other ways — Shadow Droid, Jan 09 '20 at 08:52

score 0 · Answer 1 · answered Jan 09 '20 at 08:54

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gray">


<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="use your drawable class">



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

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            //your designing code
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            //your designing code
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            //your designing code
        </RelativeLayout>


    </LinearLayout>


</androidx.cardview.widget.CardView>

</RelativeLayout>

score 0 · Answer 2 · answered Jan 09 '20 at 08:56

add a xml in drawables

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="3dp" android:color="#B1BCBE" />
<corners android:radius="10dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" 
android:bottom="0dp" />
</shape>

make a linear layout with 2 textviews and set background to above xml something like below. Inside the nested layouts put imageview and textview View with height 0.5dp will act as divider

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="@drawable/name_of_xml">

 <LinearLayout></LinearLayout>
 <View
   android:layout_width="match_parent"
   android:layout_height="0.5dp"
   android:color="black">
 <LinearLayout></LinearLayout>

</LinearLayout>

See this how to add backgrounds to layouts

score 0 · Answer 3 · answered Jan 09 '20 at 09:01

0

I don't know your goal, but why not make a custom listView adapter ?

you can take inspiration from this link if you wish : custom listView adapter

answered Jan 09 '20 at 09:01

DLx

97
1
13

score 0 · Answer 4 · answered Jan 09 '20 at 09:05

Just copy and paste below snippet of code. And change icons and text colors as you want.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/parent_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="vertical"
    app:cardBackgroundColor="#EBEBEB"
    app:cardCornerRadius="23dp"
    app:cardElevation="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingLeft="18dp"
        android:paddingRight="18dp"
        android:paddingTop="10dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/icon"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:tint="@android:color/black"
                app:srcCompat="@drawable/ic_person" />

            <View
                android:layout_width="10dp"
                android:layout_height="0dp" />

            <TextView
                android:id="@+id/message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:maxLines="1"
                android:singleLine="true"
                android:text="#Text 1"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#000000" />

            <View
                android:layout_width="10dp"
                android:layout_height="0dp" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/green_700"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"></View>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/icon_2"
                android:layout_width="18dp"
                android:layout_height="18dp"
                android:tint="@android:color/black"
                app:srcCompat="@drawable/ic_person" />

            <View
                android:layout_width="10dp"
                android:layout_height="0dp" />

            <TextView
                android:id="@+id/message_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:maxLines="1"
                android:singleLine="true"
                android:text="#Text 1"
                android:textAppearance="@style/TextAppearance.AppCompat.Body1"
                android:textColor="#000000" />

            <View
                android:layout_width="10dp"
                android:layout_height="0dp" />

        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

Output of above code -

score 0 · Answer 5 · edited Jan 09 '20 at 12:32

I will assume you are using ListView as you did not mention it in your question. As per your requirement, just copy paste the below code:

on your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ListView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/listItems"
    android:background="@drawable/listview_shape"></ListView>

</LinearLayout>

create a new layout file for your single listView item. I called it list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="75dp"
    android:orientation="horizontal">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/user_single_img"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_margin="10dp"
        android:src="@drawable/batman" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@drawable/border_layout">

        <TextView
            android:id="@+id/user_single_name_txt"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentStart="true"
            android:layout_margin="10dp"
            android:padding="5dp"
            android:text="Display Name"
            android:textAlignment="textStart"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold" />

    </RelativeLayout>


</LinearLayout>

To use CircularImageView, you need to add the following lines in your app level build.gradle file

implementation 'de.hdodenhof:circleimageview:3.0.1'

Create two new drawable xml files. border_layout.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:gravity="bottom">
        <shape android:shape="rectangle">
            <size android:height="0.5dp"/>
            <solid android:color="#707070"/>
        </shape>
    </item>
</layer-list>

listview_shape.xml :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/shape_my">
    <stroke android:width="4dp" android:color="#636161" />
    <padding android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp" />
    <corners android:radius="24dp" />
    <solid android:color="#FFF" />
</shape>

Now, just initialise everything in your MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {
    // Array of strings...
    String[] mobileArray = {"Sam Batman","John Batman","Alfred Batman","Black Batman",
            "Cath Batman","Window Batman"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayAdapter adapter = new ArrayAdapter<String>(this,
                R.layout.list_item, R.id.user_single_name_txt, mobileArray);

        ListView listView = (ListView) findViewById(R.id.listItems);
        listView.setAdapter(adapter);

        listView.setDivider(null);
    }
}

Result of the above code :

Add background for TextView

5 Answers5