Develop Reference

how to make list views like google io 2014 app in android?

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.

Custom Layout With XML

I've got layout in my app which will contain scrolling banner (it is not finnished yet if you look in my XML), and this banner will be used in other activities. So I want to make it a custom layout so I dont copypaste it X number of times.
here is my XML (well... I am not sure if all is correct so any criticism in this part is appreciated)
<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="match_parent"
android:id="#+id/baseID">
<RelativeLayout
android:layout_centerInParent="true"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:id="#+id/id1"
android:background="#ff00ff">
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"/>
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_alignTop="#id/id1"
android:layout_alignBottom="#id/id1"
android:id="#+id/id2"
android:background="#08000000"
android:orientation="horizontal">
<Button
android:id="#+id/button1"
android:layout_width="20dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:onClick="onClick"
android:text="1" />
<TextView
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="to jest moj tekst"
android:layout_weight="16"/>
<Button
android:id="#+id/button2"
android:layout_width="20dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:onClick="onClick"
android:text="1" />
</LinearLayout>
</RelativeLayout>
For now this layout contains only banner, but there will be more stuff.
THe question is: How do I put it to an external class ?
I know that I have to make a new class which extends RelativeLayout(int this case). But what then ? How do I set layout to this class ?
Also I've made some research but I didnt find any simple and accurate tutorial for this. If you know any - please post it.

You could use <include> like:
<include layout="#layout/menu" />
You could even rewrite attributes of the root tag of the included xml layout, like in
<include android:id="#+id/my_menu" layout="#layout/menu" />
See the Developers Blog for a more detailed explanation at
http://android-developers.blogspot.com.es/2009/02/android-layout-tricks-2-reusing-layouts.html

you'll have to work with Fragment:
http://developer.android.com/reference/android/app/Fragment.html
Fragments enable developers to split VIEW/Controller into differents classes.
So, you will add to your xml will differents fragments and each fragment are in charge of his owns components (textview, button...).

Android View background layout problem

I am trying to use a empty View to indicate the color for each item in a ListView.
The idea is that the rowColor View is just a 3dp wide line that should automatically size to the height of secondLine and thirdLine (note that all of the content is set in code including the background color of rowColor and that firstLine and thirdLine are often set to GONE).
It shows up perfectly in Eclipse's Graphical Layout but the rowColor does not show up at all on my phone (running 2.3.3) and all the views are stacked. Any idea how to fix it?
The following code for the list_row was adopted from here. I've provided all the code that I would think works based on that layout, but not even close. Does that layout still work?
list_row.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:singleLine="true"
android:text="First Line" />
<View
android:id="#+id/rowColor"
android:background="#FF0000"
android:layout_width="3dp"
android:layout_height="fill_parent"
android:layout_below="#id/firstLine"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/thirdLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:singleLine="true"
android:text="Third Line" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/rowColor"
android:layout_alignParentRight="true"
android:layout_below="#id/firstLine"
android:layout_above="#id/thirdLine"
android:layout_alignWithParentIfMissing="true"
android:gravity="center_vertical"
android:singleLine="true"
android:text="Second Line" />
</RelativeLayout>
main.xml:
<?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">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
ListViewTest.java Activity here: http://pastie.org/2035822
Thanks.

I tested your layout in several emulators (from 2.1 to 2.3.3) and it works fine, with or without setting the first TextView visibility to View.GONE.
It must be either a problem in your code elsewhere or a glitch of your specific device.
As a workaround, you can use:
android:layout_height="0dp"
for your rowColor View. Since you are already defining the position of the top and bottom limits with android:layout_below="#id/firstLine" and android:layout_alignParentBottom="true", the actual value of layout_height is irrelevant.

I ran into this recently, and I found that a View with no content apart from a background color will not appear in a RelativeLayout.
If you can, try converting your layout to a LinearLayout. This seems to work for me.

How can I achieve this layout?

