I have a TextView and a square ImageView that I would like to show in a horizontal linear layout. Each should take half of the parent view's width and the height should fit the content (i.e. the image). The text should be centered vertically.
Additional constraint is that the image should not grow beyond a given maxWidth (= maxHeight), and excess width should be made available to the TextView. Obviously, this conflicts with the 50/50 rule above. Is there a way to prioritize the constraints, i.e. allow the image to take half of the space unless it exceeds a given size?
These are layouts I tried:
The first one nicely stretches the left side to the available space. But the image takes more than half of the width as its layout_weight is not specified (as in image below).
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text."/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
When I add layout_weight to the ImageView it always takes half of the width and ignore the maxWidth (see image below).
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
Enclosing the ImageView in another LinearLayout enables the maxWidth again, but the enclosing LinearLayout still takes half of the available space (see image below).
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:adjustViewBounds="true"
android:src="#drawable/image" />
</LinearLayout>
Another option I have found for similar scenarios is to use a RelativeLayout with an invisible view as a center divider, but that locks the division to 50/50 (or wherever the divider is placed).
Okay, gonna go on ahead and post the xml I created, it's pretty much simple, it does most of your conditions.. One thing I'm having trouble with is the part where each view takes half of the parent view's width. Hope this still helps you in some way.
sample_layout.xml
<?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:layout_margin="2dp"
android:background="#android:color/darker_gray">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/img_sample"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="2dp"
android:layout_toLeftOf="#id/img_sample"
android:background="#color/colorPrimary"
android:gravity="center_vertical"
android:text="Some text." />
<ImageView
android:id="#id/img_sample"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginLeft="2dp"
android:adjustViewBounds="true"
android:maxWidth="200dp"
android:src="#drawable/sample_img" />
</RelativeLayout>
Here is a sample screenshot:
If ever you figure out how to the the half of each thing, kindly comment it here, It'd be nice to know about it for possible future use. :)
PS: Have you considered doing the half of each thing programatically? Like checking the LayoutParams then dynamically setting weightSum and the layout_weights.
Sample Image retrieved from this link
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#color/blue"
android:src="#drawable/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_margin="5dp"
android:layout_toStartOf="#id/imageView"
android:background="#color/colorPrimary"
android:padding="10dp"
android:text="Some text. " />
</RelativeLayout>
It won't be a perfect solution in term of performance. But you can achieve it by playing with FrameLayout and ImageView.
Here is the output:
Layout.xml:
<?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:background="#color/textGray"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/skyBlue">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/white">
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="200dp"
android:src="#drawable/ic_settings"
android:visibility="invisible" />
<TextView
android:id="#+id/TextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:text="!" />
</FrameLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:maxWidth="200dp"
android:src="#drawable/ic_settings" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
In order to achieve desire behaviour, You would have to set same images to both imagesviews in this layout. one of them is invisble, It is just helping to make parent with same width and heights which would lead us to create TextView with same dimensions.
Note: If you want to change textView alignment, you can do it with layout_gravity or gravity.
Related
I want to create a layout in Android that looks like this:
This is what i want the result to look like
So far, my code looks something like this:
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="13dp"
android:text="TextView"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="216dp"
android:layout_height="217dp"
android:layout_below="#+id/textView"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background" />
</RelativeLayout>
if someone could help me with this it would be much appreciated
I suggest in this case using LinearLayout cause the layout is very simple.
Try it. Here the width of the images is halved exactly with the attribute android:layout_weight="1" in the ImageView1 and ImageView2 android:layout_weight="1", result weight is 2 (set in LinearLayout android:weightSum="2", try change it and you will see how it works).
Also, in more complex layouts, I suggest using ConstraintLayout instead RelativeLayout.
Good luck!
<?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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="13dp"
android:paddingHorizontal="20dp"
android:paddingTop="20dp"
android:paddingBottom="40dp"
android:text="TextView"
android:textColor="#android:color/white"
android:layout_gravity="center_horizontal"
android:textSize="24sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="1"
android:layout_marginRight="5dp"
android:background="#drawable/ic_launcher_background"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:layout_marginleft="5dp"
android:layout_centerHorizontal="true"
android:background="#drawable/ic_launcher_background"/>
</LinearLayout>
</LinearLayout>
Use Constraint layout, you won't have to nest layouts. Just define the start, end, top, and bottom constraints of each view and then you have the layout you want. For example the two image views should have their top constrained to the bottom of the TextView, then the start of the left ImageView should be constrained to the start of parent container while the end of the right ImageView should be constrained to the end of the parent container. then constrain them against each other. i.e start of right ImageView against end of left ImageView and vice versa.
I am trying to code one of my first android apps. I am trying to position a text below an image, but the image takes up most of the screen and one of the textviews which are supposed to be below it are not displayed. I am using a RelativeLayout.
Here is my code snippet.
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/i1"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>
I have also tried changing the scale type of the imageview, but it doesn't work. Only when I explicitly specify the width and height parameters of the image, the text is visible below the image.
What changes can I make in this code to get the desired output ?
If you add a rough diagram of what you want to achieve your question can be answered better. From my understanding, and by looking at your code it seems you are trying to add 2 TextView's at the top and bottom (one each) and then an ImageViewsandwiched in between.
First, add the 2 TextView's. Set the one as android:layout_alignParentTop = true and android:layout_alignParentBottom = true. Then add the ImageView. In the ImageView, you can set android:layout_height = "wrap_content" and then android:layout_below=<id of the top text view> as well as android:layout_above = <id of the bottom text view>.
So something like this:
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>`
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/i1"
android:layout_above="#id/t2"
/>
</RelativeLayout>
If you're using wrap_content for your ImageView's height and if your ImageView's actual image is large enough then it will surely take up entire space.
In that case, you'll have to explicitly mention exact height of the View, so that text below is show up.
What you want to do to fix this situation is to change actual height of the image itself. If you do that, image will fit itself entirely but takes less height and then text should show up.
So you have two options,
1) Either fix your image height in your layout, OR
2) Fix actual image height so that it's more appropriate in your usecase
I hope this answers your question.
You need to assign a size for ImageView based on screen size
Use PercentRelativeLayout
My compileSdkVersion is 24 so I use compile 'com.android.support:percent:24.0.0' inside my app:gradle dependencies
example :
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_width="match_parent"
app:layout_heightPercent="50%" <---------- here its taking 50% of screen height
android:src="#drawable/myImageName"
/>
<TextView
android:id="#+id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/img"
android:textSize="24sp"
android:text="Description"/>
</android.support.percent.PercentRelativeLayout>
If you use LinearLayout go for layout_weight attribute
make t2 alignParentBottom true
and
let img view layout_above t2
<RelativeLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">
<TextView
android:id="#+id/t1"
android:layout_width="wrap_content"
android:text="My App"
android:layout_centerHorizontal="true"
android:textSize="30sp"
android:layout_alignParentTop="true"
android:layout_height="wrap_content" />
<ImageView
android:scaleType="centerCrop"
android:id="#+id/img"
android:layout_below="#id/t1"
android:layout_above="#+id/t2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/i1"
/>
<TextView
android:id="#id/t2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:textSize="24sp"
android:text="Description"/>
</RelativeLayout>
So I have a image view and below a relative layout. The desired is to always have the users see the text views and buttons in the nested layout. And the image is a top image ( not a full screen background) but some how there is a small gap and the background of the image is bleed past the image view. I have tried different Image scale types and different layouts completely(frame, all linear,etc..)
http://imgur.com/a/n4aIq
and some code
https://gist.github.com/whatkai/92f66d2322957d86dd3fe28a9a5d03c0
FYI layout-weights left gaps too.
There is too many ways to do it.
Try this solution using LinearLayout (orientation: vertical):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/REFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#color/accidentAssistanceColor">
<ImageView
android:id="#+id/SettingsImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:scaleType="fitXY"
android:src="#drawable/ers"
android:layout_weight="1"/>
<LinearLayout
android:background="#color/appStartERSBackground"
android:layout_centerHorizontal="true"
android:id="#+id/onView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/SettingsImage"
android:gravity="bottom|clip_vertical|center"
android:orientation="vertical">
<Button
android:gravity="bottom|end"
android:layout_centerHorizontal="true"
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#android:color/transparent"
android:text="Not Now"
android:textColor="#color/white"/>
<Button
android:id="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/button"
android:text="approve"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/button2"
android:layout_gravity="center"
android:text="BLdfdsAH"
android:textColor="#color/white"/>
<TextView
android:gravity="center_horizontal|center_vertical"
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="BLAH"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
And to answer you about how to scall your image i used android:scaleType fitXY to respect to ratio aspet.
If you desire to understand how every scallType works, see the following link:
https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide
set view tag between your image and layout.
like this.
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000000" />
I am trying to create a layout as per this picture (paint'ed).
Layout Design
Target level is API 17. This has to be created programmatically, not using XML. This has to be a responsive design.
I extensively researched and attempted other partially similar situations on stackoverflow, using GridLayout, TableLayout, GridView, various layout parameters, gravity, weight, view nesting and so on. However,
(a) I can't get the text buttons width to fill the available width real estate as per device screen size and orientation. Buttons with shorter texts are coming with shorter width.
(b) The plus, minus and number buttons are of fixed height and width irrespective of screen sizes and orientation. But they are not aligning with the text button in the left on the same row. only the bottom few pixels are visible.
I would appreciate any code snippet that can achieve the above layout. Thanks a million.
UPDATE:
Following inputs from #tiny-sunlight, I did this. Next I will recreate this programmatically.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layoutTable"
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/layoutRow"
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginEnd="10dp"
android:layout_weight="17"
android:text="This is my button"
android:textSize="15sp"
android:textAllCaps="false"
android:gravity="start"
android:layout_width="0dp"
android:layout_height="40dp" />
<Button
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:text="-"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginEnd="5dp"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="0"
android:textSize="15sp"
android:gravity="center"
android:layout_width="40dp"
android:layout_height="40dp" />
<Button
android:layout_weight="1"
android:text="+"
android:textSize="15sp"
android:textStyle="bold"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
Try to build layout below programmatically.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:padding="5dp"
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:padding="5dp"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_marginRight="10dp"
android:layout_weight="1"
android:text="1111"
android:layout_width="0dp"
android:layout_height="40dp" />
<ImageView
android:layout_marginRight="5dp"
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:layout_marginRight="5dp"
android:background="#44bb11"
android:layout_marginTop="0dp"
android:paddingTop="10dp"
android:text="11"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="#mipmap/ic_launcher"
android:layout_width="40dp"
android:layout_height="40dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You can use a recycler view, which will provide you scrolling option plus bind views on the fly for you.
So load a linear layout (orientation horizonal) into the recycler view. now for the layout, it then becomes easier. You need a textview, button,textview,button.
For each of these textview and buttons, set widht = 0dp and weight as 7,1,1,1 respectively i.e. your leftmost textview occupy 70% of width whereas all other occupy 10%. Obviously you can change these weights as per your requirements. Thats it for the layout.
Now just fill your data using the adapter.
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.