Develop Reference

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.

Unwanted paddings or margin in ImageView

I am brand new to android to android development and just playing around with xmls for building layouts. I wrote the following code stuffs for printing a hello ubuntu and inserting an image in it. But the Image seems to have a unwanted upper and bottom padding or margin (not sure what it's called) which looks wierd. Please anyone help me removing it. Here is my code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_margin="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#color/colorPrimary"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:src="#mipmap/Ubuntu"
android:layout_margin="0dp"/>
</LinearLayout>
Screenshot here(see the preiew on right side):

those extra padding is autogenerated since the android would try to get the original aspect ratio. please try below
scaletype = "fitCenter"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"

You should use android:scaleType (see documentation).
This will allow you to tell the view how to react if the image does not have the exact size of the view.

You can try
android:adjustViewBounds="true",
it works for me.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_margin="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#color/colorPrimary"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/asd"
android:layout_margin="0dp"
android:adjustViewBounds="true"
/>
</LinearLayout>

There is a margin above the imageview but it is not the part of imageview. It is actually because of margin applied to the textview above the imageview. You can do the following code.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#00ffff"
android:orientation="vertical"
android:padding="10dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:text="Hello Ubuntu (16.06LTS)"
android:background="#000000"/>
<ImageView
android:layout_width="371dp"
android:layout_height="match_parent"
android:padding="0dp"
android:background="#ff0000"
android:layout_margin="0dp"
/>
EDIT -
In your above code, you have applied Margin to all the sides of the view. (android:layout_margin="8dp")
This gives the margin to the view from all the 4 sides including the bottom one, which appears as the imageview's top margin.
Hence, what you need to do is to apply margin to the view side by side by changing
android:layout_margin="8dp"
to
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginUpper="8dp"
EDIT 2 -
Make sure you have 0 padding and 0 margin in the parent (root) container.

Android XML Layout - ImageView taking all space

This is my first post on Stackoverflow.
My question is related to ImageViews : I have a simple XML layout file composed of two LinearLayouts included in a general LinearLayout.
The first LinearLayout contains a simple ImageView, and the second one contains three buttons.
My problem is that the ImageView takes all the space on the screen and therefore the three buttons aren't displayed.
I've done quite a lot of research, I've tried to change everything I could to make it work and the only thing that did the trick was to turn the ImageView layout_width attribute into a dp value.
Why do I have to do that? Is it somehow related to the dimension of the original picture (1280 x 800)?
The XML file is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>

For anyone having this issue, there is a quick solution for that.
In your imageView XML add the following property:
android:adjustViewBounds="true"
for. eg
<ImageView
android:adjustViewBounds="true"
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#mipmap/ic_launcher"/>
If you are using a Constraint Layout, don't forget to add the constraints.

You could use android:layout_weight in order to define how much space should be taken by the layouts:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearMainCreateTape"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
tools:context="com.example.anthony.walkmanfreeversion.CreateTapeActivity" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:src="#drawable/highresoltape1"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button3"/>
</LinearLayout>
</LinearLayout>
In the example above both inner layouts have the same weight, so they bot fill 50% of the height.
If all views reserve the entire available height (match_parent) then the first one wins. So in your case the top level layout (linearMainCreateTape) fills the whole height and the layout which contains the ImageView does the same. So there's nothing left for the three buttons below it.

Android - Layout not in uniform

I have a horizontal list of images in my android application. But the problem is some of the images seems to not follow the layout I've defined in my xml. Like this:
my layouts look like this:
mainlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/back_shop_list"
android:orientation="horizontal">
<com.devsmart.android.ui.HorizontalListView
android:id="#+id/shop_hlist_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:scrollX="1dp"
android:scrollY="1dp"
android:overScrollMode="always" >
</com.devsmart.android.ui.HorizontalListView>
</LinearLayout>
then my listlayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:translationY="200dp" >
<FrameLayout
android:id="#+id/framelayout"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:paddingLeft="8dp"
android:paddingRight="8dp" >
<ImageView
android:id="#+id/img"
android:clickable="true"
android:adjustViewBounds="true"
android:layout_width="360dp"
android:layout_height="360dp" />
<ProgressBar
android:id="#+id/img_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
android:translationY="150dp"
android:translationX="140dp" />
</FrameLayout>
<TextView
android:id="#+id/labelText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#dc6800"
android:textSize="16sp"
android:textStyle="bold" />
<!-- Description label -->
<TextView
android:id="#+id/desc"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:translationX="10dp"
android:textColor="#acacac"
android:paddingBottom="2dip">
</TextView>
</LinearLayout>
My guess is that the size of my image is lesser than what my ImageView layout_width and height. Or I dont really know what causes this problem.
But any help will do, please. Thanks.
EDIT: What I really wanted is that if the image is like image 4 and image 5, it should not have those spaces. I've tried getting the size of the image from my ImageLoader then set the layout parameters height and width in there while images are loaded. But it looked worse.
Are there other ways in which i can dynamically adjust my ImageView if ever the images are like image 4 and 5?

If actually you want to make the image occupy the desired space
try adding this image View property to your ImageView
You can try others I usually use fitXY out of the predefined list you will get there in XML Layout
android:scaleType="fitXY"
so as to make this property work we also need
android:adjustViewBounds="true"
that you have already added in your case
If actually you want to avoid on blank spaces and let the image occupy as much space as it want
In my layout I am using two image views to show a demo
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_numbers"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="#+id/tv_numbers"
android:layout_below="#+id/tv_numbers"
android:layout_marginTop="5dip"
android:layout_marginRight="10dip"
android:orientation="vertical">
<ImageView
android:id="#+id/textView1"
android:layout_width="200dip"
android:layout_height="200dip"
android:src="#drawable/desert"/>
<ImageView
android:id="#+id/textView2"
android:layout_width="200dip"
android:layout_height="200dip"
android:background="#drawable/desert"/>
</LinearLayout>
ImageView 1 is assigning image as Source using android:src="#drawable/desert"
and below is the result as you can notice that it is showing WhiteSpace arround it.
ImageView2 is assigning image as Background using android:background="#drawable/desert"
and below is the result as you can notice that it is showing no WhiteSpace arround it.
Or try using these attributes to make it possible
android:maxHeight=""
android:maxWidth=""
android:minHeight=""
android:minWidth=""

android imageview takes extra black space

the imageview takes extra [black] space and i dont know why
ok this imageview should wrap content but instead..
photo explains the problem
this is the code
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/map" /><ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="-20dp"
android:src="#drawable/photo" />
<ImageView
android:id="#+id/blxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/blxx" />
</LinearLayout>
</ScrollView>

Try the below:
android:adjustViewBounds="true"
This will remove the extra padded space

first possible reason for your problem:
sometimes when the image is too small, it can't scratch anymore then some limit. after that limit - what happens is what you see - blank space claimed by the imageView where additional scratch of the image was expected. I advice you to take larger picture (with bigger resolution)
Second possible reason:
add to your imageView properties on the xml file the following attribute:
android:scaleType="fitXY"

android:layout_gravity="center"
Above line is centering the image to fit inside your ImageView. Try without it. If not, set gravity to "fill" and try again.
Also remove one of the duplicates of blxx as noted.

hope this ll help you
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_gravity="center">
<ImageView
android:id="#+id/map"
android:layout_width="fill_parent"
android:layout_height="fill_content"
android:src="#drawable/map" />
</LinearLayout>
</ScrollView>