Resize image based on text height - android

I need to display an image and text on a single row. The image should resize based on the text height. I know that it's possible programmatically but is it possible to do this also only in XML ?
<RelativeLayout 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">
<ImageView android:id="#+id/Image" ... />
<TextView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Image"
tools:layout_editor_absoluteX="47dp"
tools:layout_editor_absoluteY="37dp" />
</RelativeLayout>

Just wrap the views inside a parent view that adjust to the textview and make the imageview resize according to the parent.
<RelativeLayout 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">
<!-- LOOK HERE-->
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/Image"
tools:layout_editor_absoluteX="47dp"
tools:layout_editor_absoluteY="37dp" />
<ImageView android:id="#+id/Image"
android:layout_heigth="match_parent"
android:layout_width="wrap_content" />
</LinearLayout>
</RelativeLayout>
I haven't test it, but it should be something really close to this.
EDIT: Using an horizontal LinearLayout should give you a quick view of how is working and the in the linear layout you arrange with the toRightOf, toLeftOf, etc.

Related

Is it possible to make two layouts share one ImageView?

I mean how can i locate a ImageView in two layouts? i have 2 relative layouts one is up, one is down. The up one has a ImageView but i want half of this ImageView located in down layout. How can i do that?
EDIT::
Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_container"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin"
android:background="#d2aff4">
<Space
android:id="#+id/center"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<RelativeLayout
android:id="#+id/bottom"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/center"
android:background="#87c96d" />
<RelativeLayout
android:id="#+id/top"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
In this scenario the "top" layout needs to be created at last to be displayed on top of the rest of the views. If you need it to have a background colour, you need to apply the colour to the main container.
Here is the result:
I agree with #Booger answer's but If your parent layout is RelativeLayout then add this below property in you ImageView.
android:layout_centerInParent="true"
Or you can use below code to create that kind of layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/gray_font">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/colorAccent">
</LinearLayout>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
android:layout_centerInParent="true"/>
</RelativeLayout>
Take a look at this library https://github.com/umano/AndroidSlidingUpPanel
if you want something easy you can put those layouts in to a parent relative layout and then you can add a image view in parent relative layout as last child and position it how you need
I think you should wrap both your RelativeLayout in another Parent layout, and in that layout, you will place your ImageView (which will span both the other layouts.
Something like this pseudo-code:
<LinearLayout>
<RelativeLayout1>
<RelativeLayout2>
<ImageView gravity=center> //Order counts, this needs to be after the RelativeLayouts to show on top of them
</LinearLayout>

In Android, How can i stretch EditText until it meet some view?

I have some problem in my layout width edit-text
here are screenshots which describe my problem
1. normal layout (all views are inside the LinearLayout)
2. I want layout below when user input many text lines inside the Edit Text
3. But When user enter many text lines.. my layout looks like below.
I want the Edit Text should be stretched until only ImageView meets the bottom ViewGroup.
but, more entering text lines, more being increased the height of Edit Text so, i cannot see Image View.
i'd appreciate it if you give me any solution.
LinearLayout handles this sort of layouts great. You can use the attribute android:layout_weight="1" within a LinearLayout to set the priority of the space you want the object to take.
The official documentation describe it best:
developer.android.com
Take RelativeLayout as your parent layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?actionBarSize"
android:orientation="vertical">
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
android:inputType="textMultiLine"
android:scrollbars="vertical"/>
<ImageView
android:id="#+id/imageView1"
android:layout_marginBottom="?actionBarSize"
android:layout_width="match_parent"
android:layout_weight="0.1"
android:layout_height="?actionBarSize" />
</LinearLayout>
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_alignParentBottom="true" />
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottomGroup"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:id="#+id/bottomGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>

android layout image fill width

I need to strech a background image for a layout in my app,
please note, the yellow background in my layout is not streched
how to accomplish this [yellow bar image filling parent]?
also please note that the blue layout is not the whole width of the screen, how to?
code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:id="#+id/myfragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="1"
android:background="#0000FF">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/titlebar" />
</LinearLayout>
<ListView android:id="#id/android:list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:drawSelectorOnTop="false"/>
</LinearLayout>
Thanks a lot!
This is the reason why your linearlayout (blue) is not fitting the whole screenwidth
android:paddingLeft="8dp"
android:paddingRight="8dp"
You need to change this. Put a margin (left and right) for the inner layout instead.
Instead of the image view you could set the background of the 2nd linearlyout directly
android:background="#+id/imageView1"
Incase you want to use the image view instead
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:scaleType="fitXY"
android:src="#drawable/titlebar" />

Android ScrollView and buttons at bottom of the screen

I want to implement this: A ScrollView that contains many elements (ImageViews, TextViews, EditTexts etc) and then after the ScrollView some buttons (which are custom ImageViews) that appear always exactly at the bottom of the screen.
If I use the android:fillViewport="true" attribute, then if the elements of the ScrollView are too big to fit in the screen size the buttons get invisible . If I use the android:Weight=1 attribute then the ScrollView gets only 50% of the Screen when the screen is big and it can fit (I want the buttons to take a small percentage, about 10%). If I set the android:Weight to bigger values then the buttons appear very small.
Please help! Maybe it is something simple that I overlooked but I’ve been banging my head for hours!
Just created and tested it. Looks like you want.
<?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">
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_alignParentBottom="true">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom Button2"/>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/buttons">
<!--Scrollable content here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="test text"
android:textSize="40dp"/>
</LinearLayout>
</ScrollView>
</RelativeLayout>
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
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="Hello World"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hallo Welt"
/>
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go next page"
android:layout_alignParentRight="true" />
</RelativeLayout>
</LinearLayout>
This worked for me. Give the scroll view a weight of 1. Put all the other widgets following the scroll view in a layout. The scroll view will grow enough to not block the rest.
Widgets in scroll view and rest at bottom
scrollview cannot fit the screen because you put it on a linear layout, so linear layout fit in the screen,
just try to make scrollview as root elemen on xml layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!-- Here you can put some XML stuff and BOOM! your screen fit to scrollview -->
</LinearLayout>
</ScrollView>
If you do not want to use RelativeLayout, it is better to use LinearLayout. This method is better in my opinion.
Just set the layout_weight to one

Android: How can you align a button at the bottom and listview above?

I want to have a button at the bottom of the listview.
If I use relativeLayout/FrameLayout, it aligns but listView goes down to very botton.
(Behind the button at the bottom)
FrameLayout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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/listview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</FrameLayout>
</FrameLayout>
RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/btnButton"
android:text="Hello"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
</RelativeLayout>
</RelativeLayout>
Above two codes only work like the first image. What I want is second image.
Can anybody help?
Thank you.
A FrameLayouts purpose is to overlay things on top of each other. This is not what you want.
In your RelativeLayout example you set the ListViews height and width to MATCH_PARENT this is going to make it take up the same amount of space as its parent, and thus take up all of the space on the page (and covers the button).
Try something like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
The layout_weight dictates how the extra space is to be used. The Button does not want to stretch beyond the space it requires, so it has a weight of 0. The ListView wants to take up all of the extra space, so it has a weight of 1.
You could accomplish something similar using a RelativeLayout, but if it is just these two items then I think a LinearLayout is simpler.
<?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"
android:background="#ffffff"
>
<ListView android:id="#+id/ListView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</ListView>
<FrameLayout android:id="#+id/FrameLayout01"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:layout_gravity="center_horizontal">
</Button>
</FrameLayout>
</LinearLayout>
Here is the design you are looking for.
Try it.
I needed two buttons side-by-side at the bottom. I used a horizontal linear layout, but assigning android:layout_height="0dp" and android:layout_weight="0" for the buttons' linear layout didn't work. Assigning android:layout_height="wrap_content" for just the buttons' linear layout did. Here's my working layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/new_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="New" />
<Button
android:id="#+id/suggest_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Suggest" />
</LinearLayout>
</LinearLayout>
RelativeLayout will ignore its children android:layout_width or android:layout_height attributes, if the children have attributes that properly define their left and right or top and bottom values, respectively.
To achieve the result on the right image, showing the list above the button, your layout should look like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/button1"
android:layout_alignParentTop="true"/>
<Button
android:id="#android:id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#android:string/ok"/>
</RelativeLayout>
The key is to define android:layout_alignParentTop (defines top value) and android:layout_above (defines bottom value) in your RecyclerView. This way, RelativeLayout will ignore android:layout_height="match_parent", and the RecyclerView will be placed above the Button.
Also, make sure you look into android:layout_alignWithParentIfMissing, if you have a more complex layout and you still need to define these values.
I am using Xamarin Android, and my requirement is exactly the same as William T. Mallard, above, i.e. a ListView with 2 side-by-side buttons under it.
The solution is this answer didn't work in Xamarin Studio however - when I set the height of the ListView to "0dp", the ListView simply disappeared.
My working Xamarin Android code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/ListView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_above="#+id/ButtonsLinearLayout" />
<LinearLayout
android:id="#id/ButtonsLinearLayout"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I aligned ButtonsLinearLayout to the bottom of the screen, and set the ListView to be above ButtonsLinearLayout.
#jclova one more thing you can do is use layout-below=#+id/listviewid in relative layout
In your relative layout height of listview is match_parent which is fill_parent(for 2.1 and older) so best solution is if you want to use relative layout then first Declare your button then your list view, make list view position as above your button id, If you want button always at bottom then make it alignParentBottom..
Snippet is
<RelativeLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:id="#+id/rl1"><Button
android:layout_width="MATCH_PARENT"
android:layout_height="WRAP_CONTENT"
/><ListView
android:layout_width="MATCH_PARENT"
android:layout_height="0"
android:layout_above="#id/listview"/></RelativeLayout>
This prevents your list view taking whole place and make your button appear..
This will be the best and the most simple solution to the problem. Just add android:layout_above="#id/nameOfId" in the layout that you want to move above with respect to that layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sumeru.commons.activity.CommonDocumentUploadActivity">
<ListView
android:id="#+id/documentList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/verifyOtp" />
<com.sumeru.commons.helper.CustomButton
android:id="#+id/verifyOtp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/otp_verification" />
</RelativeLayout>

Categories

Resources