Develop Reference

How to force a layout responsive to just one page

I want to force my layout shows the elements responsive in all kind of smartphones. I'm working on Android Studio 3.5
I want my app see like this in all devices (layout just in one view)
But in some devices with a smaller screen my same layout looks like this:
How to force my layout and all my elements to see in one page like my first image and avoid to? I don't want any kind of scrollview, I just one all my elements in one view.
My layout.xml
<FrameLayout 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"
tools:context="Fragments.InicioFragment">
<LinearLayout
android:layout_marginTop="10dp"
android:layout_gravity=""
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
<ScrollView
android:background="#drawable/border_black_radius"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scrollbars="vertical"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/contenido_seccion1"
android:textAlignment="center"
android:text="#string/prueba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/font_m"/>
</LinearLayout>
</ScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/temas_recycler"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp">
</androidx.recyclerview.widget.RecyclerView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/resumen_recycler"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
<!-- TODO: Update blank fragment layout -->
</FrameLayout>

You can use ConstraintLayout
Constraint layout works with screen ratios and (almost) always will represent your layout in the same way.
Also try to use DPs whenever you can and try to create a dimens.xml resource for each screen density.
Check this too: https://developer.android.com/training/multiscreen/screendensities

ConstraintLayout automatically resized by Android Studio

