So, I need a list of items in my app and I want the item layout to be similar to those presented in the android material design guidelines. I've searched a lot but I didn't find ways to recreate the three-line list example:
I don't want to copy it, I just need some guidelines on how to create something similar with the partial separator and the circular image view.
I'm guessing they're using RecyclerView, right?
What library would you recommend me for the circular image view? I've used this one before, but maybe there are some better alternative.
Use a ListView or RecyclerView with a custom adapter.
Your row.xml shoud look something like this (just add some padding, bolding,...).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_download_cloud_green"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="One"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Two"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Three"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grey"/>
</LinearLayout>
</LinearLayout>
Be sure to disable the seperator on your ListView/RecyclerView, you have it in your row.
Also, using the library for CircleImageView is the right thing to do (at least to my knowledge). Have used the same library before, and it is awsome!
Related
I have created a grid layout Like this:
But I want my grid layout some thing like this:
I want my text to be appear on right side. Like Contacts List. Please tell me what changes I must have to do in my layout file. Waiting for a good response.
Since you seem to want a list and not a grid, you should use a LinearLayoutManager, not a GridLayoutManager.
See the official documentation for examples.
Try changing the orientation of your linerlayout to horizontal.
this the xml code just copy and past
<?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:id="#+id/android_list_view_tutorial_with_example"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/album"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/app_name"
android:padding="5dp"
android:src="#drawable/pic1" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="YOUR TEXT"
android:id="#+id/album_title">
</TextView>
</LinearLayout>
I am trying to create the left layout from this link
Blog App User Interface
by Thomas Budiman on Dribbble.com
I have followed this https://guides.codepath.com/android/Heterogenous-Layouts-inside-RecyclerView tutorial and I am now able to design heterogenous layouts inside RecyclerView
Actually I need help to figure out,
Whether RecyclerView is the right choice to create such layout ? (I'm trying to create a blog app and my activity is supposed to show list of blog posts, in the manner shown in Dribbble screenshot.)
If yes, then what logic can be used to achieve it? (acc to me getItemViewType should be responsible to tell what layout to use. )
Any help would be be appreciated
Thanks!
You can have a LinearLayout to contain this view which has a padding like this:
<LinearLayout
android:orientation="vertical"
android:padding="16dp"
...
>
<ImageView>
<TextVeiw android:id="#+id/title">
<TextView android:id="#+id/body">
<FrameLayout
android:layout_height="1dp"
android:layout_width="match_parent"
android:background="#color/gray"
/>
<LinearLayout
android:orientation="horizontal"
...
>
<ImageView
android:layout_weight="1" />
<FrameLayout
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#color/gray"
/>
<ImageView
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
And if you want it to be repeated just use a RecyclerView. If you have any questions you can ask.
In my app, there is a tabbed activity with three fragments. The first fragment has a form to create a new task, the second fragment has the list of all the saved tasks, and the third fragment will show the comments on a task when selected from the list in the second fragment. The third fragment is also supposed to act like a chat activity which posts comments when you type them in and tap the send button. The XML layout of this third fragment is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.ishita.assigntasks.CommentsFragment">
<TextView
android:id="#+id/frag_task_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dd55ff"
android:padding="10dp" />
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:transcriptMode="normal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#android:color/white">
<EditText
android:id="#+id/frag_msg_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:layout_weight="1" />
<ImageButton
android:id="#+id/frag_send_btn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:contentDescription="#string/send_btn"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</LinearLayout>
As you can see, there is a TextView and a ListView and below that is another LinearLayout. Here is how it should look (the purple bar is the TextView):
And here is how it actually looks:
The TextView shows up above the ListView, but the LinearLayout does not. It is there, though. If I do android:layout_marginBottom="20dp" on the outermost LinearLayout, it does show up, but the ActionBar scrolls up and overlaps with the notification bar so that the title on the ActionBar and the notifications on the notification bar are both visible simultaneously and neither is legible.
I searched a lot and this seemed a common issue, but none of the solutions helped me. Believe me, I tried everything I could find. I tried wrapping the whole thing in a FrameLayout, using a RelativeLayout in place of the outermost LinearLayout, using two LinearLayouts--one to wrap the TextView and the ListView and the other to wrap the EditText and the ImageButton, etc., but nothing was able to show the bottom LinearLayout below the ListView. I even tried to set focus on the EditText when the fragment launches so that the keyboard would show and I can type, but even that doesn't help.
Note: On the other hand, if I use the exact same layout on an activity, the bottom LinearLayout displays exactly as it should.
I am unable to find the bug. Please help!
It looks like your toolbar pushes fragment layout down without decreasing its height. I have no idea why this happens (there are no root layout code here).
As a workaround you can set fragments layout bottom margin to ?attr/actionBarSize
As you have given layout_weight 1 in listview layout, so it occupies the whole space available. In order to get rid of you have to give some static height or use layout_weight in right manner
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="500dp"
android:transcriptMode="normal" />
or try like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#android:color/darker_gray"
android:orientation="vertical"
tools:context="com.example.ishita.assigntasks.CommentsFragment">
<TextView
android:id="#+id/frag_task_details"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#dd55ff"
android:padding="10dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:background="#android:color/white">
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:transcriptMode="normal" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#android:color/white">
<EditText
android:id="#+id/frag_msg_edit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:inputType="textMultiLine"
android:layout_weight="1" />
<ImageButton
android:id="#+id/frag_send_btn"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#android:color/background_light"
android:contentDescription="#string/send_btn"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</LinearLayout>
All,
Thank you for all your responses. I found a workaround by trial and error now and thought I should post the answer for others who face the same issue. I set android:layout_marginBottom="50dp" on the inner LinearLayout (the one wrapping the comments bar--EditText and ImageButton). Somehow, this sets the layout correctly and the fragment functions properly in both Lollipop and Jellybean OS's. I haven't tested on other OS versions.
First of all you should read this, what is layout_weight and how it works.
You assigned layout_weight to ListView as 1, it means it covers whole height. just change it to 0.7 or any proportion you want (less than 1) will solve the problem.
<ListView
android:id="#+id/frag_comment_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:transcriptMode="normal" />
The main layout have four widgets- one EditText and three TextView as given below.
I want to add suggestion-list view dynamically as given below:
How to do it?
You can use AutoCompleteTextView. Described in http://developer.android.com/guide/topics/ui/controls/text.html.
Probably Custom adapter will help you to make two suggestions lists. Take a look at this Autocompletetextview with custom adapter and filter. I guess you need to create divider in custom adapter.
As described in comments. Just Make listview visible when you need to show suggestions. Or paste in eclipse and remove android:visibility="gone" attribute and you will see gray listview over textviews.
<?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:orientation="vertical" >
<EditText
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/search"
android:text="text1" />
<TextView
android:id="#+id/tv_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/tv_1"
android:text="text2" />
<ListView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/search"
android:background="#android:color/darker_gray"
android:visibility="gone" />
</RelativeLayout>
There is a class already built into android which gives you think functionality.
It's called AutoCompleteTextView
I made a compound control, but when i add this new component into a XML layer with other standard components(e.g. TextView), when this layer is inflated, the compound control has a big margin added in the bottom separating this from the others components. I tried adding Layer_bottomMargin = 0dp without success, the only way to resolve this, is adding layer_height a fixed value (i.e. 15dp) instead "wrap_content", but this solution is not fine for me, due i want remove dinamically some component from my compound control.
The code of my compound control:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="left|top"
android:clickable="false"
android:background="#CCCCCC"
android:layout_marginTop="#dimen/fieldset_margin"
>
<TextView
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/title_default"
android:textSize="14sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_shadow"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:background="#color/fieldset_lines_light"
/>
</LinearLayout>
And the code of my layer including this compound control:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#C8D5F6FF"
android:gravity="top"
android:layout_margin="8dp"
>
<com.apps.example.Header
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/fieldset_text_secondary"
android:text="nananananan"
android:textSize="10sp"
android:layout_marginLeft="#dimen/fieldset_margin"
/>
</LinearLayout>
Sorry but this is my first post and i can't upload images.
Thanks in advance.
I resolved partially by overwriting the onMeasure method in my compound control class. I did not this before because in the official documentation:
http://developer.android.com/guide/topics/ui/custom-components.html
says that is not necessary overwrite this method when is creating a compound control.
Anyway, this is partial solution due when an individual control of the compound is programmatically turned invisible (GONE) occurs the same issue mentioned in the original post but with smaller margin space.
I will continue trying to resolve this, but for now, this is my solution.
Thanks!