How to create a custom ListView in Android Studio - android

I'm quite new to Android Studio and for my app I need to create a custom ListView made of cells that have:
2x textView
a non modifiable ratingView (Stars)
an imageView
the cells should look something like this:
I would really appreciate if you show me a way to do it using the design interface in Android Studio instead of the xml editor.
Up until now I created a simple listView but I don't know how to customize it. This is the xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="dancam.com.chords.TabMainActivity">
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>

Hopefully you can understand and develop your design now.

you need to add the views for every line.
Add a row.xml in your layout resources.
Create a custom adapter for listview, in getView inflate row.xml.
Here is an example.
If you need a more flexible implementation, considere
using RecyclerView, guide here.
Hope it helps

Related

Android View View XML Programmatically

I'm trying to debug a view that I'm creating programmatically. I'd like to be able to see what the exact XML is of the view after it's created.
Really I'd like to be be able to do something like Log.d(TAG,view.toString())
And get an output like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/activity_main"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="sampleapp.example.com.tr221test.MainActivity">
<Button android:id="#+id/surveyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Take Survey!"/>
</RelativeLayout>
Is there anyway I can programmatically see what the xml is of a view?
There is nothing built in for that. You would have to write your own View-hierarchy-to-XML code or see if somebody has a library for that.
Or, use Android Studio's layout inspector.
Or, use uiautomatorviewer.
Or, use Stetho.

Zooming a layout (Relative Layout) in android

I want to zoom in and out all the images inside the layout. I have seen many questions like here and here and tried to implement them but I couldn't.
Please help me in order to understand this. My confusion is, why would I extend my class from relative layout, as described in the question above, i mean i have a relative layout in my XML and I am setting this XML in content view but how could I grab the specific relative layout by using this methodology. And even if I have extended class from relative layout, how would I use this class in the activity which contains my images inside layout.
My XML setup is like this, can anyone please tell me what approach I have to follow.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.cpec.farrukhtanveer.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="130dp"
android:layout_marginRight="130dp"
android:background="#drawable/imageBackGround">
<ImageView
android:id="#+id/img_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
android:src="#drawable/imageone"/>
<ImageView
android:id="#+id/img_two"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="imagetwo"/>
</RelativeLayout>
</RelativeLayout>
Please help folks !
Thanks.
Umair
Since no one came up with solution, I kind of sort it out myself and thought it might be helpful for some one else who is stuck in this problem. The basic guidance came from here, where author implemented the zoom in and out for a single image, we just have to add images and handle other initialization as described in that tutorial.
ImageViewWithZoomClass:
private Drawable imageOne, imageTwo;
imageOne = context.getResources().getDrawable(R.drawable.icon1);
imageTwo = context.getResources().getDrawable(R.drawable.icon2);
.
.
imageOne.setBounds(0, 0, imageOne.getIntrinsicWidth(), imageOne.getIntrinsicHeight());
imageTwo.setBounds(0, 0, imageTwo.getIntrinsicWidth(), imageTwo.getIntrinsicHeight());
.
.
imageOne.draw(canvas);
imageTwo.draw(canvas);
and since I am using relative layout, I just used onClickListener in my MainActivity like this
relativeLayout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
setContentView(new ImageViewWithZoom(getApplicationContext()));
}
});
and XML for the relative layout looks like this:
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="130dp"
android:layout_marginRight="130dp"
android:background="#drawable/abc"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
>
<ImageView
android:id="#+id/img_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/roadandrailways"
android:visibility="invisible"/>
<ImageView
android:id="#+id/img_2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/capital"
android:visibility="invisible"/>
</RelativeLayout>
You can add multiple images in layout.
Thats it, hope it helps.

Ripple effect on ListView item

I am new to Android development. I am trying to develop a SMS app for Android. I am successful with reading the inbox and contacts and display them in a ListView item. Now, what I want to achieve is to have a ripple effect on these ListView items every-time they are clicked or touched or selected. I used listSelector but seems it's not working. If anybody could help me, below is my code:
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<ListView
android:id="#+id/msglist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="true"
android:listSelector="#777777" />
You are going to inflate a layout in your Adapter for ListView, right? Then you can go to that layout.xml and set android:background="?android:selectableItemBackground" to the root element.
NOTICE: Ripple effect can only happen above API 21(Lollipop) by doing this. Under Lollipop, when you touch the item, a transparent blue layer will appear and overlay your source content, which is shown as selecting state.

ListView Greyed Out

So I've run into a pretty peculiar issue here. I am using a navigation drawer that has the framelayout to switch out content. I current have two fragments built, one is just fine and the only thing it has in it is a button, no layout specified. My second fragment though has a relative layout with a textview and a listview.
When I load the listview (which uses the textview) I get this:
As you can see, the listview is greyed out. I have no immediate colors set in my layout for this so it's not all grey text, and I can still click each item and scroll the list. I have no idea what is causing this, any tips?
EDIT Here are snippets of my code where I am working with the layout:
View rootView = inflater.inflate(R.layout.fragment_read_it, container,
false);
And here is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<TextView
android:id="#+id/info"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
And lastly my adapt and list:
ArrayAdapter<PressRelease> adapter = new ArrayAdapter<PressRelease>(
getActivity().getApplicationContext(),
android.R.layout.simple_list_item_1, pressReleases);
listView.setAdapter(adapter);
Please give specific color to textview like
<TextView
android:width="match_parent"
android:height="wrap_content"
android:textColor="#000000"
>
And in list view put cache color hint as transparent like
<ListView
android:width="match_parent"
android:height="wrap_content"
android:cacheColorHint="#andorid:color/transparent"
>
I found a solution in another thread.
Use android.R.layout.simple_list_item_1 with a light theme
I was using getApplicationContext() with my adapter, and for some reason using this with the light theme makes the colors on the listview light.

getRootView() not working

This is my xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:orientation="vertical"
android:padding="15dip" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
Now in my code I would like to change the window's background color, and I'm doing it like this:
ListView listview = (ListView) findViewById(android.R.id.list);
View root = listview.getRootView();
root.setBackgroundColor(Color.parseColor("#bdbdbd"));
If I understood this correctly, this should change the background color of the listview's parent (in this case, the LinearLayout). However this is not working, what am I doing wrong?
I think you're confused, getRootView() won't get you that LinearLayout, but the parent of that view. See this other question. You should use listview.getParent() instead; note that it needs to be casted.
try to use getParent() in place of getRootView() to get the instance of the surrounding LinearLayout..

Categories

Resources