Develop Reference

Horizontal scroll view with child TextViews not scrolling

I am showing the user some stats. There is a lot of information on the screen so space is cramped. I decided to use a horizontal scroll view which contains 9 TextViews in total. However, I only want to display three of these text views at a time.
Like so:
(The arrow is a just separate image view that just show's the user they can scroll)
This is fine and how I want it to look. However, there is 6 other stats which I need to show. I wish to be able to scroll to the right and three new text views to appear (and back to the left when I get to the last three stats). This horizontal scroll view is the parent of a LinearLayout which has 9 child TextViews. I tried putting every three TextViews in there own linear layouts but was prevented because the Horizontal Scroll View can only have one LinearLayout child.
I currently have the other 6 stats visibility to gone because they are currently added below the top 3 stats in a vertical order like this image shows:
My plan was originally to pro-grammatically display the next three stats and hide the original when scrolled but before I programmed this I tested to see if the first three were scroll-able but they don't react when I try to scroll.
How do I got about this?
Here is my current xml:
<HorizontalScrollView
android:id="#+id/sv_horizontalP1Stats"
android:layout_width="0dp"
android:layout_height="97dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="#+id/sv_horizontalP2Stats"
app:layout_constraintEnd_toStartOf="#+id/sv_player1PastScores"
app:layout_constraintHorizontal_bias="0.596"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_navArrowP1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/tv_legAvg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="#string/tv_LegAVG"
android:textSize="13sp" />
<TextView
android:id="#+id/tv_matchAVG"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="#string/tv_MatchAVG"
android:textSize="13sp" />
<TextView
android:id="#+id/tv_first6Avg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="#string/tv_first6AVG"
android:textSize="13sp" />
<TextView
android:id="#+id/tv_100plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_100plus"
android:visibility="gone" />
<TextView
android:id="#+id/tv_140Plus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_140plus"
android:visibility="gone" />
<TextView
android:id="#+id/tv_180s"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_180"
android:visibility="gone" />
<TextView
android:id="#+id/tv_bestFinish"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_bestFinish"
android:visibility="gone" />
<TextView
android:id="#+id/tv_bestLeg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_BestLeg"
android:visibility="gone" />
<TextView
android:id="#+id/tv_doublesPercentage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/tv_doubles"
android:visibility="gone" />
</LinearLayout>
</HorizontalScrollView>

All you need to do is create multiple linear layouts inside your main linear layout. Each containing 3 textviews and change the orientation of main linear layout to horizontal and you're good to go.
e.g :
<HorizontalScrollView
android:id="#+id/sv_horizontalP1Stats"
android:layout_width="0dp"
android:layout_height="97dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintBottom_toBottomOf="#+id/sv_horizontalP2Stats"
app:layout_constraintEnd_toStartOf="#+id/sv_player1PastScores"
app:layout_constraintHorizontal_bias="0.596"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_navArrowP1">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"> <!-- Changing orientation to horizontal -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"> <!-- Group 1 of TV -->
<TextView
android:id="#+id/tv_legAvg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/tv_LegAVG"
android:textSize="13sp" />
<TextView
android:id="#+id/tv_matchAVG"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/tv_MatchAVG"
android:textSize="13sp" />
<TextView
android:id="#+id/tv_first6Avg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="#string/tv_first6AVG"
android:textSize="13sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"> <!-- Group 2 -->
// .. Next three
</LinearLayout>
// .. And soo on
</LinearLayout>
</HorizontalScrollView>`

android: How to make view fill available space

I couldn't really find an answer for this problem, all I did find was localized questions. Let's say I have this:
I can successfully do this. However, I want it that if "BUTTON2"'s visibility is set to GONE, make BUTTON1's width take as much as it can. So it will look like this:
Currently here's non-working code:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_gravity="center">
<com.rey.material.widget.Button
android:id="#+id/button2"
style="#style/Material.Drawable.Ripple.Wave.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="goToOccasion"
android:padding="20dp"
android:text="#string/join"
app:rd_enable="true"
app:rd_rippleColor="#android:color/darker_gray"
app:rd_rippleType="wave"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_toEndOf="#+id/joinOccasionBTN"
android:layout_marginStart="87dp"
android:layout_alignBottom="#+id/joinOccasionBTN" />
<com.rey.material.widget.Button
android:id="#+id/joinOccasionBTN"
style="#style/Material.Drawable.Ripple.Wave.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="goToOccasion"
android:padding="20dp"
android:text="#string/join"
app:rd_enable="true"
app:rd_rippleColor="#android:color/darker_gray"
app:rd_rippleType="wave"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
That results in this:
When button2 is visible, and it results in the same as the pic above but without button2 ("JOIN").

An easy way to do this is using the android:layout_weight attribute in a LinearLayout.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="10dp"
android:layout_gravity="center">
<com.rey.material.widget.Button
android:layout_width=0dp
android:layout_height="wrap_content"
android:layout_weight=1
...
/>
<com.rey.material.widget.Button
android:layout_width=0dp
android:layout_height="wrap_content"
android:layout_weight=1
...
/>
</LinearLayout>
This way, if one of your buttons changes visibility from visible to gone then the other button will fill the remaining space.

Instead of relativeLayout, use gridView and add your buttons in it.
If you set on column your button will take all the place.
if you set two columns, gridview will adapt automatically your view to two perfectly sized columns...
two columns :
<GridView
android:layout_width="match_parent"
android:numColumns="2"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</GridView>
one column:
<GridView
android:layout_width="match_parent"
android:numColumns="1"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/button2"
android:visibility:"gone"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</GridView>
hoping this helps.

Align multipile images evenly horizontaly

I have 2 image views in a linear layout like so:
<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>
How can i align the two images so that they are evenly placed within the linear layout. Something similar to "justified text" so that it has equal spacing on the left and right of the image from each other and the border of the screen.

it's not the best solution, but it should work:
<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false"
/>
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false" />
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="0dp"
android:enable="false"
android:focussable="false"
android:clickable="false" />
</LinearLayout>
if this is for some kind of landing it's ok but if it's a hard used layout think about implementing it dinamically via javacode to make it faster.
EDIT: i added 3 attributes ( enable, focussable, clickable ) to disable the placehodler view so that they'll be considered only at measures/layout time, but not during events handling.

// try this way here is alternative to use two sub linear layout rather three View.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/home_icon_row"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>
</LinearLayout>

You should be able to get similar effect by using layout_width="0dp", layout_weight="1" and scaleType="centerInside" for both ImageViews.
The only difference is that space between the images can be bigger.

<LinearLayout
style="#style/home_icon_row"
android:orientation="horizontal"
android:padding="#dimen/padding">
<ImageView
android:id="#+id/ibtn_home_bus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_bus_selector"
android:layout_marginRight="#dimen/padding"/>
<ImageView
android:id="#+id/ibtn_home_butoday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ico_butoday_selector" />
</LinearLayout>

Add column border to gridview in android

I am new to gridview layout. could you please help me out how can we add divider/separator to grid view, as we have for tables
Please find the below image

Sadly there is no automatic way to do this. You could try this. Set a 1 or 2 pixel padding around each View in the table, and you should have a border between.
Source : Android GridView with Separator

To create such type of layout you have to assign a Frame to your GridView Item. Lets consider this is your Item's layout :-
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000" >
<ImageView
android:id="#+id/image_view_product_cell_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<RelativeLayout
android:id="#+id/rel_lay_product_image_frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/image_view_product_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ImageView
android:id="#+id/image_view_product"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/image_content_description" />
<ProgressBar
android:id="#+id/progress_bar_product"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/custom_progress_bar"
android:indeterminateDuration="800" />
</RelativeLayout>
<TextView
android:id="#+id/text_view_product_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
<TextView
android:id="#+id/text_view_product_brand"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/text_view_product_title"
android:gravity="center"
android:singleLine="true"
android:textIsSelectable="true" />
in the above layout you can assign your frame to the GridViewItem and provide required margin.

How to hide all elements in a Layout in Android at once?

I'm developing an Android app in eclipse.
I have an XML which has 2 linear layouts next to each other. The left one has several buttons, which make content visible in the right. However, I would not only like these buttons to make specific content visible, but hide (setVisibility.GONE) all the other stuff in that layout. I have already tried removeAllViews, but this is not suitable for me since it deletes them. So my idea is to hide (set the visibility to gone) every single stuff, then make the ones I wish visible. The reason I ask this is that it takes too much time setting the visibility to gone for everything (24, actually) for all the 12 buttons.
Thanks in advance
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/alap"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView4" >
<LinearLayout
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis" />
<Button
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/first" />
<Button
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/second" />
</LinearLayout>
</ScrollView>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:scaleType="center"
android:src="#drawable/cpr1" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:scaleType="center"
android:src="#drawable/epizodok" />
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</RelativeLayout>

Please try this...
<LinearLayout
android:id="+id/ll"
android:layout_width="197dp"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- All content which you hide/show put here -->
</LinearLayout>
now in your class file you read this.
LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
after that as per your requirement you hide/show this Layout with their all contents.
like:
For Hide.
ll.setVisibility(View.GONE);
For Show.
ll.setVisibility(View.VISIBLE);
when you hide/show LinearLayout all content with this Layout also hide/show automatically.

Simply, Just take another Linear Layout with vertical layout within your "def" Linear layout..Nd change its visibility as per your need.
<LinearLayout
android:id="#+id/def"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView3"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/scrollView2"
android:layout_toRightOf="#+id/scrollView2"
android:orientation="vertical"
android:visibility="visible" >
<LinearLayout
android:id="#+id/Subdef"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/image1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/lewis"
android:visibility="gone" />
<ImageView
android:id="#+id/image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>

No need to hide views instead of that just use ViewFlipper concept.
Just declare view flipper in your xml file with your two linearlayouts like this
<Viewflipper android:id="#+id/myViewFlipper" android:layout_height="wrap_content" android:layout_width="match_parent">
<LinearLayout android:id="#+id/layout1" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
<LinearLayout android:id="#+id/layout2" android:layout_height="wrap_content" android:layout_width="match_parent"></LinearLayout>
</Viewflipper>
And get viewflipper reference in your java code like this
Viewflipper mFlipper = (Viewflipper)findViewById(R.id.myViewFlipper);
use mFlipper.showNext(), use mFlipper.showPrevious() methods to hide and show your layouts thats it.