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
Related
I started to work with Android Studio, i created a small app and set background:
android:background="#3F51B5"
but when i run the emulator i see a lower white/dark band, specially in smartphone with larger displays
what can i do?
i use linear layout and one section with constraintlayout. the first portion of main activity is
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:background="#3F51B5"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity"
tools:visibility="visible">
do like this:
android:layout_width="match_parent"
android:layout_height="match_parent"
with this way you can fill all the display with the color that you choose
If you wish to keep your LinearLayout as is but the full background as the colour you want, then I suggest wrapping this in a ConstraintLayout whose width and length can be match parent, or height can be wrap content as per your need
<androidx.constraintlayout.widget.ConstraintLayout
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:background="#3F51B5">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="false"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context=".MainActivity"
tools:visibility="visible">
//Views
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Using XML with relative layout as root layout , is there way that I can tell the image view to use 80% of screen and center it in the middle.
If I use wrap content or numeric dp then the image might be too small on big screens or too big for small screens. I want it to be 80‰ no matter what the screen looks like?
Please let me know how you would approach this thanks
You use PercentRelativeLayout, import this
dependencies {
...
compile 'com.android.support:percent:23.3.0'
...
}
In XML, you use <android.support.percent.PercentRelativeLayout> instead <RelativeLayout>, it will support below code for those child
app:layout_heightPercent="80%"
app:layout_widthPercent="80%"
With android:layout_width/height, you can use "wrap_content", or without using, no problem.
Well ,you can't do this on XML cause these mathematical operations can't be done there. You can just use MATCH_PARENT in the XML.
And then programmatically get the particular Views MeasuredWidth() and then set the width to be 80% of that.
Much easier and cleaner this way.
You can use PercentRelativeLayout
<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">
<ImageView
app:layout_widthPercent="80%"
app:layout_heightPercent="80%"
android:layout_centerInParent="true"/>
</android.support.percent.PercentFrameLayout>
You can create using weight in linear layout like following
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="8">
<ImageButton
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>
I would like to create an app that divides the screen into two squarish halves; in either orientation. The content within each half should rotate; but the two areas should remain fixed.
Could you tell me how to achieve this layout? I would like to place an embedded browser in one half, and a QR code scanner in the other.
I imagine this is a noobish question; I've done very little android development.
you can use layout weight sum and layout weight for this purpose.
use to following line of code:
<LinearLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:weightSum="2"
android:baselineAligned="false"
android:layout_gravity="center_horizontal">
<LinearLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_weight="1">
<LinearLayout
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
set layout_weight to 1 in both LinearLayout will divide the screen equally.
<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"
tools:context=".Main"
android:baselineAligned="false"
android:orientation="horizontal">
<LinearLayout
android:layout_weight="1"
android:background="#9561A7"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--views of the first section-->
/>
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:background="#006C91"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--views of the second section-->
/>
</LinearLayout>
good luck .
I am trying to draw 2 layouts vertically with top one containing image,Since Image is very big,it is occupying some portion of botton half,I used weights =1 and layoutheight=0dp to partition it equally,
Without any Image,Partition is perfect,But if i set background Image to toplayout ,Weight ratio is not perfect,which is of no reuse,
I tried using framelayout,which is also of no use,
What is exact way of doing it in xml,instead of assiging layouts height programmatically.
Try this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5">
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5">
</LinearLayout>
</LinearLayout>
Then you can set the image as a background for the top layout.
If you want to give your views relative space ,here is new android library which you may want to try.
Percent Support Library
https://developer.android.com/tools/support-library/features.html#percent
and you can use it in your project like:
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_heightPercent="50%"
app:layout_widthPercent="100%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_gravity="bottom"
app:layout_heightPercent="50%"
app:layout_widthPercent="100%" />
</android.support.percent.PercentFrameLayout>
One of my DialogFragments implements two equal-sized GridViews, one stacked on top of the other. Ideally, my layout would look like this (as seen in Android Studio):
Unfortunately, when I load up the layout on an actual Android device, I get something like this:
When the Kanji GridView is empty, it's completely invisible. Additionally, its height varies depending on the number of elements it has to display. How can I force the bottom GridView to fill 50% of the height as per the layout seen in Android Studio, even when it's empty?
Here is the XML for this particular layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:focusableInTouchMode="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ProgressBar
android:layout_width="32dp"
android:layout_height="32dp"
android:id="#+id/progress_bar"
android:layout_toStartOf="#+id/search_box_kanji"
android:visibility="gone"
android:indeterminate="true"
android:layout_centerVertical="true"/>
<SearchView
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#id/search_box_kanji"
android:queryHint="#string/menu_search_hint"
android:iconifiedByDefault="false"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/components" />
<com.tonicartos.widget.stickygridheaders.StickyGridHeadersGridView
android:id="#+id/grid_components"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="9"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/EntryDetailsHeader"
android:text="#string/kanji" />
<GridView
android:id="#+id/grid_kanji"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:numColumns="9"/>
</LinearLayout>
</LinearLayout>
(By the way I'm using the StickyGridHeaders library for the upper Components GridView)
Change the '0dp' layout_height on your two LinearLayouts to 'match_parent'.
You're missing a weightSum attribute on your outermost LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/kanji_lookup_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:weightSum="2" > <!-- This line is what you were missing -->
...
</LinearLayout>
Tested this as working on device (assuming your EntryDetailsHeader style sets match_parent width and wrap_content height).