Develop Reference

Resize image based on text height

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.

Android layout place a layout in the middle of another two layouts

Hello I have to create the UI like bellow,(picture attached) using regular Android layouts. I got header, footer and middle areas along with a image view.
According to the picture : Area A and Area C is similar height (20% of screen) and image view should be placed always in the middle of Area B and Area C.
My current xml code is like this
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="150dp"
android:orientation="vertical"
android:background="#color/grayContact"
android:layout_below="#+id/show_contact_headerArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_above="#+id/show_contact_bottomArea">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="120dp"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"></LinearLayout>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#drawable/common_google_signin_btn_icon_dark_focused"
android:id="#+id/imageView2"
android:layout_marginBottom="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
I gave
marginBottom="40dp"
for image view to push it upwards, which is not a good practice. what is the best way to place the image view in the center of Area B's and Area C's border.
Also currently I gave
android:layout_height="120dp"
for Area A & Area B's height but ideally both should be 20%(each) of the screen, how to achieve that also?

You can give weights 20 % to each A and C. This way they will occupy 20% of top and bottom respectively. Assign rest 60% of height to B.
For imageView, you can place entire layout in Coordinate layout and assign anchor to footer.
Her is code snippet
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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">
<LinearLayout 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"
android:orientation="vertical"
android:weightSum="10">
<LinearLayout
android:id="#+id/show_contact_bottomArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_weight="2"
android:background="#color/primary_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_middleArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="#+id/show_contact_bottomArea"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/show_contact_headerArea"
android:layout_weight="6"
android:background="#color/holo_blue_light"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:id="#+id/show_contact_headerArea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="2"
android:background="#color/primary"
android:orientation="vertical"></LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/imageView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp"
app:layout_anchor="#+id/show_contact_headerArea"
app:layout_anchorGravity="center_horizontal|top"
app:srcCompat="#drawable/header_record" />
</android.support.design.widget.CoordinatorLayout>
Result :- I have colored different section with different color code.

use weight for giving exact portion of Area and Frame Layout
for eg:
weight sum =4 have to give in parent Linear layout
Area A give 1
Area b give 2
Area c give 1
After Area B add image View with top -(height you want to appear in B's portion)

How can I align my backgroundimage?

I want to align my background image which I declare in the activity_main.xml:
android:background="#drawable/spieler_blau"
The problem is that the whole screen is filled with this picture and I want to have a small white space on the left side of the screen. Like that:
Any solution? Thanks in advance.

You can use android:layout_marginLeft="20dp". You can set margin as per requirement.
Or you can also create one blank View and one ImageView in xml and give it weight.
Example:
1)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/expandable"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
android:orientation="horizontal" >
<View android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#drawable/ic_launcher" />
OR 2)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/expandable"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#000000"
android:orientation="horizontal" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="20dp"
android:background="#drawable/ic_launcher" />
</LinearLayout>

IF you need space to remain in left side,
There possible ways can be,
Set Imageview SRC, not the background , and give padding at left side
Create your background drawable with transparent space on left side
Or you create a custom view

You can do this by adding padding to the left of the image layout with the android:paddingLeft attribute:
<ImageView android:background="#drawable/spieler_blau"
android:paddingLeft="10dp"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

Android - Layout not in uniform

I have a horizontal list of images in my android application. But the problem is some of the images seems to not follow the layout I've defined in my xml. Like this:
my layouts look like this:
mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_shop_list"
android:orientation="horizontal">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/shop_hlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollX="1dp"
android:scrollY="1dp"
android:overScrollMode="always" >
</com.devsmart.android.ui.HorizontalListView>
</LinearLayout>
then my listlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:translationY="200dp" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<ImageView
android:id="#+id/img"
android:clickable="true"
android:adjustViewBounds="true"
android:layout_width="360dp"
android:layout_height="360dp" />
<ProgressBar
android:id="#+id/img_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:translationY="150dp"
android:translationX="140dp" />
</FrameLayout>
<TextView
android:id="#+id/labelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#dc6800"
android:textSize="16sp"
android:textStyle="bold" />
<!-- Description label -->
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#acacac"
android:paddingBottom="2dip">
</TextView>
</LinearLayout>
My guess is that the size of my image is lesser than what my ImageView layout_width and height. Or I dont really know what causes this problem.
But any help will do, please. Thanks.
EDIT: What I really wanted is that if the image is like image 4 and image 5, it should not have those spaces. I've tried getting the size of the image from my ImageLoader then set the layout parameters height and width in there while images are loaded. But it looked worse.
Are there other ways in which i can dynamically adjust my ImageView if ever the images are like image 4 and 5?

If actually you want to make the image occupy the desired space
try adding this image View property to your ImageView
You can try others I usually use fitXY out of the predefined list you will get there in XML Layout
android:scaleType="fitXY"
so as to make this property work we also need
android:adjustViewBounds="true"
that you have already added in your case
If actually you want to avoid on blank spaces and let the image occupy as much space as it want
In my layout I am using two image views to show a demo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_numbers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/tv_numbers"
android:layout_below="#+id/tv_numbers"
android:layout_marginTop="5dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<ImageView
android:id="#+id/textView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:src="#drawable/desert"/>
<ImageView
android:id="#+id/textView2"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#drawable/desert"/>
</LinearLayout>
ImageView 1 is assigning image as Source using android:src="#drawable/desert"
and below is the result as you can notice that it is showing WhiteSpace arround it.
ImageView2 is assigning image as Background using android:background="#drawable/desert"
and below is the result as you can notice that it is showing no WhiteSpace arround it.
Or try using these attributes to make it possible
android:maxHeight=""
android:maxWidth=""
android:minHeight=""
android:minWidth=""

How to make android:layout_gravity="bottom|center_horizontal" stays at bottom

I have a vertical LinearLayout which has a list view and one ImageView at the bottom and one at top and the list view filled up the space left behind.
It looks like this:
<LinearLayout layout_height="match_parent" layout_width="#dimen/width"
orientation="vertical">
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/top">
<ListView android:layout_height="0px"
android:background="#00ffff"
android:layout_width="#dimen/width"
android:layout_weight="1" />
<ImageView layout_height="#dimen/width" layout_width="#dimen/width" id="#+id/bottom" layout_gravity="bottom|center_horizontal">
It works fine whenever I have the list view visible.
But whenever I set the ListView to visibility gone, the 'bottom' ImageView will popup to be just underneath the top Image View.
My question is why the bottom ImageView does not stay at the bottom despite I said ' android:layout_gravity="bottom|center_horizontal"' I have looked at hierarchyViewer, the height of the parent does match the screen's height. So the bottom Image view should honor the android:layout_gravity="bottom|center_horizontal" and stay at the bottom, right?

As alternative to my comments, you can replace your LinearLayout with a RelativeLayout. Agarwal already suggested this, but his code is a bit of a mess and at the time of this writing not correct in terms of what you want it to do.
Give below code a try. When you set the ListView to gone, the top and bottom images will stay positioned identical to when it's visible. Do note that I replaced the #dimens/width references, so you might want to put those back in.
<?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">
<ImageView android:id="#+id/top" android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ListView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_above="#+id/bottom"
android:layout_below="#+id/top" android:background="#00ffff" />
<ImageView android:id="#+id/bottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

The best solution is to use ralaticelayout for this::::
<?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"
android:background="#0000FF">
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/top" />
<ImageView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="#+id/bottom" android:layout_alignParentBottom="true"/>
<ListView android:layout_height="fill_parent"
android:background="#00ffff"
android:layout_width="fill_parent"
android:layout_below:#id/top android:layout_above:#id/bottom />
</RelativeLayout>