Develop Reference

ListView with CardViews strange behavior with margin & padding

I've implemented a ListView with CardViews inside following some online tutorials.
Fragment of layout containing the list
<ListView
android:id="#+id/interactions_list"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"
android:visibility="invisible"
android:layout_alignParentTop="true"
android:divider="#000000"
android:dividerHeight="4dp"
/>
Element layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical"
>
    <android.support.v7.widget.CardView
android:background="#00000000"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp"
android:id="#+id/cv">
        <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dip">
<TableRow android:padding="5dip">
<ImageView
android:id="#+id/pkicon"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="3dp"/>
<LinearLayout android:id="#+id/lnlayout"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:layout_margin="3dip">
<TextView
android:id="#+id/pkname"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:textColor="#000000"
android:textSize="20sp"/>
<TextView
android:id="#+id/pknot"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:textColor="#606060"/>
</LinearLayout>
</TableRow>
</TableLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>
Now I am encountering strange behavior when user taps a card, as seen on this screenshot:
The card is shown correctly, but when tapped, the ripple effect covers the LinearLayout element and the card has a solid opaque background.
Expected behavior: the background behind the card remains white, the ripple effect occurs only on the card.
Please help out.

this is happening because your parent view is linear layout that's the reason ripple is being created on it use
app:cardBackgroundColor="?selectableItemBackground"
or
android:background="?selectableItemBackground"
or
android:foreground="?selectableItemBackground"
in the cardview layout and set you click listener to this cardview layout not on the parent ie. LinearLayout.

Maybe changin the LinearLayout width and height to wrap_content may solve the problem
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">

2 Images On Top of Each Other - XML - Android

So I want to use 2 images. One should be on top of the other but smaller, so that the border of the image that's behind is only shown.
Take a look at these 2 photos.
Image that's behind (The border Image)
[IMG]http://i66.tinypic.com/25zgguh.jpg[/IMG]
Image that should be inside the border
[IMG]http://i67.tinypic.com/10mpgt4.jpg[/IMG]
XML CODE
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<ImageView
android:id="#+id/fragment_poi_list_item_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
I was thinking if I could add an android:background="First Image" and make my Image view center but leaving some space on the edges for the background to be shown.
Would have posted 2 more images showing how the app is and how it should look, but the site won't let me post more than 2 links cause my reputation is lower than 10 -_-
Thanks in advance for the help!!!

Do it like this:
<com.inthessaloniki.cityguide.view.SelectorRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_poi_list_item"
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_size"
android:minHeight="#dimen/fragment_poi_list_recycler_item_size"
android:listSelector="#drawable/selector_clickable_item_bg_inverse">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_image"
tools:context=".MainActivity">
<ImageView
android:id="#+id/view"
android:layout_margin="5dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/foreground_image" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/fragment_poi_list_recycler_item_panel_height"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="#dimen/global_spacing_xs"
android:paddingRight="#dimen/global_spacing_xxs"
android:background="#color/fragment_poi_list_recycler_item_panel_bg">
<TextView
android:id="#+id/fragment_poi_list_item_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="2"
android:ellipsize="end" />
<TextView
android:id="#+id/fragment_poi_list_item_distance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_grid_distance"
android:drawablePadding="#dimen/fragment_poi_list_recycler_item_icon_padding"
android:textAppearance="#style/TextAppearance.CityGuide.Body1.Inverse"
android:fontFamily="sans-serif"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>

hope I got it clear, you could simply use two layout and adjust margin for the small one.
put your images as RelativeLayout background or use ImageView in layouts
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="25dp"></RelativeLayout>
</RelativeLayout>

Android layout objects placement

I have this simple activity in my android app but I don't know how to place my button so it appears at the same position on various screen sizes.
I want the button to always be placed at the bottom of the screen. The screenshot shown is from a phone screen. When displayed on a larger screen the button is higher up.
How can I fix this?
Thanks
See this screenshot

You can use RelativeLayout with this parameter (android:layout_alignParentBottom="true")
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Click Me!"/>
</RelativeLayout>

You should use a RelativeLayout
If you have a RelativeLayout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your button at the bottom doesn't show then probably the layout above it takes all the space. In this case you can put the button first in your layout file and position the rest of the layout above the views with android:layout_above.

Have a look a RelativeLayout. Use this ViewGroup and add a Button inside it with alignParentBottom
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentBottom="true"
android:text="HORAIRE"
android:layout_margins="<your_margin_in_dp>" />
</RelativeLayout>

Make footerButton.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="HORAIRE"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
And add it in all your layout file like below line:
Android Activity_Layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
<!-- Content above footer -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content goes here"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
Hope it will solve your problem

This is what I ended up doing. Thanks to everyone who posted, it helped me get in the right direction!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="xxxx.MainActivity"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dernières nouvelles Twitter"
android:id="#+id/textView"
android:textStyle="bold"
android:textSize="17dp"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp"
android:layout_alignParentTop="true"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/listView_tweets"
android:layout_above="#+id/buttonDisplay"
android:choiceMode="none"
android:paddingTop="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horaire"
android:layout_margin="5dp"
android:id="#+id/buttonDisplay"
android:onClick="buttonGotoDisplay"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>

