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
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.
I want to make one application which contains multiple choice question. Each question has three option. I want to show that option with one background image. And also want to change the color of that image randomly for each question. How can i do that?
It is possible to create list view by putting differnt background image for each row?
Result.xml
<LinearLayout
android:id="#+id/linearlayoutans"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp"
android:layout_toLeftOf="#+id/chrono"
android:orientation="horizontal" >
<TextView
android:id="#+id/txt_ans_true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
<TextView
android:id="#+id/txt_ans_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
<TextView
android:id="#+id/txt_ans_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/ic_launcher"
android:gravity="center"
android:textColor="#000000" />
</LinearLayout>
It is possible to create list view by putting differnt background
image for each row?
Yes. Take a look at articles on the internet that back a listview with a custom adapter and a custom view. This is done from the getView() method and there is no shortage of examples / tutorials out there.
I'm creating a list view that I want to scroll smoothly.
I am currently designing the row in my XML file, and am wondering which layout view to choose. I want a row layout similar to this:
Mine will have an ImageView on the left, then two rows of TextView's on top of each other. (The orb on that picture isn't needed)
So what is the most efficient (when it comes to drawing) layout to use? Options I'm considering are TableLayout, RelativeLayout and LinearLayout (horizontal).
Extra info:
My list adapter is already very efficient and uses the viewholder pattern as well as pre-computation of TextView textand other optimisations to get maximum efficiency there. This question was specifically about the layout of the list row, though your help is appreciated!
I suggest you to use a RelativeLayout so you can choose where to place every single component. Basically, on the left side the imageview, then 2 textview one above the other. Optionally, the image on the right side.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100dip"
android:padding="3dip" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/icon" />
<TextView
android:id="#+id/first_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/image"
android:layout_toRightOf="#+id/image"
android:textSize="30dp"
android:textColor="#ffffff"
android:text="Medium Text" />
<TextView
android:id="#+id/second_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/first_txt"
android:layout_below="#+id/first_txt"
android:textSize="20dp"
android:textColor="#0481ab"
android:text="Small Text"/>
<ImageView
android:id="#+id/right_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/icon" />
</RelativeLayout>
You can try to:
Use a Spannable for showing all text as markup in one TextView.
The image(?) on right can be set as a right CompoundDrawable for the above TextView.
Set android:drawingCacheQuality="low" if you don't have fancy gradients in background.
Don't do something heavy in Adapter's getView(), if you did Override it.
I am trying a task that should probably be simple..I want one button at the bottom across the bottom of the screen (floating preferably), while I have a scrollable list above that (I was able to do this in a tutorial with a simple listview and buitton).But, my list is a LinearLayout that I fill with a SimpleCursorAdapter and a viewBinder. Since I am using this LinearLayout I keep getting One button per line item, instead of one at the bottom of the screen. I have tried wrapping it with a table layout, relative layout, using two LinearLayouts, etc. Every time I get one button per line. Is this because of the way I am getting the data with a cursor adapter and filling it into the listview? Do I need to use a "merge" in my xml file? Is there a way to make two xml files and then call them both? Do I need to switch to a ListView or another way of displaying the data? This is my first app that I am trying start to finish on my own, so some of this stuff trips me up. I will include my code for the LinearLayout, please note that this is just the list without my extra button added (i deleted all my failed attempts). So I would be looking to modify the code below to contain one button that floats at the bottom of the screen all the time.
<LinearLayout android:id="#+id/LinearLayout01"
android:layout_width="290dp"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:hapticFeedbackEnabled="true">
<Button
android:id="#+id/BtnToClick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClickHandler"
android:drawableLeft="#+drawable/android_button"
android:gravity="left|center_vertical"
android:background="#android:color/transparent"
android:hapticFeedbackEnabled="true"
android:layout_weight=".1">
</Button>
<TextView android:text=""
android:id="#+id/tvViewRow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
</TextView>
<TextView android:text="#+id/text11"
android:id="#+id/text11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone">
</TextView>
<TextView
android:id="#+id/text5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="left|center_vertical"
android:layout_weight=".20"/>
<TextView
android:id="#+id/text9"
android:layout_column="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="center|center_vertical"
android:layout_weight=".1"/>
<TextView
android:id="#+id/text10"
android:layout_column="6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:gravity="left|center_vertical"
android:layout_weight=".15"/>
<TextView
android:id="#+id/text12"
android:layout_column="8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:padding="3dip"
android:gravity="left|center_vertical" />
<Button
android:id="#+id/BtnToClick2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="myClickHandler3"
android:gravity="center|center_vertical"
android:background="#+drawable/coup0a"
android:hapticFeedbackEnabled="true"
>
</Button>
Thanks in advance!
-Joe
You need to add the button as a footer or a header according to your needs. You can try this code .The R.layout.header and footer are separate xml layout files which you would have to define.
View header = inflater.inflate(R.layout.header,null);
View footer = inflater.inflate(R.layout.footer,null);
addHeaderView(header);
addFooterView(footer);
You should absolutely use a listview for this job. Listviews are highly optimized for displaying many entries. Just let your activity extend from a ListActivity and create a layout xml file with a listview widget that has the id "#android:id/list" and the listview activity will hook onto that list automatically. You are free to place other widgets in the layout aswell. Here is an example layout:
<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="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<Button
android:id="#+id/chooseOther"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/add_fav"/>
</LinearLayout>
It has a list with a button sitting on the bottom of the screen at all times, even if you have a long list of items.
The app I am working on consists of one large custom view that fills the screen. I placed one button in the center of each side of the custom view that can be used to move the drawn object in that direction. Think of the custom view as a "viewfinder" of a camera and I would like the user to be able to pan the viewfinder with buttons on all four sides.
The buttons work perfectly, but when one is pressed, the custom view underneath undergoes lots of redrawing (4 redraws instead of 1) and the UI lags quite a bit.
Is there some way to stop the custom view from redrawing because of a button's animation?
Forgive me if I am missing something obvious.
Thanks in advance for any help... Android rocks!!!
XML Layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<com.app.CustomView
android:id="#+id/CustomView" android:layout_above="#+id/menuButton" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
<Button android:layout_height="wrap_content" android:layout_below="#+id/CustomView" android:layout_width="wrap_content" android:layout_alignRight="#+id/CustomView" android:id="#+id/toolsButton" android:text="Tools" android:textSize="24sp"></Button>
<Button android:layout_height="wrap_content" android:id="#+id/outButton" android:text="-" android:textSize="30sp" android:layout_toLeftOf="#+id/inButton" android:layout_alignTop="#+id/inButton" android:layout_width="40sp"></Button>
<Button android:layout_height="wrap_content" android:layout_alignRight="#+id/CustomView" android:layout_alignBottom="#+id/CustomView" android:text="+" android:textSize="30sp" android:id="#+id/inButton" android:layout_width="wrap_content"></Button>
<Button android:layout_alignTop="#+id/CustomView" android:layout_centerHorizontal="true" android:layout_height="40sp" android:layout_width="60sp" android:text="^" android:id="#+id/upButton"></Button>
<Button android:layout_alignBottom="#+id/CustomView" android:layout_centerHorizontal="true" android:text="v" android:layout_height="40sp" android:layout_width="60sp" android:id="#+id/downButton"></Button>
<Button android:layout_alignRight="#+id/CustomView" android:text=">" android:id="#+id/rightButton" android:layout_height="60sp" android:layout_width="40sp" android:layout_centerVertical="true"></Button>
<Button android:id="#+id/leftButton" android:text="<" android:layout_height="60sp" android:layout_width="40sp" android:layout_centerVertical="true"></Button>
<Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_alignLeft="#+id/CustomView" android:id="#+id/menuButton" android:textSize="24sp" android:text="Functions" android:layout_alignParentBottom="true"></Button>
</RelativeLayout>
Why are the buttons part of the custom view? Why not make them part of your activities layout, so that the layout consists of all the buttons and your custom view?
This may not completely solve your problem, since you may need to further optimize/rethink how your custom view is implemented if invoking its onDraw method blocks the UI thread.
I found that I was actually making my calculations too accurate and was working my poor Droid too hard. Everything draws smoothly now.