Develop Reference

Align Bitmap Image inside ImageView - CS50 Pokedex Android

I have been working on CS50 and now I am tracking android. I almost finished my PSet Pokedex, but small thing is bothering me.
I am trying to align bitmap image on top of ImageView, but I could not do it. Could you please help me? I tried "scaletype", "layout_gravitiy" etc. But it does not seem to work. I want image to be just below description stating that this should be changed by the java code.
Please see current view here
<?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"
tools:context=".PokemonActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_name"
android:textAlignment="center"
android:textSize="18dp"
android:textStyle="bold"
android:paddingTop="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_number"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type1"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type2"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/pokemon_button_catch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:paddingTop="5dp"
android:textSize="24dp"
android:onClick="toggleCatch"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_description"
android:textAlignment="center"
android:textSize="16dp"
android:textStyle="bold|italic"
android:paddingTop="50dp"
android:text="This is testing something, this should changed by the java code."/>
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Welcome to StackOverFlow !
If there is no special requirement than no need to use match_parent inside ImageView. You can do following adjustment-
<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"
tools:context=".PokemonActivity">
..............
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Happy coding !

sorry. I was roasting snow in a furnace. I found out that actually source image is one to blame. Image size does not wrap the content but it has extra space around content. This is the reason when it is enlarged, there is space between text and image.

RecyclerView Item Template

I have been struggeling the last 2 hours to get the layout of an RecycleView working the way I want it to. Basically all I want is that three items of the RecycleView fit onto one screen width, like this: Example
Where each of the boxes contains the image.
This is what it currently produces:
Current State
This is what I got:
listitem.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:cardCornerRadius="4dp"
app:cardMaxElevation="2dp"
app:cardElevation="1dp"
android:layout_centerInParent="true"
android:weightSum="3">
<GridLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="4"
android:rowCount="5"
android:layout_weight="1">
<ImageView
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_row="0"
android:layout_rowSpan="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:id="#+id/image_view"
android:src="#drawable/ic_launcher_background"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="0"
android:layout_column="0"
android:layout_columnWeight="4"
android:layout_rowWeight="2"
android:layout_gravity="center" />
<CustomFontTextView
android:layout_row="3"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_gravity="left"
android:gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Canada"
android:id="#+id/name"
android:textColor="#fff"
android:layout_marginLeft="20dp"
android:textSize="20dp"
android:autoSizeTextType="uniform"
android:autoSizeMinTextSize="24dp"
android:autoSizeMaxTextSize="48dp"/>
<Space
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_row="3"
android:layout_column="0"
android:layout_columnWeight="4"
android:layout_rowWeight="2"
android:layout_gravity="center" />
<CustomFontTextView
android:layout_row="4"
android:layout_rowSpan="1"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Canada"
android:gravity="left"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:id="#+id/description"
android:layout_marginTop="10dp"
android:textColor="#8Fffffff"
android:layout_marginBottom="10dp"
android:autoSizeTextType="uniform"
android:textSize="16dp"
android:autoSizeMinTextSize="18dp"
android:autoSizeMaxTextSize="24dp"/>
</GridLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
And the activity:
<android.support.constraint.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="activities.MainActivity"
android:background="#f2f2f2">
<android.support.v7.widget.RecyclerView
android:layout_marginTop="100dp"
android:layout_marginBottom="100dp"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/recyclerView"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
</android.support.constraint.ConstraintLayout>
That is almost what I wanted but the items are now sized based on the length of the description. Instead I want the description to wrap if needed. Can someone elaborate on why this is happening an how to fix it?

why this is happening
You set the width of the RelativeLayout as wrap content. It makes the widh wrapped to the content as the name suggest.
How to fix it
You have to change it to a fixed value, say 200dp.
Here are some other things I have noticed in the provided layout:
You should consider using "match_parent" instead of "fill_parent" because it is deprecated since API level 8.
layout_centerInParent="true" have no effect in the CardView because it is already filled to the parent
Remove the line weightSum="3" in the CardView because it won't work on RelativeLayout

Android Soft Keyboard Disrupt's My Layout

I know a ton of questions on this topic have been asked but none seem to work for me. I have a linear layout with an an edit text and icons below but when the keyboard pops up it covers the icons and half the edit text.
My Manifest File:
<activity
android:name="com.social.pages.Post"
android:windowSoftInputMode="stateVisible|adjustResize"
android:screenOrientation="portrait" >
</activity>
My Layout File:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/feed_bg" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingTop="#dimen/feed_item_padding_top_bottom" >
<!--
<LinearLayout
android:id="#+id/stories_post_text"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
-->
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_parent_rounded_corner"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/tag" />
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/take_pic" />
</LinearLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
No Java code has been written yet.

You're setting the EditText element to 300dp height which prevents anything from moving up. I was able to fix this by wrapping the EditText and following LinearLayout (that houses your images) in a RelativeLayout. By doing this, you can set the image-housing LinearLayout to alignParentBottom="true". I believe this is your desired effect.
<?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" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:orientation="vertical" >
<!-- ADDITION -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp" >
<!-- ADDITION ^^^ alignParentBottom-->
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
</LinearLayout>
<!-- ADDITION -->
</RelativeLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
NOTE: I replaced your drawable src with "dummy_image"

