I've already created the layout-sw720dp but I don't know if I have to change all of the sizes of those Layouts,I mean I have layout-sw330dp, layout-sw480dp, and so on, I have to change the size of TextView, Button, and all of the stuff on the layout?
Is there any option to make it dynamic instead of changing it manually?
Edit
My problem is when I run my app on a Nexus5 for instance it looks good, all size is correct, but when I try to run my app on Nexus9 all of the widgets are smalls (buttons, textviews, etc...)
The recent update to TextViews in support library v26 was built for just this purpose:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="200dp"
app:autoSizeTextType="uniform"
app:autoSizeMinTextSize="12sp"
app:autoSizeMaxTextSize="100sp"
app:autoSizeStepGranularity="2sp" />
</LinearLayout>
Related
Many similar questions were posted here, and I took my time to read them all. Majority of these posts uses ScrollView like this:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#CACACA"
android:fillViewPort="true" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</RelativeLayout>
</ScrollView>
But i dont want to use scrollview. I only use Relative layout which has 2 childs, lottiefile animation and textview to display No Internet Error page. In Android Studio preview shows white background on device size as I expected, but when I test it on my Pocophone F1, relativelayout does not take any background color (even though white color is set). What am I missing here ? Can RelativeLayout fill the device screen background color at all ?
Here are screenshots and code I am working on:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF">
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/noInternetAnimation"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/internet_error" />
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_below="#id/noInternetAnimation"
android:layout_centerHorizontal="true"
android:text="#string/no_internet"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
Check the screenshot, app preview on the right has white background as expected.
Now, check this when it is installed on my phone in real device.
Did you try changing your RelativeLayout to a ConstraintLayout just to see if it works? Your XML doesn't look complex at all, so I don't see why is not working
I have linked Google login to my 'JoinActivity'. Like this...
activity_join.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".JoinActivity">
<!-- this line-->
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"/>
</androidx.constraintlayout.widget.ConstraintLayout>
But, I couldn't see any 'visual' button on my Design tab, there was only '200dp-linear button('cause its width values is 200dp. It doesn't have height value. idk why)' on the top-left.
I referenced other sites, videos. They all have visual button like this but not me.
Yes, we can not see the icon in design mode, but it display when
running the app.
Your XML has an error:
This view is not constrained. It only has designtime positions, so it
will jump to (0,0) at runtime unless you add the constraints
To make it work properly, we must add the constraint for horiziation and vertical.
<com.google.android.gms.common.SignInButton
android:id="#+id/btn.google"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
And this is constraint-layout introduction
Try running Gradle, this sometimes triggers the design to redraw (if you have just added the google library without having ran Gradle fully)
I have this simple 'XML' layout. I have tested in various devices and emulators and works fine. But on Galaxy Tab Samsung 9.6inch (1280x800) 157 dpi, text customer gets cropped in the end & becomes "custom".
I have read that i should declare dimens xml for various densities but i thought using DP is what makes your layout look the same in all devices. Am i wrong?
Also this tablet is a ldpi and x-large screen. I have tested it in other similar devices with similar specs and works well. How should i make this work for this device?
NOTE I want specifically 100dp to match others texts in width
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:text="customer" />
</LinearLayout>
There could be the issue of TextSize in that device. Have you tried playing with the text size?
Is this layout is in any other layout?
Its happening because u have used padding on whole side.just set padding only top and bottom as u have only fixed the width.then it should be worked
to support padding just follow below-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="132dp"
android:layout_height="wrap_content"
android:layout_paddingLeft="16dp"
android:layout_paddingRight="16dp"
android:text="customer" />
</LinearLayout>
I am trying to figure out how would you implement something like an Android Settings View for both phones and tablets? It doesn't look like a ListView or RecyclerView utilizing CardView? Which Android class or component would you use to implement/design a similar looking ListView?
Its sort of a 2 column layout on tablets and one column layout on phones:
Any sample code or tips would be appreciated.
You can accomplish this by using a combination of RecyclerView and CardView for the General settings (Ex: Wireless and networks or Device), then you can use a GridView inside each card to hold the specific settings (Ex: WiFi or Controller). Then to accomplish the two column trick, use resource qualifiers on an xml file containing an integer for the number of columns you want to display.
I'll give you an overview of the code.
You have an xml file like recycler_layout.xml that holds the frame for everything.
<?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.support.v7.widget.RecyclerView
android:id="#+id/friend_rv"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Then you have the frame for a card with a GridView inside of it.
<?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.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/settings_card">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Your General Setting Title"
android:id="#+id/textView3" />
<GridView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/setting_content"
android:numColumns="#integer/yourColumnInteger"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Finally you have a file like myIntegers.xml that contains yourColumnInteger where you define the value to be 1 if the user is on a phone (i.e. their screen is X size) and 2 if the user is on a tablet (i.e. their screen is Y size which is bigger than X)
Then all you have to do is wire up all the adapters for the thing. You'll need an adapter that populates the cards and an adapter for the GridView that populates the specific settings. (And I assume you understand that you will probably need another xml layout for the frame that makes of the specific settings like the setting icon and name in a vertical linear layout)
I'm very disappointed. I just finished my project based on 360dp for "normal screens", but when I tried to run in Motorola Atrix I had a surprise. Motorola Atrix is 360dp instead 320dp, because his width is 540px. Now I'm breaking my head to find out that problem to be resolved. How can I create a layout for 360dp?
I tried all of these:
res/values-sw360dp
res/layout-sw360dp
main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#DFEFF1">
<Button
android:background="#AAAA11"
android:id="#+id/button1"
android:layout_width="#dimen/default_width"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 1"
/>
<Button
android:background="#FFAA11"
android:id="#+id/button2"
android:layout_width="#dimen/default_width"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 2"
android:layout_alignParentRight="true" />
</RelativeLayout>
res/values/strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="default_width">160dp</dimen>
<dimen name="default_height">160dp</dimen>
</resources>
Motorola Atrix
Samsung Galaxy SII
Generally when designing your layout you want to avoid planning for a specific pixel size. If you were to separate all of your layouts based on pixels like you want to, then you'd have to almost provide one layout for every single device (There are so many devices with different sized screens in the world). Usually you'll want to provide layout resources for a few different categories of size. layout-small, layout-normal, layout-large, etc. If you provide those and your layouts are built in a good manner it should scale to the different sized devices pretty well.
Is there something specific that is wrong with your layout when you run it in the larger sized device? Perhaps if you post that I can help you to try to solve it without needing to separate your layouts by pixel size.
Supporting Multiple Screens in the developer docs has lots of great information about how to build your applications so that they will scale well.
EDIT:
One potential way to solve your problem is not use a static dp value for the width, instead allow the buttons to grow to takeup however much space (horizontally) in order to fill up the width of the screen. You can do that with layout_weight and setting the width to fill_parent. I don't have access to eclipse now so I can't test, but I think surely there is also a way you could get this effect without the linearlayout, but this was the first way that I thought of.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#DFEFF1">
<LinearLayout
android:id="#+id/buttonRow"
android:orientation="horizontal"
android:layout_height="#dimen/default_height"
android:layout_width="fill_parent">
<Button
android:background="#AAAA11"
android:id="#+id/button1"
android:layout_width="0"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 1"
android:layout_weight="1"
/>
<Button
android:background="#FFAA11"
android:id="#+id/button2"
android:layout_width="0"
android:layout_height="#dimen/default_height"
android:text="SOME TEXT 2"
android:layout_weight="1" />
</LinearLayout>
</RelativeLayout>