Develop Reference

How to dynamically set button in a tabular form

I am making the layout for my activity and got puzzelled , I am thinking about making the flexible layout in which my views get width and height according to screen. Please read the case below
What I want:
This is the trickiest and hardest part for me.
I need to put the 37 buttons on the screen , such that the each row
gets the 3 button and then shift to new row. nevertheless the last row get the single button or two buttons. Well in the case of 3
button in each row yields only single button in last row but that's
okay
Each button in each row should have different id , having different
picture on background and opening different activity with different
intent extras.
Buttons in row must have same sizes so that it should look good.
So these three points are giving me tough time. Also the 2nd point in these point is much much more important.
Please tell me How Can I achieve this I have read about grid layout , Grid view , list view , table layout and also I have used them many time. but I do not know how to use them for this specific purpose.
Note: The buttons in the row should get the same width and height according to screen and the layout should get fit on all devices so we should avoid hard coded values.

Simply use grid view. Set Max column to 3 and
Use a custom adapter extending Base adapter to set backgrounds and return different ids on item click listener.
Set layout param for inflated item view dynamically using screen size.

I think you should see these links , link 1 and link2. The gridview is best option is for you as these layouts adjust the size and you can easily Handle them in their adapter.

Use a Linear layout instead..with Nested concept.that is like
<LinearLayout>
<LinearLayout>
.
.
And So on..
.
.
.
</LinearLayout>
</LinearLayout>
For example
----Outer (Horizontal) layout-----
| |
| ---Inner (Vertical) layout- |
| | [Textview] | |
| | [Button] | |
| | [Button] | |
| | [Button] | |
| --------------------------- |
----------------------------------
Also try the example below
<LinearLayout android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="One,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="One,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="One,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Two,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Two,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Two,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Three,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Three,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Three,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView android:text="Four,One"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Two"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1" />
<TextView android:text="Four,Three"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
<TextView android:text="Four,Four"
android:layout_height="wrap_content"
android:layout_width="wrap_content" />
</LinearLayout>
</LinearLayout>
Output
Reference Links:
Nested Linear Layout,
Nested Example
Update 1
As you said, 37 buttons have to implement on the application with different id,intent extras etc.it is simple job i think. set each buttons with different id and write a onClickListener for the buttons.Use a switch/If case t\o distinguish each buttons.
Example:
public void buttonOnClick(View view)
{
switch(view.getId())
{
case R.id.button1:
// Code for button 1 click
break;
case R.id.button2:
// Code for button 2 click
break;
case R.id.button3:
// Code for button 3 click
break;
}
}
Refer this link for more info:
OnClickevent for buttons
Thanks

How to place a login form in the center of a layout

I'm trying to create the following layout:
|-----------------------------------------------------------|
| |
| |
| |
| |
| L-Email [___________]-R |
| L-Password [___________]-R |
| (Login)-R |
| |
| |
| |
|-----------------------------------------------------------|
So what I'm trying is that I created a linear layout, every e-mail, password and the login line is a linearlayout. But what i want is to place the whole thing into the center (vertically and horizontaly) and align the Email and password labels to the "L-" part of the screen ("L-" is just to indicate that i want to align to there) while i want to align the two text boxes and the login button to the "-R" sign (so I actually don't need the L- and -R signs, these are just indicates the align position here in this mockup)
Here is a more specific mockup:
So i want to align the whole thing to center and align the text labels to the left green line while the others to the right green line.
At this time i prefer to use the Graphical Editor in eclipse but any suggestion is welcome.
I've tried this one so far but have become stuck:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/sahbg"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/EditText01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</LinearLayout>
And it looks like this:

Using your existing code:
Change the height and width of the outer LinearLayout:
android:layout_width="wrap_content"
android:layout_height="wrap_content"
(And you may need to change gravity="center" to layout_gravity="center", honestly I can't remember which is which at this moment.)
Switch the "password" LinearLayout's width to match_parent so both the "username" and "password" rows are the same width.
Remove the LinearLayout that holds the Button, since it is not necessary, and add:
android:layout_gravity="right"
To the Button to shift it over to the right. You can also use this on the EditTexts and give them a specific width to force them to be the same size.

Android: aligning labels in forms

What is the easiest way to create a form layout like (say) this one:
.-----------------------------------------------.
| First Field [ (EditText) ] |
| Some Other field [ (EditText) ] |
| A Third Field [ (EditText) ] |
.-----------------------------------------------.
I'm a little rusty with my Android, and can't figure out how to get it right =(.
Details:
The whole thing is centered in its container.
The labels are horizontally right-aligned among themselves, and vertically center-aligned with their respective input boxes (though I couldn't represent that in the plain-text above)
The input boxes are all the same size.
Bonus points if the EditTexts can shrink or grow up to a maximum width, keeping the layout as above :D so as to handle orientation changes without ugly oversized inputs.

Try this layout,
You should always consider using TableLayout for this kind of design than the RelativeLayout, so you can add any number of rows easily and also dynamically.
<TableLayout
android:id="#+id/mainTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:layout_marginRight="5dip"
android:paddingLeft="3dip"
android:paddingRight="3dip"
android:shrinkColumns="1"
android:stretchColumns="*"
android:visibility="gone" >
<TableRow>
<TextView
style="#style/ds_20_b_darkgray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label1: " >
</TextView>
<EditText
android:id="#+id/editT1"
style="#style/ds_20_b_black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right" >
</EditText>
</TableRow>
<TableRow>
<TextView
style="#style/ds_20_b_darkgray"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Label2: " >
</TextView>
<EditText
android:id="#+id/editT2"
style="#style/ds_20_b_black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right" >
</EditText>
</TableRow>
</TableLayout>
You may need to put the entire table layout inside a linearlayout or a RelativeLayout and make the table layout in the center and adjust the marginsif you wish.
I can modify it if this doesn't satisfy your requirement.

Android layout as button with selectable functionality

I'm trying to create a button-like component, with a left-aligned ImageView and then 2 TextViews to the right of the ImageView, stacked one above the other and formatted differently, like the following example:.
__________________________
| |
| |-----| Bold Main Text |
| |Image| |
| |-----| Small Sub Text |
|__________________________|
I also want the ImageView to change depending on the click state of the outer container, much like a standard button would do with a selectable resource associated with it. So that when I click anywhere in the outer box the image selectable state is changed.
I know I can use a Button, setting the 'drawableLeft' property to create a single line of text associated with an Image as a button, but it seems I can only have a single item of text using this strategy.
Has anyone implemented any UI components like this in the past?
Thanks!

You can add android:duplicateParentState="true" to the ImageView widget. Also you need to make the ImageView's parent clickable and focusable.
The RelativeLayout in the following code will act as a Button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout:height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:duplicateParentState="true"
android:src="#drawable/icon" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_alignTop="#+id/image"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
<TextView
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_below="#+id/text1"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
</RelativeLayout>
</LinearLayout>

3 TextView's with ellipsize="middle"

I want to have a linearlayout with 3 text views.
Text 1: abcdefghijklmn
Text 2: -
Text 3: nmlkjihgfedcba
It should look like:
/-----------------------\
| abc...lmn - nml...cba |
\-----------------------/
when text 1 is shorter, "abc", then it should look like this:
/-----------------------\
| abc - nmlkji...fedcba |
\-----------------------/
I'm not able to get it working. Used weight, but then the "-" stays always in the middle.
Any idea?

This should work. weight is exactly the thing you should NOT use here. Unless I am missing something obvious here!
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="abcdefghijklmn"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:text="-"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="nmlkjihgfedcba"/>
</LinearLayout>