THe only thing you can do about the soft keyboard is to set the android:windowSoftInputMode in the manifest (or to change it on the fly programatically). The allowed modes are basically nothing (just let the keyboard pop up and cover whatever), pan (scrolls the app such that the cursor is on the screen), and resize (resizes your app to lay out completely above the keyboard).
You obviously want resize. However to make that work, your layout needs to be resizable- there needs to be some element that can be shrunk and still fit your app in the smaller size, or there needs to be empty space that can be shrunk. If you have to much on screen, that won't work. And in that case Android will still ensure that the cursor is on screen, but will not do anything else.
Looking at your layout- I don't see anything that can shrink. You may be able to refactor it to make the edit text use fill_parent so it can be shrunk, but that would require making it (or its direct parent) layout_above and layout_below two other elements so it is sized to be the remaining space between them. That's about all I can see for you to do, other than remove elements.

Nested LinearLayouts don't work

I have a root vertical LinearLayout which contains few TextViews and others LinearLayout with default orientation (horizontal). However, from some reason, none of these nested LinearLayouts is displayed - I have a hunch that they are overflowing the screen width but I am sure how it is possible because I have set the parents orientation to vertical. Here is my code
<?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:layout_marginLeft="5dp"
android:layout_marginRight="5dp">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoHeadline1"
android:textStyle="bold"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoText1"/>
<!-- Elements are shown only up to infoText1 -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoText2"
android:textStyle="bold" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoText3"/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoText4" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/infoText5"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
I am trying to layout the text into something similar to this page. The reason for first nester LinearLayout is that I need to make text in the middle of the paragraph bold.
So what is the correct way for nesting layouts in Android?

You don't need to include:
xmlns:android="http://schemas.android.com/apk/res/android"
in any of the nested LinearLayouts. Only the first. Perhaps that is causing your nested layouts to act strangely.
Would have commented if I had enough reputation...

Observation::
The code xmlns:android="http://schemas.android.com/apk/res/android"
must only be present in the root view Layout
Instead you have multiple times defined in your code
Change your code to as below::
<?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:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:layout_marginTop="10dp"
android:text="infoHeadline1"
android:textStyle="bold" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="infoText1" />
<!-- Elements are shown only up to infoText1 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="infoText2"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="infoText3" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="infoText4" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="infoText5"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Snapshot:

Android Custom ListViewItem Layout

I dont quite get the layout of my List View Item doesnt show like I want it to.
I hope somone would give me some hints since i cannot make it work for quite some time now.
What i want is as follows:
Here is my approach:
<?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="20dip"
android:padding="6dip">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="3dip">
<TextView
android:id="#+id/nametext"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="7dip">
<ImageView
android:id="#+id/photo"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginRight="6dip"
android:src="#drawable/icon" />
<LinearLayout
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="fill_parent">
<TextView
android:id="#+id/toptext"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:gravity="center_vertical"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/middletext"
android:singleLine="true"
android:ellipsize="marquee"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/bottomtext"
android:singleLine="true"
android:ellipsize="marquee"
/>
</LinearLayout>
<ImageView
android:id="#+id/stars"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="6dip"
android:src="#drawable/icon" />
</LinearLayout>
Any help would be appreciated.
I already tried different sizes and a RelativeLayout. No change.
It doesnt look anythik like i thought it should.
edit three blanks missing
edit2 added pic

You could do this with LinearLayouts, but you'll need three nested layouts:
A vertical LinearLayout containing everything.
A horizontal LinearLayout containing everything aside from the heading.
A vertical LinearLayout containing the non-heading TextViews.
The inner vertical LinearLayout will probably need android:layout_weight="1" so it stretches to fill the available space but doesn't squeeze out the right-hand ImageView.
That's all very expensive, particularly when multiplied by the numerous views in a ListView. A RelativeLayout can get this done with only one layout.
<?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="wrap_content"
android:padding="6dip" >
<TextView
android:id="#+id/textView1"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:textSize="40sp">
</TextView>
<ImageView
android:id="#+id/imageView1"
android:layout_below="#+id/textView1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" >
</ImageView>
<ImageView
android:id="#+id/imageView2"
android:layout_below="#+id/textView1"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon" >
</ImageView>
<TextView
android:id="#+id/textView2"
android:layout_below="#+id/textView1"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
<TextView
android:id="#+id/textView3"
android:layout_below="#+id/textView2"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
<TextView
android:id="#+id/textView4"
android:layout_below="#+id/textView3"
android:layout_toRightOf="#+id/imageView1"
android:layout_toLeftOf="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="TextView" >
</TextView>
</RelativeLayout>
Edited for formatting and to add:
This is the result. Of course, text and image sizes need adjusted, but the basic result is what you've described.

Im not sure if you really want to have a 3dip headline and 7dip content...
if you want the stuff inside the outer linearlayout vertical arranged, use
android:orientation="vertical"
in the parent LinearLayout. to arrange the three items in the content part of your layout, you might use android:weight or android:alignParentLeft / Right.
I fear im not sure waht you want to do, so i can not edit your layout :(