Develop Reference

Contact card ui not displaying as expected

I'm currently trying to build a simple Contacs Card myself. I just want a Profile picture on the top left, about a quarter to a third of the width, and the Name + description on the right side.
No matter what i try, it always looks very similar to the screenshot below.
this is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/activity_standard_padding"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"
style="#style/AppBaseThemeCardBG">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/nowCardStyle">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="top"
android:paddingRight="#dimen/activity_horizontal_margin">
<ImageView
android:id="#+id/schuckCard"
android:scaleType="fitCenter"
android:layout_gravity="top"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:orientation="vertical">
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/schuckHeader"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="JESCO SCHUCK"
android:textSize="#dimen/textSizeVeryLarge" />
<com.mikebdev.douala.widget.RobotoTextView
android:id="#+id/body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:typeface="roboto_condensed_light"
android:text="Description" />
</LinearLayout>
</LinearLayout>
</ScrollView>
This is how it looks like:
I'd like the image to be approximately as wide as the description in the action bar. Obviously i brutally failed here

Use different values for the layout weights. Like 4 for the image and 6 for the content to give it 40‰ of the cards width

Consider using cardslib ( https://github.com/gabrielemariotti/cardslib) to do your card layout. It is very well put together.

Got my stupid Problem fixed:
In the ImageView I have declared android:scaleType="fitCenter" which apparently also centers the ImageView in my Layout.
When changing the scaleType to fitStart I get the result I wanted.

ImageButton in Android xml (image is too small and horrible resolution)

I have the following for 3 Imagebuttons. The way the code stands below, the three buttons look the same.
Problems:
The image doesn't fill the size of the button completely
The resolution of the images are bad. I have the images saved in all res/drawable folders (drawable-hdpi, mdpi, etc). Images were loaded by "Android Icon Set" wizard.
Any ideas? I have been playing with padding and scaleType as I saw them as the solutions on other posts.
<?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:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/abutton"
android:src="#drawable/a_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="5dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/button"
android:src="#drawable/b_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/cbutton"
android:src="#drawable/d_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>

Instead of assigning drawable to the android:src attribute assign it to android:background attribute of the ImageButton.
OR
You can try setting android:adjustViewBounds="true", this will make the ImageButton adjust its bounds to preserve the aspect ratio of its drawable
PS: If you set an image to be the background of your ImageButton, then the image will scale to whatever size the ImageButton is. Other than that, src is a foreground image and background is a background image.
Edit:
<?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:orientation="horizontal" >
<!-- The two linear layouts will have equal widths. -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<!-- The two image button will fill the linear layout along width and have height 150dp -->
<ImageButton
android:id="#+id/abutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<ImageButton
android:id="#+id/cbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/dbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
</LinearLayout>
Hope this helps.

Try
by removing padding and set background as 'null'.
In case of resolution, I think it was taking low resolution image.
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:background="#null"
android:scaleType="fitXY"/>

I faced the same problem. No other worked for me. At last it was a simple issue. By default, padding is existing around ImageButton. so use:
<ImageButton>
...
android:padding="0dp"
...
</ImageButton>
It will fix the issue.

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=""

Layout repeats on device but looks fine on emulator when adding image in a Relative Layout

let me try to explain clearly with what I want here. I have a RelativeLayout that contains a header image and the content below it.
Now, when i have a header image and a list view below it, the page fits the screen in the device properly, the layout does not repeat.
But when I place an image below the header image, the layout repeats in the device. Meaning i could see 2 header images in the device. Some page, I could see half of the header image that is not supposed to be there (repeated header image). However, in emulator, all the pages looks fine and fit the screen nicely.
I tried changing to LinearLayout, RelativeLayout inside LinearLayout, Relative Layout, it gave me the same outcome. I hope someone could tell me why this happened.
Thanks.
Attached is my layout.
<?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="#drawable/bg" >
<ImageView
android:id="#+id/header"
android:contentDescription="#string/image"
android:src= "#drawable/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/journal"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_alignTop="#+id/kick"
android:adjustViewBounds="true"
android:contentDescription="#string/image"
android:padding="10dp"
android:src="#drawable/favourite_journal" />
<ImageView
android:id="#+id/kick"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_toRightOf="#+id/journal"
android:layout_below="#+id/header"
android:adjustViewBounds="true"
android:contentDescription="#string/image"
android:padding="10dp"
android:src="#drawable/favourite_kick" />
<ImageView
android:id="#+id/labour"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="#+id/journal"
android:layout_alignLeft="#+id/journal"
android:adjustViewBounds="true"
android:contentDescription="#string/image"
android:padding="10dp"
android:src="#drawable/favourite_labour" />
<ImageView
android:id="#+id/share"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_below="#+id/kick"
android:layout_alignLeft="#+id/kick"
android:adjustViewBounds="true"
android:contentDescription="#string/image"
android:padding="10dp"
android:src="#drawable/favourite_share" />
</RelativeLayout>
</RelativeLayout>

I managed to solve it.
I would have to set the layout_width and layout_height of the inner RelativeLayout to fill_parent.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/header"
android:orientation="vertical">
Thanks #Ziteng Chen for hinting me on the position.
android:layout_below="#+id/header"
and also #BobbiHoddi for your suggestion to remove adjustViewBounds. It helped in other errors that I encountered for my images.
android:adjustViewBounds="true"

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>