Develop Reference

android nested LinearLayout sizing

I am trying to achieve the following layout for my expandable listview.
Layout
Problem:
On android previewer the layout looks as expected:
refer to first image in attachment below.
However, when I run it on an emulator or a device the second TextView is not displayed.
refer to second image in attachment below
I have to set the height of the second ImageView (ivGroupIndicator) to match parent in order for the second TextView to display. But this stretches the expandable arrow icon.
refer to last image in attachment below
Images
Here is my 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="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:src="#drawable/ci_hand_cursor"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:layout_weight="0.8">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dhelhi Belhi"
android:fontFamily="sans-serif"
android:textSize="16sp"
android:textStyle="bold"
android:textColor="#color/colorPrimaryText"
android:paddingBottom="2dp"/>
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="20-September-2017"
android:fontFamily="sans-serif"
android:textSize="14sp"
android:textColor="#color/colorSecondaryText"
android:paddingBottom="5dp"/>
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:background="#drawable/group_indicator"
android:layout_gravity="center"/>
</LinearLayout>
What am i missing here?

This should do the trick:
Use 0dp as height/width when using weights
Weight can just be 1 (not 0.8)
Use equal weights on the 2 text views so they share equal vertical space
Set gravity to center_vertical on text views so the text is centered.
set scale type on image so it doesn't stretch.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scaleType="centerInside"
android:src="#drawable/ci_hand_cursor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp">
<TextView
android:id="#+id/route_name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="Dhelhi Belhi"
android:textColor="#color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/route_schedule_date"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif"
android:gravity="center_vertical"
android:text="20-September-2017"
android:textColor="#color/colorSecondaryText"
android:textSize="14sp" />
</LinearLayout>
<ImageView
android:id="#+id/ivGroupIndicator"
android:layout_width="25dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/group_indicator"
android:scaleType="centerInside" />
</LinearLayout>

The problem maybe is that you set the height of the parent layout to 50dp. Try to set it to wrap content, and use height=0dp and weight=1 for the vertical LinearLayout

android layout leaving small gaps

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" />

Flexible Horizontal Layout with `layout_weight` and `maxWidth`

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.

LinearLayout not resizing ImageViews correctly

As part of the on-boarding for my app, I have a series of translucent overlays that highlight the UI. Each one is a LinearLayout, initially invisible (actually "gone"), that I make visible in turn. I am having a very tough time getting one of these to display correctly on both tablets and phones, in both portrait and landscape. I can tune it to work on the phone, but then it doesn't display well on tablet-portrait.
The images here are set up to work well on 10" tablets in portrait, and they work for 7" tablets and phones in portrait, but not in landscape. In the images below, I would like the arrows (two ImageViews) to resize as needed to make room for the text. However, the Layout seems to give priority to the ImageViews no matter what I do.
(Note that I do realize I could make this work, in a way, with a RelativeLayout, however, I cannot get the translucent backgrounds to work, filling the screen, using a RelativeLayout, as far as I know.)
My question in brief: Is there a way to make LinearLayout prioritize the TextViews, giving them enough space, and resizing the ImageViews to fit the rest?
Here is a good layout (10" tablet, portrait, shown at reduced scale):
Here is a bad one with some of the text cut off (10" tablet, landscape, reduced scale):
Here is another bad one (phone):
I don't have a screenshot of the other tuning, but it displayed big arrows and no central "Tap to Continue" button.
Here is my current XML:
<RelativeLayout
android:id="#+id/main_holder"
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">
<LinearLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<LinearLayout
android:id="#+id/intro3_top"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="top|center_horizontal"
android:orientation="vertical"
android:gravity="top|center_horizontal">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:layout_gravity="center_horizontal|top"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:layout_weight="0"
android:background="#85000000"
android:gravity="center">
<TextView
android:id="#+id/button_intro3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/intro3_bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="bottom|center_horizontal"
android:gravity="bottom|center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|bottom"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_weight="1"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:layout_gravity="center_horizontal|bottom"
android:gravity="center"
android:layout_weight="1"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

There're several possible way of doing it. I've updated your layout a bit, so now it should meet your expectations:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/main_holder"
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">
<RelativeLayout
android:id="#+id/intro3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
android:onClick="introClicked"
android:clickable="true">
<TextView
android:id="#+id/textViewIntro3_1"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe up to mark a spark completed."
android:gravity="center"
android:layout_alignParentTop="true"
android:paddingBottom="5dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/button_intro3"
android:layout_below="#+id/textViewIntro3_1"
android:adjustViewBounds="false"
android:background="#drawable/grad_bottom"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_up"/>
<TextView
android:id="#+id/button_intro3"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alpha="0"
android:background="#drawable/roundrect"
android:onClick="introClicked"
android:padding="10dp"
android:text="Tap to Continue"
android:clickable="true"
android:enabled="true"
android:textColor="#FFFFF6C3"
android:textSize="24sp"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:background="#drawable/grad_top"
android:layout_below="#+id/button_intro3"
android:layout_above="#+id/textViewIntro3_2"
android:padding="10dp"
android:scaleType="fitCenter"
android:src="#drawable/arrow_down"/>
<TextView
android:id="#+id/textViewIntro3_2"
fontPath="fonts/AsCuteAs...Heavy.ttf"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Swipe down to reject.\n "
android:gravity="center"
android:layout_alignParentBottom="true"
android:paddingBottom="0dp"
android:background="#C5000000"
android:textColor="#fff6c3"
android:textSize="30sp"/>
</RelativeLayout>
</RelativeLayout>
What I did here is to rewrite the layout with RelativeLayout instead of LinearLayouts. It suits better here, in my humble opinion.
I hope, it helps.

how to adjust images in every where i want to layout in android?

I have an layout with a background that already made for host my app's image buttons. my image buttons are in a row of middle in this layout. my emulator is 480*800 px hdpi that dp is:320*533.
when i adjust buttons from xml, everything is OK. but when run, my buttons change smaller than from size of in xml and layout is not ordered. please help me. what can i do?
myt xml code for this layout is:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/main">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bottom_panel"
>
</ScrollView>
<LinearLayout
android:id="#+id/bottom_panel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:paddingBottom="75dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/help_ic"
android:src="#drawable/help_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/feed_ic"
android:src="#drawable/feed_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/search_ic"
android:src="#drawable/search_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/read_ic"
android:src="#drawable/read_main_hdpi"
android:layout_marginTop="0dp"
android:layout_gravity="right"
android:layout_weight="1"
android:paddingBottom="0dp" />
</LinearLayout>

As you have given weight to your ImageView,set
android:layout_width="0dp"
instead of "wrap_content" for the ImageView and give the total weightsum to the parent LinearLayout i.e 4 in your case.
Try this, I hope It will help you.