Develop Reference

Hold a ImageView exactly in place XML

I have following problem, I want to add a ImageView (the Google Play button) to my dialog which stays in place, no matter which device the app is running on.
Here is what it should look like:
This is what it looks like on some devices:
Here is the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/goProDialogImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/goldversiondialog"/>
<ImageView
android:id="#+id/googleplaybutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/goProDialogImage"
android:layout_alignBottom="#+id/goProDialogImage"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:maxHeight="250dp"
android:maxWidth="250dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:src="#drawable/gpbutton" />
</RelativeLayout>
How can I tell the app to never put the Image above the golden veil?

Do this:
<LinearLayout
android:weightSum="1"
android:gravity="end"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/googleplaybutton"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/ic_logo" />
</LinearLayout>
I have removed some of your properties, the key point is that you need to use weightSum in LinearLayout and apply weight to your ImageView(I have given 0.5, you can change according to your need). Also, do not set android:scaleType to fitXY, keep the aspect ratio so the height will change according to the width.

specify layout width of cardview to fit all phone screen sizes

need some advice here!
Basically, I want my card view to be like the 2nd pic but without specifying a specific width size, as specifying a specific size will cause the layout to look differently to in other phones.
What I have tried:
1) tried wrap_content, but the sizes of the card view will be different depending on the contents inside it. Some will be long until it's overlaying the index panel, then some will be short. Also, it is definitely not match_parent because the index panel will overlay the cardview.
2) specify a specific number (315dp) for the width. It looked great on my actual phone, but not on other emulators.
3) added "android:layout_toStartOf="#+id/recycler_search" to my card view layout, but there is no effect.
Perhaps I could just demonstrate using my phone, but that will not be efficient isn't it?
As such, anyone knows how I could overcome this? Any help is greatly appreciated!
Here are my codes:
card view layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="315dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="10dp"
app:cardBackgroundColor="#f5f0f0"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="5dp">
<LinearLayout
android:orientation="vertical"
android:layout_weight="9"
android:layout_width="0dp"
android:layout_height="wrap_content">
<TextView
android:id="#+id/keyword"
android:layout_marginLeft="10dp"
android:gravity="center_vertical|start"
android:textAllCaps="true"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="15dp"
android:text="Baggage Management Interface Device
(BMID) Testing 123"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/codeHeader"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="bold"
android:textColor="#a8000000"
android:text="Code:"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/acronym"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:gravity="center_vertical|start"
android:textStyle="italic"
android:textColor="#a8000000"
android:text="GST"
android:textSize="13dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/ruleHeader"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textStyle="bold"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Desc:"-->
<!--android:textSize="13dp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/description"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="If none are set then 'GST' is
set to NULL"-->
<!--android:textSize="13dp"-->
<!--android:maxLines="2"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--</LinearLayout>-->
<!--<LinearLayout-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content">-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword"-->
<!--android:layout_marginLeft="10dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:gravity="center_vertical|start"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Related Keyword:"-->
<!--android:textSize="12sp"-->
<!--android:textStyle="bold"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content" />-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword1"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 1,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword2"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 2,"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--<TextView-->
<!--android:id="#+id/relatedKeyword3"-->
<!--android:clickable="true"-->
<!--android:layout_marginLeft="5dp"-->
<!--android:layout_marginTop="5dp"-->
<!--android:textColor="#a8000000"-->
<!--android:text="Keyword 3"-->
<!--android:textSize="12sp"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"/>-->
<!--</LinearLayout>-->
<TextView
android:id="#+id/tv_rules_read_more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:textStyle="bold"
android:textSize="14sp"
android:clickable="true"
android:padding="5dp"
android:textColor="#android:color/holo_blue_dark"
android:text="#string/read_more"/>
</LinearLayout>
</LinearLayout>
main layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".KnowledgeActivity"
android:background="#drawable/bokeh10"
android:id="#+id/drawerLayout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:id="#+id/drawable_header"
android:layout_width="match_parent"
android:layout_height="70dp"
android:src="#drawable/bg_login"/>
<com.mancj.materialsearchbar.MaterialSearchBar
android:id="#+id/search_bar"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mt_speechMode="false"
app:mt_hint="Search" />
<in.myinnos.alphabetsindexfastscrollrecycler.IndexFastScrollRecyclerView
android:id="#+id/recycler_search"
android:layout_below="#+id/search_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:setIndexBarColor="#ffffff"
app:setIndexBarTextColor="#000000"/>
</RelativeLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nvNavView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/navigation_menu"
android:layout_gravity="start">
</android.support.design.widget.NavigationView>
Edit: For everyone asking why not match_parent
This is how it looked like! The index panel is covering some parts of the card view. You may say it's just a little bit, but I have more card views with longer title.

