Develop Reference

Put all the background color in this XML - Android

this is the first part of my xml, it is a cardview.
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvPhase"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:elevation="4dp"
android:backgroundTint="#color/grayBackground"
app:cardCornerRadius="8dp"
>
And my imageView
<ImageView
android:id="#+id/imagePhoto"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/round_top"
android:scaleType="centerCrop"
android:src="#drawable/logo_white"
/>
the result is this
I would like the entire background to be seen in gray and not just the bottom, the image is still on top of the color, how would I make the image also colored?
Thank you

your cardview height is wrap content and matching your imageview height you should give height for your cardview

Make your Cardview height as "match_parent".
android:layout_height="match_parent"
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/cvPhase"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp"
android:elevation="4dp"
android:backgroundTint="#color/grayBackground"
app:cardCornerRadius="8dp"
/>

Scaling an ImageView when the soft keyboard opens

I'm creating a tabbed activity. As long as the first tab is selected, the soft keyboard should be visible. I achieved that by adding this line to my manifest file in the activity tag:
android:windowSoftInputMode="stateVisible|adjustResize"
As the keyboard opens, the space for the layout shrinks. The most space is occupated by an ImageView. I want it to shrink with the layout size to allow the other 2 views (which should remain the same size) to fit on the screen. However, although the soft input mode is set to adjustResize, the ImageView keeps its size after the keyboard opens. Here's a comparison of the current layout and the one I want to achieve (the ImageView is the red rectangle):
comparison
My fragment's layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".DataInputFragment"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/image"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<requestFocus/>
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
</LinearLayout>
</RelativeLayout>
My activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TabLayout">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
How to force the ImageView to resize according to the screen size to make all of the views fit on the screen?
[EDIT]: My attempt to create a ConstraintLayout, which didn't solve the problem (the ImageView still keeps its original size):
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="wrap_content"
android:orientation="vertical"
tools:context=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitStart"
android:src="#drawable/image"
android:adjustViewBounds="true"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img"/>
<namespace.InputEditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</namespace.InputEditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text"/>
</android.support.constraint.ConstraintLayout>

I've created an Android Project from scratch on Android Studio 4.0, using the "Tabbed Activity" template and uploaded it to GitHub.
I've had no issues with the resize taking place when the activity is resized.
What Did I change?
In the manifest.xml I added android:windowSoftInputMode="adjustResize"
I modified the default layout for the fragment in the tab to include an ImageView (called imageToShrink) and an EditText (called editLayout).
I left the existing TextView untouched, except that since it's at the top, I made it the HEAD of the vertical Chain, and gave it a 0.0 BIAS to be aligned at the top, rather at the center.
When you tap on the cyan EditText at the bottom, the keyboard pops (I made it number only so it's even taller) and you can see how the image is re-drawn after its new size is recomputed.
This is how it looks when it opens: (beautiful color palette!)
And this is how it looks when I tap the "edit field" to pop the keyboard:

your ImageView should not have wrap_content attributes, because it will always have constant size and wont be able to resize automatically. I would suggest using ConstraintLayout and use app:layout_constraintDimensionRatio. Other option is use LinearLayout weight (not recommending).
Ant third option is to detect when keyboard is visible, when not with ViewTreeObserver.OnGlobalLayoutListener and do stuff programmaticaly.
Try this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".DataInputFragment">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:adjustViewBounds="true"
android:scaleType="fitStart"
android:src="#drawable/image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="3:1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/input_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/input_label_text"
app:layout_constraintTop_toBottomOf="#id/img" />
<EditText
android:id="#+id/input_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/input_label">
<requestFocus />
</EditText>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/submit"
app:layout_constraintTop_toBottomOf="#id/input_edit_text" />
</android.support.constraint.ConstraintLayout>

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

Views in Linear layout don't align properly

Following code produces the result in the blueprint:
<?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:background="#drawable/marker_shape">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/marker_header">
<TextView
android:id="#+id/widget_1_header_from"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<Button
android:id="#+id/widget_1_refresh"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/quantum_ic_refresh_white_24"/>
</LinearLayout>
<ListView
android:id="#+id/widget_1_list"
android:footerDividersEnabled="false"
android:headerDividersEnabled="false"
android:layout_width="match_parent"
android:dividerHeight="0dp"
android:layout_height="wrap_content">
</ListView>
</LinearLayout>
As you can see: the TextView gets displayed beneath the Button. They need to go next to each other. How do I fix this?

You have 2 options:
Change your button's height to wrap_content.
or:
change your textview height to match_parent.

set width and height as percentage in relative layout

I would like to have this: a ViewPager overlaid by 2 arrows
And I get what I want by this code. However, I got these warnings of lint :
this layout is useless (for dummy layouts)
nested weights are bad for performance.
I wonder if there is a better way to get this UI as I want.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
<!-- this LinearLayout overlays the ViewPager -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="horizontal" >
<!-- I want to align this to the left and set width only 5% of the parent -->
<ImageButton
android:id="#+id/instruction_dialog_left_arrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".05"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/arrow_left_grey" />
<!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".8" >
</LinearLayout>
<!-- I want to align this to the right and set width only 5% of the parent-->
<ImageButton
android:id="#+id/instruction_dialog_right_arrow"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".05"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/arrow_right_grey" />
</LinearLayout>
</LinearLayout>
P.S: Is there any layout that allows align children left, right, bottom (like RelativeLayout) and also allows set width, height as percentage (like "weight" attribute in LinearLayout)?
Thank you !

try this
to avoid this layout is useless (for dummy layouts) u should android:background="#android:color/transparent" and add dummy view in that linear layout because layout should not be empty.
to avoid nested weights are bad for performance add one child linear layout.
and read my comments in code
and added parent layout for imageview to make image vertically center
try this code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></android.support.v4.view.ViewPager>
<!-- this LinearLayout overlays the ViewPager -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<!-- This is just the container for the left and right arrows , it is allocated with only 20% of screen height-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".2"
android:orientation="horizontal">
<!--child layout to avoid nested weight with `waighSum` property-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="100">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- I want to align this to the left and set width only 5% of the parent -->
<ImageButton
android:id="#+id/instruction_dialog_left_arrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/icon_clock" />
</LinearLayout>
<!-- This is the dummy layout, standing in the middle of 2 arrows so they can be align to the left and right of the parent -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="90"
android:background="#android:color/transparent">// this line also makes layout usefull
<!-- dummy view becouse layout should not be empty -->
<View
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="5"
android:gravity="center_vertical"
android:orientation="horizontal">
<!-- I want to align this to the right and set width only 5% of the parent-->
<ImageButton
android:id="#+id/instruction_dialog_right_arrow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:scaleType="fitCenter"
android:src="#drawable/icon_clock" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</FrameLayout>
hope it works for u

Google introduced new API called android.support.percent
1)PercentRelativeLayout
2)PercentFrameLayout
Add compile dependency like
compile 'com.android.support:percent:23.1.1'
You can specify dimension in percentage so get both benefit of RelativeLayout and percentage
<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
app:layout_widthPercent="40%"
app:layout_heightPercent="40%"
app:layout_marginTopPercent="15%"
app:layout_marginLeftPercent="15%"/>
</android.support.percent.PercentRelativeLayout/>

Try the below code and see whether it works,
This code will get the layout what you have attached
<?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"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="#+id/dialog_instruction_pager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/theme_blue" >
</android.support.v4.view.ViewPager>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/ic_launcher" />
</RelativeLayout>

Try using RelativeLayout and then set the left image to alignParentLeft and the right image to alignParentRight