Develop Reference

Disabling scrolling after specific child

In my case, I have a HorizontalScrollView. What I need to achieve is that HorizontalScrollView should be scollable until a specific child. (By child I mean view lying inside HorizontalScrollView.) User should not be able to scroll the rest of it. My current minimum SDK is 21. So that I cannot use HorizontalScrollView.setOnScrollChange() method. It is available for API level 23+.
Searched the net for some time but could not find solutions suitable for my case.
How can I achieve this? Any suggestions would greatly help.
The reason for doing this is to achieve an affect where scrollbar stops from scrolling at a specified location. See the picture below.

You can kind of fake the sugested behaviour by adding a ScrollView which fills up half the screen and adding static elements right next to it.
below is a pseudo layout on how it can be done:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000">
<!-- Scrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item4"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item6"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:orientation="horizontal"
android:background="#00FF00">
<!-- Unscrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
</LinearLayout>
</LinearLayout>
the important part is weightSum=1 and the layout_weights of .5 with a respective width of 0 . You can adjust them to your needs of course.

view sliding over layout

I have relative layout. Within which I have many views like edit text, text views and so on. I do lots of animations in that. Everything was perfectly fine. But at one point, I have a requirement.
It is the password page. Create and confirm password. Two edittexts one after another. If the password doesnt meet the requirement, a plain orange view should slide up with error message "Invalid password".
So I put create and confirm password in linear layout. The linear layout will slide up, letting user type in passwords. After validation, if there is an error, the linear layout should slide down and the plain view will slide up. I kept the view invisible and when required I made it visible and wrote the code to slide up. The same code works when I just use single edit text instead of linear layout. But it is not working when using linear layout. Am I doing something wrong?
Adding code to it. The code specific to this issue starts with till the end of coding
I declared linear layout as view and NOT VIEWGROUP.
EDIT: After doing analysis, I found that the view I am trying to slide up after sliding down the layout is hidden somewhere in the view hierarchy.
view.bringToFront() helps to bring the error view to the front and slides up.
But after that the problem is, after my linear layout slide down, the error view is not sliding up straight away. Because I am using bringToFront(), it displays the view first on the whole screen (with background color as orange) and then the sliding starts.
I am not sure whether it is correct but I fixed this issue like this.
no background color has been given to the view
I used errorView.bringToFront () and errorView.setVisibility(true) in the animationEnd() of a Layout slidingdown animation listener.
I defined sliding up animation for the errorView in the same animationEnd() of layout sliding down listener
In the animationStart() of errorView sliding up animation listener, I defined the background color of the errorView. Now its working as expected.
But let me know better way of doing this.
//Declaration
View greyView, orangeView, yellowView, blueView, orangeErrorView, letsGetStartedView, welcomeBckView, passwordMasterLayout, orangePwdErrorView;
TextView welcomeText,errorTextView, letsGetStartedTextView, welcomeBckTxtView, errorPwdMsg;
//Password Error Handling
orangePwdErrorView = v.findViewById(R.id.orangePasswordErrorView);
errorPwdMsg = (TextView) v.findViewById(R.id.errorPasswordMessage);
//Layout code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sample_main_layout">
<FrameLayout
android:id="#+id/sample_content_fragment"
android:layout_weight="76.4"
android:layout_width="match_parent"
android:layout_height="0px" />
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="23.6">
</FrameLayout>
</LinearLayout>
sample_content_fragment framelayout takes the below code
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="#+id/grey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#58595B" />
<View
android:id="#+id/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<View
android:id="#+id/yellow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FDB518"
android:visibility="invisible" />
<View
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1893D2"
android:visibility="invisible" />
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/welcome"
android:id="#+id/welcomeTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="51dp"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"
/>
<ImageView
android:layout_height="60dp"
android:layout_width="60dp"
android:id="#+id/clinicloud_logo"
android:clickable="true"
android:src="#drawable/clinicloud_icon"
android:layout_marginRight="50dp"
android:layout_alignParentStart="true"
android:layout_marginStart="35dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp" />
<View
android:id="#+id/orangeErrorView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<EditText
android:layout_width="match_parent"
android:layout_height="90dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/emailEditText"
android:text="#string/enter_email"
android:layout_gravity="center"
android:background="#f4f4f4"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"/>
<!--UI components for welcome back page-->
<View
android:id="#+id/welcomeBackView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#134F9F"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_back"
android:id="#+id/welcomeBackTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="90dp"
android:ems="10"
android:id="#+id/password"
android:layout_alignTop="#+id/emailEditText"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Password"
android:visibility="invisible"
android:background="#d2d1d1"
/>
<!--UI components for Let's get started page-->
<View
android:id="#+id/letsGetStartedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C3A91"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Let&apos;s get started"
android:id="#+id/letsGetStartedTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<!--Linear layout to show the create and confirm password-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:gravity="bottom"
android:layout_alignBottom="#+id/emailEditText"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="#+id/passwordMasterView"
android:visibility="invisible">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/createPwd"
android:layout_weight="0.50"
android:background="#F4F4F4"
android:text="#string/create_password"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/confirmPwd"
android:layout_weight="0.50"
android:background="#E3E3E3"
android:text="#string/confirm_password" />
</LinearLayout>
<!-- To show password errors-->
<LinearLayout
android:id="#+id/orangePasswordErrorView"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorPasswordMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"
/>
<!-- To show password errors-->
</RelativeLayout>
The java logic is in https://stackoverflow.com/questions/30523599/sliding-up-and-down-android
Please direct for any incorrect codings

