Develop Reference

Put a textview over Imageview in LinearLayout

I have stuck in some xml code and i hope you can help me out.
So here is what I need/what I have done by now.
I have 3 images of 650px width and I need them one below another while keeping aspect ratio.
I did that with the following code and it looks as it should. No problem here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ll"
android:orientation="vertical"
android:background="#3afa3f"
android:weightSum="3">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_frankopan"
android:background="#drawable/frankopan2_vintage_sundown600" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/krk_turizam"
android:background="#drawable/krk_turizam_vintage"/>
The problem is. I need to put three textviews in a left bottom corner of each image. Imagine it like image menu with text description on each image.
So, I can not use relative or frame layout because images won't play nicely with each other :) There is always a gap between or not aspect ration etc. I need weightsum.
Second, I can't hardcode the text on each image in photoshop because the app will be translated and text needs to change for each language.
I can have different images for each language but I am trying to avoid that.
Ah yea, one more last thing.
I tried to put entire linearlayout in relative layout and put the text between but the text appears beneath the image and I can't bring it upfront.
Any suggestions?
Thanks a lot,
Xsonz

just copy 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">
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 1" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 2" />
</FrameLayout>
<FrameLayout android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|bottom"
android:padding="5dp"
android:text="Text 3" />
</FrameLayout>

Take three FrameLayout inside your LinearLayout and inside FrameLayout keep the ImageView and TextView.
Or Else You can use RelativeLayout and give dependency to Views

You can use frame layout inside linear layout. create imageview inside the linear layout and create textview in another frame layout below it.
<FrameLayout
android:id="#+id/frameLayout_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/krk_history"
android:layout_weight="1"
android:background="#drawable/povjestkrka_vintage_yellow600" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-5dp" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="string" />
</FrameLayout>

Something like this might work for you.
//your layout -> LinearLayout>
....
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/image1"
android:layout_weight="1"
android:background="#drawable/A1" />
<TextView android:id="#+id/textview1"
android:layout_margin="0dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Text"
android:layout_below="#id/image1"
android:layout_alignLeft="#id/image1" />
</RelativeLayout>
// end your LinearLayout
You can play with these parameters using Relative Layout Parameters android.com. The relative layout allows you to control the "relative" positioning between your elements.
You can lay your images out side by side, or in whatever fashion you wish.
Then you can adjust the text dynamically.

layout element control in Android

I want to layout 3 element Button , TextView , Button on the bar like this
[Button1] --- TextView --- [Button2]
2 button are always anchor fixed in left and right screen(padding 4dp) ,and TextView is center (change width depend on screen size),They should be apply for all screen size(not scaled in larger screen). How can I do it??

It would look something like this.-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
</RelativeLayout>
Notice that you still need to set other properties such as texts, ...

You can use LinearLayout with android:weightSum
Try Like this, By using android:weightSum, you can divide how much space for Button and textView.. And it will automatically adjust in all the density devices.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="10" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="LeftButton" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:padding="4dp"
android:layout_weight="4"
android:gravity="center"
android:text="Center TextView text" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="4dp"
android:layout_weight="3"
android:text="Right Button" />
</LinearLayout>

android:weightSum work fine for me, I resolved all my troubles :)

How to optimise this layout XML file to match my idea?

I've created this fragment named searchfragment. Below there is the layout XML file of the searchfragment. Unfortunatelly the design isn't that smooth as I want it to be.
Here's what I wanted it to look like:
First row: Welcoming text (that works)
Second row: Search input field (that works, too)
Thirt row (and here it gets complicated): There should be a text named "Search for" and then a Spinner with the item you can search for (e.g. name, year, price). Then there's the Search button. Next thing is that you can sort the output. Therefore there's a text with "Sort for", a Spinner with the critirion and a Sort button. Best case the search section should be align to the left and the sort for to the right, but still centered.
Forth row: Output field.
Now as the elements are all present on my device, they are not in the graphical layout of Eclipse. I've tried for hours now to get it working but it's kind of hard if you're not sseing your objects.
Long text - short task: Please help me optimise my design.
searchfragment.xml:
<?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:layout_gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:text="#string/welcome" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/edit_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:hint="#string/edit_message" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="136dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
</LinearLayout>
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/showResults"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium" />
</ScrollView>
</LinearLayout>
I've added a photo of the current design. The space with the red frame around it is the third "row" and should be changed. The second spinner is (I don't know why) much too wide. It should be that wide as the first one. Then all the elements should be about the same heigth and the elements should be centered.

You're on the right track with your layout, but the reason your second Spinner is taking up so much room is that you've set it's layout_weight to 1, and as it's the only one with a layout_weight, it's taking up the rest of the space that's free.
If you want the items to take up a relative amount of space on the screen, then you could stick with using layout_weight and give all of your items that property.
For example, just for your third row you would get rid of the LinearLayout around your Spinner, change some of the layout_width properties and give all of your items a layout_weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:layout_marginTop="8dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/search_for" />
<Spinner
android:id="#+id/criterion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:entries="#array/searcharray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sendMessage"
android:text="#string/button_send" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/sort_for"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/sort"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:entries="#array/sortarray"
android:prompt="#string/prompt" />
<Button
android:id="#+id/sort_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/android"
android:onClick="sortAgain"
android:text="#string/button_send" />
</LinearLayout>
This is going to give all of your items an equal weighting, so the TextViews will be the same size as the Spinners which will be the same size as the Buttons. Play around with the layout_weight attribute to make them more relative, for example if you want the Buttons to be twice the size as the Spinners, set their layout_weight to 2.

Simple Layout Issue - Aligning menu button to far right, center

Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen

There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>

how to separate textviews in android?

It is a simple question but I don't know how to do it because I'm new in android.
I have two TextViews in a relative layout and when the first TextView getting bigger it writes on the other TextView which I want to avoid it. How can I do it ?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="first"
android:gravity="left"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="second"
android:layout_alignParentRight="true"/>
</RelativeLayout>
but when the text = firstfirstfirst.... it overrides the second textview.

You need to give you TextViews ids. Since you're using a RelativeLayout you can use layout_toLeftOf and layout_toRightOf, but you only need to use one of them.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_toLeftOf="#+id/textView2"
android:gravity="left"
android:text="firstfirstfirstfirstfirstfirsitseirodsifjdsoijfoisddsefdfadafdafad" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentRight="true"
android:text="second" />

give some advice:
first you can set the left textview's max width using android:maxWidth="" to control the left size, but if the size bigger than the size the text will become like this:text...
or you need make the left and right area cleanly, for example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2" >
<TextView
android:id="#+id/left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:text="firstdasssssssssssssssssssssssssssssssssssssssssssssssssssssssss" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:gravity="left"
android:text="secondsdasdasdarerewrwcxcadasdasdsadsdasdasdadadsd" />
it make the left and right half area, also you can change the android:weightSum size.