I am trying to achieve this in an android app layout.
So far I have managed to get the buttons the way I wish, but I am having trouble working out how I am going to implement the divider and the layout on the right side of it.
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<!-- this is main activity's layout. a main menu of sorts. -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:background="#drawable/background">
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:id="#+id/layout_maintest2_relativelayoutleft">
<Button android:text="#string/string_main_NewCalculation" android:drawableLeft="#drawable/calculator5" android:onClick="onClickButton_NewCalculation" android:id="#+id/button_main_NewCalculation" android:layout_width="300px" android:layout_height="90px" android:drawablePadding="0px"></Button>
<Button android:text="#string/string_main_Help" android:drawableLeft="#drawable/question" android:onClick="onClickButton_Help" android:id="#+id/button_main_Help" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation"></Button>
<Button android:text="#string/string_main_Share" android:drawableLeft="#drawable/share" android:onClick="onClickButton_Share" android:id="#+id/button_main_Share" android:layout_width="150px" android:layout_height="90px" android:drawablePadding="0px" android:layout_below="#id/button_main_NewCalculation" android:layout_toRightOf="#id/button_main_Help"></Button>
</RelativeLayout>
<RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/layout_maintest2_relativelayoutright" android:layout_toRightOf="#id/layout_maintest2_relativelayoutleft" android:layout_alignTop="#id/layout_maintest2_relativelayoutleft">
<TextView android:layout_width="wrap_content" android:textSize="24px" android:textStyle="bold" android:layout_height="match_parent" android:id="#+id/textView_calculator_CalculatorTitle" android:text="#string/string_calculator_CalculatorTitle"></TextView>
</RelativeLayout>
</LinearLayout>

Its hard to tell from the image you uploaded but are you trying to keep the two relative layouts side by side?
You can try to position the layouts by declaring them to be drawn to one side of the parent or the other. I cant remember off the top of my head at the moment and I know thats a crappy answer but I think the answer is somewhere in here
http://developer.android.com/guide/topics/ui/layout-objects.html
Take a look at the android:layout_alignParentRight="true" declaration.
Im pretty sure I used something similar to position multiple views and buttons in the same parent before. Try it out and when I get back to my work computer on monday Ill look through my projects and see which one I know works the best.

Help Arranging TextView objects on screen in Android

I'm using textview objects to hold labels such as Score, Level etc on my game screen but they don't seem to be displayed where I want them to be. I understand about view hierarchies (parents, children) and am using the gravity tags in the XML layout file but it doesnt seem to have any effect.
Could someone just quickly provide a guide to positioning a textview object on the screen, and also linking it in the code so that its contents can be programmatically controlled (I believe this would by done via =(TextView) findViewById(r.id.resourcename))?
Many thanks
XML:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.gesture.GestureOverlayView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gestures"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gestureStrokeWidth="2.0"
android:gestureStrokeType="multiple"
android:eventsInterceptionEnabled="true">
<com.darius.android.distractions.DistractionsView
android:id="#+id/distractions_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/text"
android:text="Hello"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#88ffffff"
android:textSize="24sp"/>
<TextView
android:id="#+id/textLevel"
android:text="#string/level_count"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="bottom"
android:textColor="#EB0000"
android:textSize="10sp"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/concentration_bar"
android:textColor = "#EB0000"
android:textSize="10sp"
android:id="#+id/conbartext"
android:visibility="visible"
></TextView>
</RelativeLayout>
</android.gesture.GestureOverlayView>
</FrameLayout>

These are some really helpful tutorials on getting started with android layout and widgets: http://developer.android.com/resources/tutorials/views/index.html
Documentation and a guide on the layout itself is here:
http://developer.android.com/guide/topics/ui/declaring-layout.html

Common Layout Objects is a good guide to the basics of layouts. The gravity tag only has meaning in certain layout types.
Another useful tool is the Heirarchy Viewer, found in the tools folder of your Android installation. This allows you to visualize the View heirarchy of your running activity.
If you post your layout XML, and a mockup of what you are trying to accomplish, we might be able to help you accomplish it.