Develop Reference

Layout Weight distribution wrongly interpreted

I want to define a composite layout where the header and footer LinearLayout blocks take 10% of the view and body block the remaining 80%. Without setting weights, all 3 blocks have the same size, so I have set the weight of header and footer layout to 10 and body to 80 with weight sum 100 but this had an unwanted result that actually is opposite to the one expected, and body despite has the higher weight disappears due to the fact header and footer block take all the available space.
Layout code
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100">
<LinearLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/hf"
android:padding="5dp">
<TextView
android:id="#+id/texthead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample head" />
<ImageView
android:id="#+id/imageh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/him" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="80"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/bd0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/bdf"
android:padding="10dp">
<TextView
android:id="#+id/textbd0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/bdim" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bd1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/bdf"
android:padding="10dp">
<TextView
android:id="#+id/textbd1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/bdim" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/ft"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#drawable/ftf"
android:padding="5dp">
<TextView
android:id="#+id/textft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample footer" />
<ImageView
android:id="#+id/imageft"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/ftim" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Try the following code:
(You can undo the background changes I did, it was just so I could visualize what was going on.)
According to the following post: Android layout weight not working as I thought -- you need to set your wanted attribute to 0dp for layout_weight to work properly.
In summary: by setting the height to match_parent, you are confusing the XML compiler and it doesn't know how to apply layout_weight properly.
<?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="vertical"
android:weightSum="100">
<LinearLayout
android:id="#+id/header"
android:background="#color/material_dynamic_neutral30"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/head"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/black"
android:padding="5dp">
<TextView
android:id="#+id/texthead"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample head" />
<ImageView
android:id="#+id/imageh"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="80"
android:background="#color/teal_200"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/bd0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/cardview_light_background"
android:padding="10dp">
<TextView
android:id="#+id/textbd0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bd1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/teal_200"
android:padding="10dp">
<TextView
android:id="#+id/textbd1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:gravity="center"
android:text="Lorem ipsum" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:background="#color/teal_700"
android:baselineAligned="false"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/ft"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:background="#color/material_dynamic_neutral30"
android:padding="5dp">
<TextView
android:id="#+id/textft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sample footer" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

layout_below in relative layout won't show

i'm trying to make a layout_below the cardview in relative layout but it wont show up in my device where layout_above works. i dont know why it wont work. i think it should be work because it below the cardview. please help what did i miss or wrong.
this is my xml code
<RelativeLayout 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_2"
tools:context=".ExchangeFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/saldo"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/holder" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center_horizontal"
android:text="Will Stitch"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<android.support.v7.widget.CardView
android:id="#+id/saldo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="Saldo"
android:textColor="#color/colorPrimary"
android:textSize="20dp"
android:textStyle="bold" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saldo"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="WillStitch#gmail.com"
android:textSize="10dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
please help why it like this

It is working but your ImageView take all the width and it don't have android:src attribute (so it show nothing) and you don't need the last LinearLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/saldo"
android:orientation="vertical">
<!-- Useless Linear Layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="WillStitch#gmail.com"
android:textSize="10dp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>

Android webview not filling device screen height

I am using a webview to load html data.
I want to place two buttons on the bottom for some functionality.
I have put teh webview and the bottom layout in a frame layout.
Web view shows html data only when i give it some specific height e.g 500dp.
Also the bottom layout also scrolls along with webview.
Please help how i can do this.
<?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="fill_parent"
android:orientation="vertical"
android:padding="10dp" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/newsHeading"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp"
android:text="Heading"
android:textColor="#000000"
android:textSize="18sp" />
<WebView
android:id="#+id/webviewNews"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="30dp" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp" >
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/back1"
android:padding="20dp" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/share11"
android:padding="20dp" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>

I had the same problem and I have fixed it by changing the LinearLayout by a RelativeLayout and setting all the "parent aligments" to the WebView, but this fill the screen.
For your layout, try align your button's LinearLayout to the parent's bottom, and replace the alignParentBottom of the WebView by a layout_above anchored to it. I have tested it and works fine.
Here is the code, try it:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="#+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_above="#+id/linlyt_buttons"/>
<LinearLayout
android:id="#+id/linlyt_buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_alignParentBottom="true">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/rellyt_imagebuttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/black"
android:padding="10dp">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/ic_menu_close_clear_cancel"
android:padding="20dp"
android:contentDescription="Back/Cancel"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#android:drawable/ic_menu_share"
android:padding="20dp"
android:contentDescription="Share"/>
</RelativeLayout>
</RelativeLayout>

Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<WebView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"/>
</LinearLayout>
</LinearLayout>

horizontal scrollview with 3 options on screen

I need to display categories as shown in image.
It should scroll horizontally and also get event when category come to the middle.
I require it without viewpager.
Thanks.

use following layout may be it is useful for your application
<HorizontalScrollView android:id="#+id/hsv" android:background="#null" android:visibility="visible" android:scrollbars="none" android:layout_width="fill_parent" android:layout_height="wrap_content">
<LinearLayout android:orientation="horizontal" android:background="#null" android:layout_width="fill_parent" android:layout_height="wrap_content">
<Textview android:id="#+id/about" android:text="POPULARITY" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Textview android:id="#+id/color"
android:clickable="true" android:text="NEW ARRIVAL" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Textview android:id="#+id/kids" android:text="DISCOUNTED" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>

<?xml version="1.0" encoding="utf-8"?>
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="POPULARITY"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="NEW ARRIVAL"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="DISCOUNTED"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="LOW PRICE"
android:padding="10dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="LOW PRICE"
android:padding="10dp"/>
</LinearLayout>
</HorizontalScrollView>
You can use this for horizontal scrolling.
Also have a look at this - http://viewpagerindicator.com/

How to scroll a scrollview to come a subview in top in Android

I have a scroll view in my activity view,in this layout i will add dynamic content in 'ucontent','pcontent' by inflating another layout in a loop( the number of inflated layout changes with time).I need to scroll the scrollview sv so that the tiltle with 'titlep' comes in top when i click 'titlep'.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/sv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#232323"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/main"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#232323"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/titleu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D84A49"
android:orientation="horizontal"
android:paddingBottom="7dp"
android:paddingTop="7dp" >
<ImageView
android:id="#+id/toggleu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="2dp"
android:src="#drawable/toggleu" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="title1....."
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:id="#+id/ucontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:id="#+id/titlep"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="0dp"
android:layout_marginTop="5dp"
android:background="#D84A49"
android:orientation="horizontal"
android:paddingBottom="7dp"
android:paddingTop="7dp" >
<ImageView
android:id="#+id/togglep"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="2dp"
android:src="#drawable/toggleu" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight=".1"
android:text="title2...."
android:textColor="#ffffff" />
</LinearLayout>
<LinearLayout
android:id="#+id/pcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
How can i do that in my code or in xml?

Have a look at this:
Views
use isFocusable(true)
and on the onClick use requestFocus()