Develop Reference

Extend color background in Android Studio

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>

Why is the look of the activity different in the Android Studio preview than on the device?

I created an navigation drawer activity and found that its content page looks different in the preview.
This is the preview.
And this is the AVD appearance (it looks like a real device too).
XML code is:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
tools:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
What do you think where the problem is?

Try adding android:scaleType="fitXY" in ImageView like this:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.xy.xy.HomePage">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160sp"
android:layout_marginLeft="5sp"
android:layout_marginRight="5sp"
android:layout_marginTop="5sp">
<ImageView
android:id="#+id/TestMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
app:srcCompat="#drawable/bg1"
android:scaleType="fitXY"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
tools:background="#color/hbm_text_background">
<TextView
android:id="#+id/TestMenuName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5sp"
android:contentDescription="#string/app_name"
android:text="#string/test"
android:textColor="#color/white" />
</RelativeLayout>
<Button
android:id="#+id/TestMenuButton"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
</LinearLayout>
That's probably a little bug with ImageViews´ previews in Android Studio,
Hope it helps

EDIT: I see you've included the style file and it does appear that your app is running the same style (AppTheme) as your preview so I think we can possibly rule out that as a culprit.
I doubt this makes a difference but I noticed your preview is running api 27 and your device is running api 27.
Try removing the
tools:context="com.xy.xy.HomePage" and see if it makes a difference.
The preview can only show you the current view. It doesn't know the parent view. The child view may have a parent view that constricts the size of the child view. Let's say that your image is set to width="match_parent". In this case, the preview may expand the image to fill the full width but at runtime your image my be placed inside a parent with a width="100dp" which would cause the image to have a width of only 100dp. Padding and margin of the parent view can also cause an issue.
If this isn't the problem then it may be a styling issue. I'd have to see more of your Theme and Style setup in order to know for sure. Your preview might be showing you a different style/theme than what you are actually using at runtime.

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).

Why FrameLayout isn't setting Z order correctly in my layout?

I have the following layout (here is presented much simpler design):
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main">
<FrameLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hey, badge!"
android:layout_margin="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAA"
android:layout_margin="10dp"
android:textSize="12sp"
android:background="#ff00ff"
android:padding="10dp"
android:layout_gravity="top|end"
/>
</FrameLayout>
</RelativeLayout>
I wish to set TextView with text "AAAA" to act as a badge for Button, i.e. to be placed over the button in its upper right corner, which is not the case.
Instead, when I try this code on HTC One M7 with Lollipop, or on Genymotion Nexus 6 with Lollipop, screen looks something like this:
When I try the same code on Genymotion Nexus 5 with KitKat, everything looks as expected, i.e. first view (button) is shown underneath badge (textview)
Does anyone have any clue what could be wrong here?
Thanks,
Deveti

The elevation causes this issue. It was introduced in Lollipop and responsible for z-ordering too. Copy your layout to layout-v21 and set android:elevation="0dp" for the button.

I saw this on another thread somewhere but you can put this into your elements :
android:stateListAnimator="#null"
as others said the button elevation in lolipop and up is changed so its covering the other elements.
for example in my button view below i use it and it shows:
<FrameLayout
android:id="#+id/ib_one_container"
android:layout_width="38dp"
android:layout_height="38dp"
android:layout_marginLeft="5.3dp"
android:orientation="vertical"
android:padding="3dp"
>
<Button
android:id="#+id/ib"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clickable="true"
android:gravity="center"
android:stateListAnimator="#null"
android:textSize="11sp" />
<com.mobile.pomelo.UI.customViews.CustomDiagonalLineView
android:id="#+id/diagaonal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="visible"
/>
</FrameLayout>

I had a similar problem with an FrameLayout that I was using as a progress indicator overlay (when my screen is busy loading).
I didn't want to add XML to every other element in my app, so I just added an elevation to to my FrameLayout overlay. Note the clickable attribute which ensures that click events are not passed down to the buttons underneath.
Progress Indicator overlay:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/progress_overlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.4"
android:background="#android:color/black"
android:animateLayoutChanges="true"
android:elevation="10dp"
android:clickable="true"
android:visibility="gone">
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true"/>
</FrameLayout>
Including the progress indicator in my other views:
<include layout="#layout/progress_overlay"/>
Original solution from: https://stackoverflow.com/a/29542951/1912127

Edittext outline box not visible

I have 2 EditText's in a layout. For some reason, the border outline that shows in the preview here(http://gyazo.com/7cb0d1d2c5807e65f65164957b4d13b8) doesn't show when I run the app on my phone or on the emulator(http://gyazo.com/428bb31a974e43ccb52aaaee61f3b355). I would like to see that box that outlines the Edittext's in the preview screen.
If anyone could try and see what the issue is, that would be great, thanks.
XML containing the 2 Edittext's:
<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="#drawable/background_medium"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".List" >
<LinearLayout
android:id="#+id/Text1andText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_weight="50"
android:ems="10"
android:hint="#string/Text2" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="110dp"
android:layout_weight="50"
android:ems="10"
android:hint="#string/Text2" />
</LinearLayout>
</LinearLayout>

This is a Theme problem. Your device is using Holo Theme. Try to change your Theme as desire (ui.light /ui.dark)in your application manifest.