I kept the view invisible and when required I made it visible and wrote the code to slide up.
I think you must do it in DialogFragment or custom AlertDialog that will be shown above your layout, if dont want to do this try envelop your RelativeLayout in FrameLayout and adding in it LinearLayout for example but visout your code difficult to say in what problem it is

You should consider using a library for the sliding panel, one that I've had excellent experiences with (and supports the functionality that your after) is umano's AndroidSlidingUpPanel. https://github.com/umano/AndroidSlidingUpPanel

Align text in custom ListView in table-like format

I am building an app that I would like to support multiple device size.
In my app, I am using a listview to display data as well as a custom adapter. The background of the listview is an image I have done. This image is basically a 114heightX700width. with a small vertical divider at about 1/4 of the image.
In the left side, I need to center numbers with maximum 3 digit and on the left, a title.
It works great on Nexus 4, but if I try other devices with different dpi, it wont center anymore. Is there a way to "clip" the text positioning in the given image so that it is always at the same position no matter the device?
Here is my XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:contentDescription="#string/empty"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignLeft="#+id/imageView1"
android:layout_alignParentTop="true"
android:baselineAligned="false"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="75dp"
android:layout_height="match_parent"
android:layout_weight="0.00" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.89"
android:paddingLeft="10dp" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:lines="1"
android:paddingRight="10dp"
android:text="#string/empty"
android:textColor="#android:color/white"
android:textSize="18sp" />
</RelativeLayout>
</LinearLayout>

There are 3 options:
Use a LinearLayout set all children to match_parent and set the layout_weight to 1 for every child. This will bring all children to the exact same size.
Use a 9patch background for each child. This will draw your background "around" the text.
Use a view in between the TextView to show the divider.
Anyway: RelativeLayouts/LinearLayout/FrameLayout with only one child do not make sense.
You should reduce the complexity of your layout.

How can I scale down multiple layouts automatically in case there is no space left?

I want to create a view that shows 8 items the user can hold. When there are less than 8 items available, the imageView of the item will be replaced by a default image.
The user is able to klick the item and he will see a description of each item in a texbox on the top of the layout. This EditText is placed on top of an image, the "textbox". So far i noticed there is an option to attent an image to the editText, so this problem may be solved.
On the bottom of the layout I want a cancel button on the left side, and an accept button on the right side. This way the user may go back to the game without choosing an item or select an item to use it.
The Problem is, when there is no space left to draw the images at full resolution, the layouts try to draw their content in full resolution. This is why my upper row of items is drawn in full size while the second row is scaled down.
This is how it should look like:
I then tried the following:
The root layout is a linear layout
The first layout is a relative layout, holding the imageview and the
EditText.
These are followed by a Linear layout (vertical), parenting
two other linear layouts (horizontal).
I put 4 imageViews in each of them, representing the items.
So far I didn't think about the accept- and cancel buttons, because my result is a total mess yet.
<?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:gravity="bottom"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/textboxview"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:scaleType="fitXY"
android:src="#drawable/textbox" />
<com.gootsProject.AutoResizeTextView
android:id="#+id/dialogText"
style="#style/monologText"
android:layout_width="fill_parent"
android:layout_height="50dp" />
</RelativeLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView07"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/ImageView05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/ImageView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/ImageView06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="2dp"
android:src="#drawable/item_noitem" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Can you help me to setup this view as I intended? I'm lost.

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>