I'm new to Android and I've got problems designing a layout in Android Studio. I've found many related questions but none of them worked. Values of constraints are always hardcoded in dp by Android Studio according to the current preview size (Pixel, Nexus 7...).
Code I write in the XML editor (that works just fine on my phone):
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.meanstreet.note.MainActivity">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />
...
Code changed after I went to the Design tab (that doesn't fit to my phone screen):
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="344dp"
android:layout_height="495dp"
tools:context="com.meanstreet.note.MainActivity"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />
...
The Slider is a custom view that extends RelativeLayout.
The hardcoded values in Slider depend on the selected phone for the preview in Android Studio, and the view is now out of my phone (if the selected phone was bigger) or with big margins on right and bottom (if the selected phone was smaller).
This seems very weird to me: I can still avoid going to the Design tab, that way the code won't be changed and will work on any device, but that's annoying.
Why is Android Studio behaving like that ? How can I have the width and height to stay at "match_parent", and so have the right size on any phone ?
Thanks in advance for help.

match_parent is not supported for elements inside ConstraintLayout. Instead you can do;
Set the Slider's width to 0dp.
Add constraints to left and right with these attributes.
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
This way you can stretch that view horizontally. You can do the same thing vertically with same logic.
<?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">
<com.meanstreet.note.Slider
android:id="#+id/slider"
android:layout_width="0dp"
android:layout_height="495dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
tools:context="com.meanstreet.note.MainActivity"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<RelativeLayout
android:id="#+id/menu"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/bold"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="#string/bold_button" />

How to achieve this layout in Android (studio)

my name is Josh. I am trying to achieve the below layout in Android but I can't seem to split the inner layout to get the layout I want. Can someone help please.
This is what I have so far:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.firstapplication.myapplication.MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView" />
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:ems="10"
android:id="#+id/editText" />
</LinearLayout>
</RelativeLayout>
The only problem I am having is, I can't figure out how to split the layout as shown in the picture.

You can solve this multiple ways. I don't know the requirement for your layout but you really don't need two LinearLayout to solve this. However, with what you have currently all you have to do is give your first LinearLayout an id, and set the height to wrap_content like so:
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
then in your second layout set the positioning to be below your first one, set the height to wrap_content and remove layout_alignParentTop otherwise your second layout will overlap to your first. So you have something like this for the second:
<LinearLayout
android:layout_below="#id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
This will put the second layout underneath the first, but the sizing will vary unless the first layout is always a constant height.
If you know you always want a 70:30 ratio regardless of the first layout height, you can use layout_weights instead. I can add that in if that's what you're looking for instead.
To have a constant ratio, change your root layout to be LinearLayout instead of RelativeLayout then set the orientation to be vertical and a weightSum to 1.
Then set your first LinearLayout to be a layout_weight of 0.7 and your second LinearLayout to be a layout_weight of 0.3. Like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LL1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"></LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"></LinearLayout>
</LinearLayout>

Set the LinearLayout's height parameters accordingly to achieve the desired ratio between two layouts.
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="**XYZ dp**"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">

Android spinner arrow always above other views

In my app, I have some spinners (each of which is part of a fragment) in a scrollView. This scrollView is placed below a textView.
The problem is that, when I'm running the app on my test device (Samsung Galaxy S6 Edge [G925F], API 23), the little arrow of the spinner stays visible above the textView, even though the rest of the spinner is already out of view.
I did a lot of research but couldn't find any solutions, so I'm asking here:
What do I need to do so that the arrows disappear like the rest of the spinner?
Here some pictures:
In this picture, you can see the textView at the top of the activity and below the spinners, before I scrolled down
In this screenshot, you can see the problem. The little triangles of the spinner are still visible, but the spinner itself is already scrolled out of view.
Here is the XML code of the fragment containing the spinner:
<?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/fragLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/gradeDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginLeft="15dp"
android:text="1"
android:textSize="30dp"/>
<Spinner
android:id="#+id/spinner"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:entries="#array/grades"/>
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginEnd="15dp"
android:layout_marginRight="15dp"
android:src="#drawable/ic_remove_black_24dp"
android:background="#null"/>
</LinearLayout>
<Space
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_below="#id/fragLayout"/>
</RelativeLayout>
And here is the code of the MainActivitys content:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<Space
android:id="#+id/mainContentSpace"
android:layout_width="match_parent"
android:layout_height="16dp" />
<TextView
android:id="#+id/textView"
android:layout_below="#id/mainContentSpace"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_below="#id/textView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The fragments are added to the LinearLayout (#id/layout) by a Java method. If needed, I will post that here as well.
I'm using Java 1.8.05 and the target SDK is 23, the minimum is 14. The code is written in Android Studio
The textView with the problems is the #id/textView, displaying the large number at the top.

#jeanma you can fix the issue with just setting
android:background="#00FFFFFF"
for your ScrollView or root LinearLayout of the ScrollView

I now have got a workaround running. As suggested as I set the textView's backgroundcolor the same as my activity, the arrrows wheren't showing any longer. But the space did behave difrently. There it han'd changed somethinf that I changed the backgroundcolor. So I just removed it. (It still looks kinda good).
The updated XML-file od the MainActivity'a content can be seen here:
<?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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="de.jeanma.android.avo.MainActivity"
tools:showIn="#layout/activity_main">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:text="Standard text"
android:layout_height="wrap_content"
android:textSize="40dp"
android:gravity="end"
android:background="#FAFAFA"/>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView">
<LinearLayout
android:id="#+id/layout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#drawable/divider"
android:showDividers="middle">
</LinearLayout>
</ScrollView>
</RelativeLayout>
But because the arrows were showing threw the padding as well, I changed my
src\main\res\values\dimens.xml to the following (I know that that's really bad practice):
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">0dp</dimen><!-- This was changed from 16dp to 0dp -->
<dimen name="fab_margin">16dp</dimen>
</resources>
Thanks #ScriptKity #Wukash #Bryan for your support

Set Background Color in your parent layout.
android:background="#color/white"

I've run into this problem recently, and believe this is a bug in the hardware accelerated rendering on Android when you combine ScrollView and Spinner.
I was able to fix this by turning the hardware acceleration off for the Spinner(s):
mySpinner.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
Other possibilities how to control the hardware acceleration are described here:
https://developer.android.com/guide/topics/graphics/hardware-accel

Drawable dividers for a GridView

How do you set up custom dividers for a GridView?
I mean, there's a .png item with that blue gradient divider, but how do I put it in the GridView at the right place?
Searching through internet didn't bring any viable results..
Expectation:
Reality:
gridview wrapper xml:
<LinearLayout 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"
android:background="#color/primary_blue_dark"
android:orientation="vertical">
....
<GridView
android:id="#+id/gv_stock"
android:paddingEnd="#dimen/activity_horizontal_margin"
android:paddingStart="#dimen/activity_horizontal_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchMode="columnWidth"
android:numColumns="2"/>
</LinearLayout>
gridview item xml:
<?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="#color/primary_blue_dark"
style="#style/padded_layout"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="#style/teal_text_middle"
android:gravity="center"
android:text="test"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"/>
<ImageView
android:id="#+id/iv_arrow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_weight="1.3"
android:src="#drawable/ic_arrow_green"/>
</LinearLayout>
<TextView
android:id="#+id/tv_value"
android:layout_width="wrap_content"
android:layout_height="match_parent"
style="#style/white_text_big"
android:gravity="center"
android:text="test"/>
</LinearLayout>
</LinearLayout>

Use GridLayoutManager with Recyclerview and add the Itemdecoration from the following gist.You can vary offset's as per your requirement.

By using this answer here and simply changing the grey solid color background color for an image like this one (I set it for hdpi resolution - but it should stretch well both up and down),
you should get an effect like this (here it's on an ldpi device, so scaled down twice):
Which is not too far from what you're looking for.
It works, at least in principle. It may need some tweaking (narrowing the vertical central part), but you got the concept.
You might also want to cover some of the top (and possibly the bottom part, too) part, so to hide the trick.
With a simple "see through" effect, you can avoid messing with styles/themes.
[EDIT]
Yes, I know, it's MAINZ, not MEINZ (but, well... the pronounce is indeed the same! Hurry is a bad advisor, you know).