How would I use a ScrollView inside a FrameLayout?

I'm having a lot of trouble getting my ScrollView to function properly. I'm using a Master-Detail design. The Master scrolls, since it's a listView. The Detail when selected will display the scrollbar implemented in my XML for a couple seconds when the Activity is inflated before disappearing (Stackoverflow won't allow me to post the screenshot of the error since this is my first post)
When I try to scroll the Detail Activity with touch input nothing happens. I've tried copying and pasting Mel's solution to what seems like an identical problem in the post at ScrollView doesn't work. I've also tried every conceivable combination of match_parent and fill_parent for the parent, child, and ScrollView itself. Any help is appreciated. My XML code is below:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ItemDetailActivity"
tools:ignore="MergeRootFrame">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2"
>
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/bmp1"
android:layout_alignParentTop="true"
/>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2">
<!-- Table Row 0 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow0">
<TextView
android:id="#+id/priWeapon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priWeapon" android:textColor="#000" android:textStyle="bold"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp" android:textStyle="bold"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
<!-- Table Row 1 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow1">
<TextView
android:id="#+id/priWeaponRange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priMaxRange" android:textColor="#000"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponRangeEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>

I found a solution! Instead of trying to apply the formatting to the Activity XML itself, I cut and pasted it into one of the Activity's Fragment XMLs, which didn't have a frameLayout. Because of this change it now scrolls perfectly while maintaining the title bar on top throughout the scroll, exactly the behavior that I wanted. I've posted the final code below. If you have a solution that would still allow me to use a scrollView inside a FrameLayout though I'd be more than happy to see it for future reference. Thank you for your help!
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2"
>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_detail"
style="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textIsSelectable="true"
tools:context=".ItemDetailFragment"/>
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/bmp1"
android:layout_alignParentTop="true"
/>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2">
<!-- Table Row 0 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow0">
<TextView
android:id="#+id/priWeapon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priWeapon" android:textColor="#000" android:textStyle="bold"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp" android:textStyle="bold"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>

Your goal is to use the maximal screen size for the ImageView and then scroll down to the (at first invisible) TableLayout? Thats afaik not possible. When you set android:layout_height="fill_parent" on ImageView it uses the the maximum possible (in your example all of the screen size) space. So no TableLayout is rendered and there is no need for scrolling. You should set the android:layout_height="wrap_content" in the ImageView.
Some notes on the source code:
Use match_parent instead of fill_parent. It's renamed since API Level 8
You have a useless android:layout_below="#id/picture" in the TableLayout. May an artifact from a previous version with RelativeLayout?
Remove the namespace definitions in the TableLayout

What am i missing in this layout

I want to implement a layout like this for each row of a listview
So i created a container like this
<?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="wrap_content"
android:orientation="horizontal"
android:clickable="false"
android:focusable="false"
>
<!--List items goes here -->
</LinearLayout>
In the getView() method of my custom adapter, I inflate this xml for each box in the image above
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="300dp"
android:layout_height="500dp"
android:clickable="true"
android:focusable="true"
android:padding="10dp"
android:background="#drawable/list_item_background"
android:focusableInTouchMode="true">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/cnbc_default_image"/>
<ImageView
android:id="#+id/supportImageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"
android:src="#drawable/video_play_icon"
android:paddingLeft="10dp"
android:layout_above="#+id/title"/>
<TextView
android:id="#id/title"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#+id/description"
style="#style/large_news_title_text_style"/>
<TextView android:id="#id/description"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:maxLines="2"
android:ellipsize="end"
android:textSize="13sp"
style="#style/large_news_title_text_style"
android:textColor="#android:color/white" />
</RelativeLayout>
and then finally add the inflated view to the linearlayout instance using
row.addView(inflatedView);
However, the end result is first box stretching across X axis. If i inspect my layout using HierachyViewer, i do see 3 RelativeLayouts inside a LinearLayout, but the first one is occupying all the space.
The thumbnail image android:id="#+id/thumbnail", seems to be taking up match_parent attribute of the LinearLayout and not its immediate container RelativeLayout.
Clarification
The list view is from ListFragment.
When adding the box layout to the list view row container i use this method call
ViewGroup container = (ViewGroup)inflater.inflate(R.layout.list_view_row_land, parent, false);
View rowItem = inflater.inflate(R.layout.list_view_row_item,null);
container.addView(rowItem);
Solved:
The problem is solved if i modify the layout of the box to
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="500dp"
android:layout_height="300dp"
android:clickable="true"
android:focusable="true"
android:padding="10dp"
android:background="#drawable/list_item_background"
android:focusableInTouchMode="true">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/cnbc_default_image"/>
<ImageView
android:id="#+id/supportImageView"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:visibility="gone"
android:src="#drawable/video_play_icon"
android:paddingLeft="10dp"
android:layout_above="#+id/title"/>
<TextView
android:id="#id/title"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_above="#+id/description"
style="#style/large_news_title_text_style"/>
<TextView android:id="#id/description"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:maxLines="2"
android:ellipsize="end"
android:textSize="13sp"
style="#style/large_news_title_text_style"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
I still don't understand why. So any explanation of why putting a LinearLayout around solves the issue will be helpful.