I'm a beginner in Android development. I'm creating an application where I need to show products as a list with:
Thumbnail
Name
Price
Rating
I want to make it somewhat like the Apps list in Google play. Can someone direct me to a starting point in making that kind of UI?
I think its something related to GridView but, if yes, not sure how to proceed.
Thanks.
EDIT: I think people misunderstood my GooglePlay reference. Im pasting an image to show how I want my UI to be.
http://i49.tinypic.com/2cqjqx0.png
(I'm not allowed to post images..)
I already have the tab swipes and everything. Only want to know how this type of list could be created.
Thanks again!
I think this and this is what you need.
check out the links. They will be useful to you. Its called customize Listview
What you need to do is to create a custom view called layout for a list Item .
Following code will create a list item of your choice. Modify code as per your requirement. But you can idea from following code.
<?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"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/txtItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView1"
android:text="Item Name"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/txtItemPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/txtItemName"
android:text="Item Price" />
<TextView
android:id="#+id/txtRating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/textView1"
android:layout_alignBottom="#+id/textView1"
android:layout_alignParentRight="true"
android:text="Rating"
android:textAppearance="?android:attr/textAppearanceSmall" />
Just copy and paste above code in your layout and switch to Graphical Layout. You can see outcome.
Following links helps you how to use customized layout in your list view.
Custom List1 and Custom List2
This two way Android GridView that can be configured to scroll horizontally or vertically.
This gridview is what you are looking for.
Hope it helps :)
Related
I want to create a list view layout with a image and title in it. I want a layout like listview in google io 2014 app. It should be a tiled listview with some colour till the image gets loaded, after the image is loaded it should be shown in the upper half of the listview and title should be shown below with some background colour. I am attaching the screenshot of google io app here.
Updated: If somebody can point me some template custom layout for this listview it would be helpful!
Create a custom list with all the needed controls in separate layout and inflate it using a custom adapter you can find a small example here
you could create a custom layout something like this
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:background="#drawable/images"
android:layout_height="match_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#862c10">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:textStyle="bold"
android:text="HTML5 everywhere how and why android users use the webplatform" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Wed 5 2001" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="15sp"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:text="Steven roberts and mark robinson " />
</LinearLayout>
</LinearLayout>
(this should not be the answer, but forgive me I could not add a comment, and actually I hope this will give him the answer).
First of all I guess you didn't get on well with using ListView and Adapter in Android. So I suggest you to read the following article first:
ListView tutorial 1
ListView tutorial 2
They will teach you how to use xml to define your custom row view. Then you will know how to use George Thomas's xml. Try how to implement the getView() method.
My goal is to mimic the app list page of Google's Play Store.
to do that, I have made a Relative view for each app box which contains icon, title, developer, etc...
<RelativeLayout
android:layout_width="205px"
android:layout_height="310px"
android:background="#FFFFFF"
android:padding="10px"
android:layout_margin="4px">
<ImageView
android:id="#+id/icon1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_marginTop="5px"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginBottom="20px"
android:src="#drawable/icon1" />
<TextView
android:layout_below="#id/icon1"
android:id="#+id/title1"
android:text="#string/t1"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#333333"
android:textSize="20px" />
<TextView
android:layout_below="#id/title1"
android:text="#string/company"
android:gravity="left"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#555555"
android:textSize="15px" />
</RelativeLayout>
I want to put 72 different app boxes in a big scroll view but that requires thousands of lines..
I know I can reuse custom view with but I have know idea how to change the properties of sub-level view(child view). (like Image src of the code above.)
Is there anyway to shorten the line or reuse the custom view?
Or.. Is there a easier way to make 72 different app boxes?
You'll want to use a GridView or ListView, and an ArrayAdapter inflated with the above layout. It's rather hard to help you any further until you investigate this route.
GridView Information
ListView Information
Adapter Information
First let me attempt to layout what I am trying to accomplish here.
EditText
EditText SearchButton
ListView (search result. there can be only one, ListView with adapter and height of wrap_content seems to work for this, there is a button to add the result to the ListView below. Once the add button is clicked this ListView collapses, which is exactly what I am after)
TextView (label for objects added)
ListView (list of objects added, again I'm using an adapter for the list row layout)
SaveButton
I was going to paste the code that I have but there is just too much to go through. The issues I am having are with the ListViews. Basically, the ListView that contains the objects added will end up pushing the SaveButton off of the screen. I have tried a ton of solutions laid out on this and many other sites but they just don't seem to work right.
Basically, I want the SaveButton to always be at the bottom and I don't want it to get pushed off the screen when the ListView gets too big. The only solution I have found to "work" was to explicitly set the height of the ListViews. However, this causes problems when going from tablet to phone (Nexus7 & Galaxy S3). I thought that using dip for sizes would prevent this from happening but apparently not.
If anyone has a good strategy for creating this type of layout that would be great. Or even a good resource for learning how to use Android's clunky UI system (it really leaves a bit to be desired).
Edit: here is my attempt at using a RelativeLayout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/main_background"
android:orientation="vertical" >
<EditText
android:id="#+id/plan_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:ems="10"
android:hint="#string/plan_name_hint"
android:textColor="#color/text_color" >
<requestFocus />
</EditText>
<EditText
android:id="#+id/object_search_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/plan_name"
android:ems="10"
android:hint="#string/search_objects_text"
android:textColor="#color/text_color" >
</EditText>
<Button
android:id="#+id/objects_search_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/object_search_text"
android:layout_below="#id/plan_name"
android:layout_alignParentRight="true"
android:background="#drawable/black_button"
android:text="#string/search_objects_button_label" />
<ListView
android:id="#+id/search_result"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/object_search_text"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<TextView
android:id="#+id/objects_list_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/search_result"
android:paddingBottom="8dip"
android:paddingLeft="8dip"
android:text="#string/plan_objects_list_label"
android:textColor="#color/text_color"
android:textSize="22sp"
android:textStyle="bold" />
<ListView
android:id="#+id/plan_objects"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/objects_list_label"
android:background="#color/main_background"
android:textColor="#color/text_color" >
</ListView>
<Button
android:id="#+id/save_plan_button"
style="#style/button_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/black_button"
android:paddingLeft="8dip"
android:text="#string/save_button_label" />
If you think the Android UI system is clunky, you obviously haven't tried to understand it. For most things its extremely well designed.
If you want a certain view (or views) to always be at the bottom, then you want to make your screen a RelativeLayout and put android:layout_alignParentBottom="true" on those element(s). Then add android:layout_above="id" on whatever you want to be above them, where id is the id of the element you want at the bottom.
Make the SaveButton and ListView at the same hierarchy level. e.g if your parent layout is RelativeLayout in your SaveButton add this property android:layout_alignParentBottom="true"
It looks like the only real solution here is to use explicit sizes for the list views and plan accordingly for different screen sizes (i.e. create different layouts for different screens and outlined here.). I was hoping for something a little more generic. Oh well.
I have got an application that is essentially a giant calculator. Within this application it has a total of 75 unique equations and each one has different number of variables and displayed results. I currently have a sliding drawer implemented with the list of the equations of them to choose from and when they click on it, I have a fragment area to put the screen for calculating it. I am currently just implementing a fragment activity for each calculation along with a layout for each one. Does anyone know what best practice is for accomplishing something with this many screens? Do I accomplish them by creating the layout on the fly in the activity? Do I keep it how it is? I am just trying to figure out if the tedious work I am doing with this can be accomplished in an easier manner (I know I have to create the activities to do the work) .
EDIT
The layouts vary in complexity depending on the calcuation. Some of them are to the nth entry from the user and requires a gridview while others will just be simple like example below:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android=blah blah
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:background="DCDCDC"
android:orientation="horizontal" >
<EditText
android:id="#+id/etTempInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_below="#+id/tvTempInputLabel"
android:ems="10"
android:inputType="numberSigned" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/tvTempInputLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/etTempInput"
android:layout_toRightOf="#+id/etTempInput" />
<TextView
android:id="#+id/tvTempResult"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/etTempInput"
android:layout_marginTop="22dp"
android:text="Medium_Text"
android:textAppearance="?androd:attr/textAppearanceMedium" >
</TextView>
<Button
android:id="#+id/btnTempCalc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tvTempResult"
android:text="Calculate" />
</RelativeLayout>
really hard without seeing the layouts, but it sounds as building up the layouts dynamically ( perhaps from building-blocks in xml ) could tidy things up
The answer I came to with this is to just create each page by itself as there is no consistency between the pages. I looked at several options but none of them met my needs. So look out 75 layouts and code files here I come.
Currently am developing an application for receiving messages and displaying them in the order which they came. But now am stuck at how to display these messages according to incoming and outgoing messages. I have a android phone with me.. In that messages are alligned to left and right. I want to display messages just like that..?? I know that using listview i can do that but how...? any advise..??
You can use getItemViewType() and getViewTypeCount() using BaseAdapter and decide to display multiple rows with some logical condition. On the basis of View Type returned you can decide which view to display in List at which position. This blog has a complete explanation how ListView works using different views too.
Try using relative layout and
Consider two textViews in a layout and use them to inflate it to the list.
For these two textViews consider using
android:layout_alignParentLeft="true"
to one and
android:layout_alignParentRight="true"
to another.
Based on G_S's answer and Android's simple_list_item_1.xml, here is some xml code for that problem:
<?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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight" >
<TextView
android:id="#+id/tv1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="6dip"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/tv2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="6dip"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>