I've got a weird gap in my Android layout. I've set the background colors of my views and layouts so that you can see what is where. The gray box in the middle is the gap. I've got a RelativeLayout overall (white background), with a toolbar at the top (seen in pink), then a LinearLayout which is everything else (seen in yellow). In that yellow layout I've got two children: detail information (seen in blue), and a ListView (seen in red). However, the gray area in the middle... I have no idea where that is coming from.
Here is my layout file (with some info clipped for readability):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff"
>
<RelativeLayout
android:id="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="44dp"
android:background="#drawable/toolbar_gradient"
android:layout_alignParentTop="true"
android:background="#f0f"
>
<Button style="#style/Button.Done" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/toolbar"
android:paddingTop="4dp"
android:weightSum="10"
android:orientation="vertical"
android:background="#ff0"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="3.5"
android:weightSum="9"
android:orientation="vertical"
android:background="#00f"
>
</LinearLayout>
<ListView
android:id="#+id/tableView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="6.5"
android:background="#f00" >
</ListView>
</LinearLayout>
</RelativeLayout>
What is happening here? What am I missing?
EDIT: It appears the layout xml may not be the problem. I've been working to reduce and reduce and reduce and find the real culprit. It's looking like my problem exists in the ListAdapter code. Will update more as I discover it.
Did you try removing the android:layout_alignParentBottom="true" line from the definition of your first LinearLayout?
Ok, so after what felt like endless iterations of removing things until it was fixed and adding things back in until it broke again to narrow down to the specific problem I have discovered my error. I narrowed the problem down to my styling on the layout of the cells inside the ListView above.
I created a script awhile back to help me generate many different style.xml copies for different layout sizes and such so that I can provide good font size or layout_height values for different devices and make them look right. However, due to an error in my styles template, the style.xml which was being generated with a line <item name="android:layout_height">dp</item>. The missing number before the dp caused whacky behavior.
sigh Well, THAT sucked. ;)
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
This layout:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="90sp"
android:text="5000"
android:id="#+id/textView"
android:layout_gravity="center"
/>
</LinearLayout>
produces the following:
I want to get rid of the top and bottom margin. Where are they coming from in the first place? Maybe for certain letters in certain fonts/languages.
There is already a thread for this question, but none of the answers really work in all situations or the solutions are hacks. There has to be a simple way.
First idea from the thread: android:includeFontPadding="true" (does not change anyting)
Second idea from the thread: android:height="90sp" (removes at least bottom margin)
So, I changed my layout regarding the ideas:
<?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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="90sp"
android:text="5000"
android:id="#+id/textView"
android:layout_gravity="center"
android:includeFontPadding="true" <!-- idea 1 -->
android:height="90sp" <!-- idea 2 -->
/>
</LinearLayout>
Still it procudes a top margin:
Third idea from the thread: android:layout_marginTop="-12sp"
If add this property it looks at least as desired. But -12sp seems so arbitrary to me. I just adjusted this value via trial and error and I don't like that.
This does not seem like a clean solution to me. This is such a simple thing, I just cannot believe how Android can make it so hard, that you have to use hacks.
Is there a clean solution out there?
Use the below syntax to set text size programmatically and set the required size in dimes file.
textView.setTextSize(getResources().getDimension(R.dimen.textsize));
To set padding use below code based on your needs
yourTextView.setPadding(0, 10, 0, 0);
Set Linearlayout and TextView padding and margins to 0dp. Should work.
Add those to both views:
android:padding="0dp"
android:layout_margin="0dp"
I have a layout which holds the grid layout as follows
<?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">
<GridView
android:id="#+id/gridview_gallery_mine"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="10sp"
android:background="#color/background"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="4"
android:padding="4dip"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip" />
<RelativeLayout
android:id="#+id/empty_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/empty_list" />
</RelativeLayout>
</RelativeLayout>
The problem is that, the last rows of the grid is being cut to half. I mean the last row is only half visible. I tried giving the gridview and also its parent (RelativeLayout) padding, margin but nothing works. BTW I have this layout inflated inside a fragment with the tabs.
P.S I am learning android design. Thanks.
I had used the combinations of
Android basic actionbar,
tabhost from support library.
The answer to above question was since i had no other options for implementation, Applying padding bottom on the parent node of the content made it work.
I tried another combination with the Toolbar in appcompat v7.21 (or 21), It worked without the extra padding, So i dint get time to investigate who causing the problem, actionbar or tabhost.
~ Hope it helps
I want to make header placed adjacent to its background. I need to make the view compatible to all the screens without using fixed pixel value.
Help me to Solve this issue.
You can divide your screen in two parts by giving weight.
How..?
This is the xml code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="6">
<LinearLayout
android:id="#+id/headerlayout"
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:background="#ffff00"></LinearLayout>
<LinearLayout
android:id="#+id/baselayout"
android:layout_weight="5"
android:layout_height="0dp"
android:layout_width="fill_parent"
android:background="#android:color/darker_gray"></LinearLayout>
</LinearLayout>
There you will notice one layout which is of yellow color can act as header in your code. It will act same for all device. you can increase and decrease the weight of layout as your requirment, as how the header you want.
Hey, I have a problem where parts of the Text in the TextView are out of the screen, Look at the picture:
I marked the problem in red squares..
xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="right"
android:background="#drawable/list"
android:padding="15px">
<ScrollView android:id="#+id/ScrollView01"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right">
<TextView
android:id="#+id/TfseerTextView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textSize="17px"
android:textColor="#000"
></TextView>
</LinearLayout>
</ScrollView>
</LinearLayout>
Is it possible to fix? Is there any work around? Thanks.
you should use 17sp instead of 17px for your textSize. sp stands for Scaled Pixel, it will result in your app appearing better / more consistent across a wide variety of devices with differing screen sizes and densities.
As for the problem you are having. Does it make any difference if you set the TextViews layout_width attribute to some value e.g. android:layout_width="200dip" It looks to me like your TextView thinks that it has more space to use then it actually does (could be related to the grey box type things you have for the background, but this is a pure guess) If you set it to some specific value and it starts to wrap the text properly on the next line. Then you just have to try a few different widths and find out how big you can make it to keep everything appearing like it should.