Someone posted a solution and I don't know why it got deleted! I followed his solution and my issue is magically solved when I did little changes to my codes!
The OP's solution was to follow this gitHub (https://github.com/intuit/sdp/tree/master/sdp-android/src/main/res) and change the 351dp to 351sdp.
So here are the steps I did to somewhat solve my concern.
Create a new Value Resource File under the values folder
Name the file as positive_sdp
Follow exactly like what was written in the GitHub. The positive_sdp file should contain the relevant dimension you want your widget, drawable or anything to be. So in my positive_sdp xml file, I had these:
<dimen name="_315sdp">315.00dp</dimen>
<dimen name="_80sdp">80.00dp</dimen>
<dimen name="_250sdp">250.00dp</dimen>
I saved the file as usual.
At first, I forgot to change my 351dp to 'dimen/_27sdp', but when I run my app on 4 different phones (2 emulators & 2 actual phones), I realised that the width of my cardview is right before the index panel like how I wanted it to be. However, before this, if I stick to 351dp and run my app on the same 4 emulators, the width of my cardview was everywhere!
In conclusion, I believed my issue got solved by just creating the positive_sdp file.
I hope everyone can benefit from this!

GridView item height is mismatched with other

I am using a grid view. It shows issue in some devices. One item of the grid view looks shorter in height than others.
It looks like this in some devices, and in some its fine.
Layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:background="#android:color/white"
android:layout_height="match_parent">
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.admin.fueloneApp.MainDriver"
tools:showIn="#layout/app_bar_main"
android:weightSum="8">
<TextView
android:id="#+id/main_welcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/dimen_20dp"
android:text="#string/welcome"
android:textColor="#color/colorPrimary"
android:textStyle="bold" />
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridviewMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="#dimen/dimen_40dp"
android:layout_marginLeft="#dimen/dimen_40dp"
android:layout_marginRight="#dimen/dimen_40dp"
android:columnWidth="80dp"
android:horizontalSpacing="#dimen/dimen_10dp"
android:numColumns="2"
android:stretchMode="columnWidth"
android:verticalSpacing="10dp"></GridView>
</LinearLayout>
</ScrollView>
<TextView
android:id="#+id/textView20"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerInParent="false"
android:text="For Any Queries Related To Mobile App Click On Service Request"
android:textAlignment="center" />
</RelativeLayout>
Item layout
EDIT : Added item layout of the grid view.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/single_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary1"
android:orientation="vertical">
<ImageView
android:id="#+id/gris_img"
android:layout_gravity="center"
android:layout_width="80dp"
android:scaleType="fitXY"
android:layout_height="100dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/grid_cat"
android:textSize="15sp"
android:textColor="#color/divider_color"
android:gravity="center"/>
</LinearLayout>
How can I manage the height of each item? What is the solution for this? Please help. thank you...

Gridview is having a tendency to adjust the height of all element with the tallest element in all. Hence this behaviour you are seeing.You can use StaggeredGridView.

i think your grid layout cell height is wrap_content. this problem same occur with me . change your layout height wrap_content to match_parent.
android:layout_height="match_parent"
for better solution please update your grid view item layout cell here.

Add Textview property :
android:maxLines="1"
android:singleLine="true"
if text not visible single line, you need change textview to autosizing-textview
enter link description here

Doesn't wrap_content adjust to the size of fonts?

My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap

whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You

Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"

Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"

Two Relativelayouts display vertically

Here's the XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
</RelativeLayout>
It's not really the scene (The UI design is not that code, but I'm presenting it for simplification).
What I except from this code is that the TextViews will be displayed one by another relatively (in a vertical way). Like:
Welcome
Welcome
But instead the output is the following:
Welcome
Like, they're nested together, stacked on each other.
I made the width layouts as fill parent, so why the other layout doesn't go down? it overrides the first relativelayout.
I must have 2 layouts, so please don't suggest me to create only one layout.
Thank you.

You need to set the relation of your layouts.
Try the modification I've made below.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:id="#+id/top_rel>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/top_rel>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
</RelativeLayout>
I've given the top layout the android:id="#+id/top_rel" to make it's identification easier.
Also I've told it to be laid out at the top of the view by using android:layout_alignParentTop="true".
The lower RelativeLayout then is being laid out below the top one by using android:layout_below="#id/top_rel".

First of all, give some id of the Relative layout corresponding the first text view. Then using the id, add the layout_below property for the second relative layout. So that it will display below of the first text view..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout
android:id = "#+id/first_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/first_layout">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content" android:text="Welcome"
android:layout_centerInParent="true" android:textSize="20sp"/>
</RelativeLayout>
</RelativeLayout>