CODEWITHSUNDEEP
android
user359187
user359187

Reputation: 2279

Curved border for list view

I am newbie to android and java, i need to create a simple application in android. I have a Activity page in this activity. Here is my activity page 

package com.tkcmu.dev;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
import java.util.ArrayList;

import org.apache.http.client.ClientProtocolException;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class tkcmu extends Activity {
    private ListView lv1;

    @Override
        public void onCreate(Bundle icicle)
        {
        super.onCreate(icicle);
        setContentView(R.layout.main);


        ArrayList<String> listItems = new ArrayList<String>();

        try {
            URL recentUrl = new URL(
                    "To some link");
            URLConnection tc = recentUrl.openConnection();
            BufferedReader in = new BufferedReader(new InputStreamReader(tc.getInputStream()));

            String line;
            while ((line = in.readLine()) != null) {
                JSONArray ja = new JSONArray(line);

                for (int i = 0; i < ja.length(); i++) {
                    JSONObject jo = (JSONObject) ja.get(i);
                    listItems.add(jo.getString("content"));
                }
            }

    }catch (ClientProtocolException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }catch (IOException e) {
                e.printStackTrace();

            } catch (JSONException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }


        lv1=(ListView)findViewById(R.id.ListView01);
        // By using setAdpater method in listview we an add string array in list.
        lv1.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1 , listItems));
        }
}

and my main.xml is like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ListView
        android:id="@+id/ListView01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="10sp"
        android:layout_marginRight="10sp"
        android:layout_marginTop="10sp"
        android:layout_weight="1"
        android:background="@drawable/customshape"
        android:cacheColorHint="#FFFFFF"
        android:clickable="true"
        android:clipToPadding="true"
        android:dividerHeight="1px"
        android:drawSelectorOnTop="false"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:footerDividersEnabled="true"
        android:headerDividersEnabled="true"
        android:longClickable="true" />
</LinearLayout>

and also i have an customshape.xml in drawable which is

 <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="10dp" />
</shape>

I got the result with the entire custom list section get curved but i want to get each row with a curved background. I have posted my entire code here(exclude AndroidManifest.xml) so this will be appreciated if anybody tell me exactly what changes i need to in this code. Any body have an idea about how to implement it.

Upvotes: 4

Views: 4203

Answers (7)

Priyansh Bhatt
Priyansh Bhatt

Reputation: 29

A simple way to do this would be to use a CardView. Here is the dependency you'll need to add a dependency: com.android.support:cardview-v7:27.0.2. Add this to your build.gradle

Next up, just browse to simple_list_item_1.xml i.e. to the XML file where you've created the layout for a single row to be displayed in the ListView with the adapter!

In this XML file, make CardView your parent layout, so for example, if this was the previous code in simple_list_item_1.xml:

<RelativeLayout
    android:id="main_layout"
    android:width="match_parent"
    android:height="wrap_content">

    ...
    //Other layouts and normal code here.
    ...

</RelativeLayout>

Then, you should change your code to this:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp">

    <RelativeLayout
        android:id="main_layout"
        android:width="match_parent"
        android:height="wrap_content">

        ...
        //Other layouts and normal code here.
        ...

    </RelativeLayout>

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

In here, you can use the card_view:cardCornerRadius property of the CardView to give a round edge to the entire layout!

P.S. As an added bonus, you can also use the card_view:cardElevation property to give a raised appearance to your layouts, if you use this property, make sure to leave some room in all directions to give a light shadow-y effect!

Hope I could help ;)

Here are some resources to help you:

1) The official documentation.

2) A basic tutorial (with a RecyclerView)

3) Also a disclaimer from my side: Traditionally, CardView have been used only with RecyclerView's, this has to lead to the common belief that a CardView can be used only with a RecyclerView and nothing else. This is a common misconception, a CardView is a design element and isn't bound to the RecyclerView in any manner, they can be used in any manner that you want!

This is how a rounded CardView would look like (minus the ListView i.e. the CardView on its own) - See one of my designs.

Upvotes: 0

user9271802
user9271802

Reputation:

create drawable layout 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <corners android:radius="5dp"/>
   <solid android:color="#ff0000"/>
</shape>

and then use it in background for listView

 android:background="@drawable/yourLayoutName"

Upvotes: 0

Omid Heshmatinia
Omid Heshmatinia

Reputation: 5236

The easiest way to do is to define a xml like this and name it my_list_item or whatever you like:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:background="@drawable/customshape"
   android:layout_height="wrap_content">
</TextView>

and just change this line in your code :

lv1.setAdapter(new ArrayAdapter<String>(this,R.layout.my_list_item , listItems));

Important Note :

set a color to the background of your customshape drawable. not defining any color would cause a black background in some old android tablets (Axtrom,Asus). Something like this :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <corners android:radius="10dp"/>
   <solid android:color="#ffffff"/>
</shape>

another thing to mention is that you can change everything for your rows in the xml you created. for example textcolor, textsize, gravity, etc ....

Upvotes: 0

Krishna
Krishna

Reputation: 1634

Use this layout in adapter class and inflate this layout. Import latest library of cardview in your project.

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

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="8dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:id="@+id/relative_card_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/country_photo"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:contentDescription="@string/action_settings"
                android:scaleType="centerCrop"
                android:src="@drawable/sweden" />

            <TextView
                android:id="@+id/title_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:gravity="center"
                android:text="@string/app_name"
                android:textColor="@color/colorAccent"
                android:textSize="24sp"
                android:textStyle="bold" />

        </RelativeLayout>

        <TextView
            android:id="@+id/title_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="8dp"
            android:layout_marginStart="8dp"
            android:text="@string/app_name"
            android:layout_below="@+id/relative_card_layout"
            android:textColor="@color/colorAccent"
            android:textSize="18sp"
            android:padding="8dp"
            android:textStyle="bold" />
    </RelativeLayout>

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

Upvotes: 1

user8601021
user8601021

Reputation: 219

add 

 android:background="@drawable/customshape"

to the root view of the listview row.xml file rather than applying it to the listview

Upvotes: 4

Aman
Aman

Reputation: 147

I would recommend you to use a custom adapter where you can set up the shape as background. This is easily achievable there. But since you are a newbie, it will be a little tough. So there is something which I won't recommend but might be a solution: Press control + B on the android.R.layout.simple_list_item_1. This is the original list view XML which is written by the Android team. So you have to override this and set your background shape here (the shape you have written, set it as the background).

Upvotes: 1

Alexandru Cristescu
Alexandru Cristescu

Reputation: 3948

I never done this for rounded corners, but I would try to provide a custom adapter for the list. A custom adapter would allow you to specify which view to use for each item. In your case, you could try to provide a view with a rounded corner borders (defined with a shape XML).

To do this, you would replace the line lv1.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1 , listItems));

with a BaseAdapter that implements the getView() method.

There are literally hundreds of tutorials on how to do this, but this one seems to be more detailed.

Upvotes: 2

Related Questions