I've got a single lined TextView with a text in it that is too long to be displayed at once. Now I want the app to scroll horizontally smoothly to a certain position in the text when the user does certain things. So the scrolling is initiated by user actions but the user doesn't decide himself to which position the app will scroll (so I don't want to implement usual scrolling by swiping). I'd like to have a function scrollTo(int position) which accomplishes the scrolling.
Use an EditText and animate the selection property. You can easily style it to behave like a TextView if that's important, for instance:
<EditText
android:enabled="false"
android:background="#null"
android:textColor="#android:color/black"
android:id="#+id/ttt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="very long text"
android:singleLine="true"/>
And then use property animation to scroll smoothly:
ObjectAnimator anim = ObjectAnimator.ofInt(yourEditText, "selection", from, to);
anim.setDuration(duration);
anim.start();
Note that you should not use a hard coded color for the text because on some phones the background might be different (too dark, for instance). If you have your own theme or using Holo light it you're good, but you should be aware of a possible problem.
Use this code
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/horizontalScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text=" This post will help to share your urls and text values into social networks like facebook,twitter and linkedin.in facebook we have to share your urls only, but twitter and linkedin able to share both urls and text." />
</LinearLayout>
Related
I am using card view but the elevation and card view properties are not working below version 5.0.
I tried to use card_view:cardUseCompatPadding="true" by searching some SO posts but this also did not work.
It should look like this
And it looks like this on 4.2.2
Here is layout:
<android.support.v7.widget.CardView
xmlns:app="http://schemas.android.com/tools"
android:id="#+id/card_view"
app:cardUseCompatPadding="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="05dp"
android:layout_marginTop="05dp"
card_view:cardElevation="12dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/bg">
<View
android:layout_width="3dp"
android:layout_height="match_parent"
android:background="#color/cardLineColor"></View>
<LinearLayout
android:id="#+id/linearLayout6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:orientation="vertical">
<TextView
android:id="#+id/txt_id"
android:layout_width="103dp"
android:layout_height="wrap_content"
android:text="ID"
android:textColor="#color/white" />
<TextView
android:id="#+id/txt_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="05dp"
android:text="23/3/2015"
android:textColor="#color/textColor"
android:textSize="10sp" />
</LinearLayout>
<TextView
android:id="#+id/txt_trans_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/linearLayout6"
android:layout_centerHorizontal="true"
android:text="sent money"
android:textColor="#color/white"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/linearLayout8"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/linearLayout6"
android:layout_marginEnd="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/txt_trans_type"
android:layout_toRightOf="#+id/txt_trans_type"
android:orientation="vertical">
<TextView
android:id="#+id/txt_balance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="$3214"
android:textAlignment="viewEnd"
android:textColor="#color/white"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="05dp"
android:text="#string/balance"
android:textAlignment="viewEnd"
android:textColor="#color/white"
android:textSize="10sp" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
Edit: I created 9 patch file like this
But this is giving this error:
Error:Some file crunching failed, see logs for details
Error:Execution failed for task ':app:mergeDebugResources'.
> Error: Some file crunching failed, see logs for details
May be its height width is much? I tried with small height width but then it leaves some gap. How can I match it to all devices?
Use app:cardElevation="12dp"
instead of card_view:cardElevation="12dp"
Hope it helps.
Sadly, elevation, as you mentioned it, is not available for API 19 and below.
The solution I chose for my similar issue is to replace my cardviews by regular layouts and use 9-patch images as background to generate the shadows. It has the advantage to be very modulable, plus, unlike the elevation property, you can have more customization like shadow colors if you don't want a simple black shadow.
The only problem is that you have to design the image yourself and add it to the project. But fear not, there is some handy generators like this one that can generate it for you. Just make sure that you set a minimum size that is less than your layout to be sure it fits without deforming it. I usually generates a 10*10 pixels wide image, and shadows won't be deformed even when applied to a much larger view.
When you got your image (name should look like myimage.9.png), you simply add it to your drawables, without removing the .9.png extension, and then set it as a regular background drawable to your layout, via xml or code. And you're done !
EDIT : Did not notice you also have lighting on the top of the cardview.. What you can try if you have something like Photoshop, is to create yourself the 9-patch, by applying drop shadows for the dark one, then creating a second layer to add another drop shadow but this time set to white and with the appropriate angle to display it above. Then you save it as png and use the 9-patch generator to convert it to a .9.png image.
See the 9-patch documentation here. If you're using Android Studio, there is also a built-in generator for 9-patches.
Sadly, user interface was kinda limited for advanced displaying like shadows before Material Design stepped in with Android 5. Maybe you can add your cardviews programmatically, so you can do something like this
if (android.os.Build.VERSION.SDK_INT <= android.os.Build.VERSION_CODES.LOLLIPOP){
//Add regular layout to your views with 9 patch
} else{
//Add cardview to get desired effect
}
That way most of your users will have your desired cardviews, but it can quickly increase the amount of code you'll need if you need your element to be clickable/draggable/etc.
I have two Buttons nested in a LinearLayout. Between these Buttons are two TextViews. In the Xml, I have set the foreground to an image for each of these Buttons.
It runs fine on my device for Api 23. But on other devices below Api 23, the foreground image does not display and instead results in a default white solid color. Is there any way to make these images show using foreground below Api 23?
We have tried FrameLayout but it does not do what we want it to do. Would ImageButtons be a better way to solve this issue?
One of the core functions of our app is that every time a user taps a Button, the size increases and the image stretches accordingly. This is done dynamically in code. If I were to use ImageButtons, I would need to set the layout parameters every time for height and width, rather than one line of code that sets the height.
Any tips would be appreciated!
EDIT: Code I am working with -
<?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:weightSum="11"
android:background="#android:color/black">
<Button
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:foreground="#drawable/icebutton"
android:scaleX="1"
android:scaleY="1"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/firstPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="180"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<TextView
android:layout_weight="0.5"
android:id="#+id/secondPlayer"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:background="#android:color/transparent"/>
<Button
android:layout_weight="5"
android:id="#+id/secondP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:foreground="#drawable/firebutton"
android:scaleX="1"
android:scaleY="1"/>
</LinearLayout>
We found out that there were two issues causing the images to not be shown.
1. The size of the image file was too big, creating an outOfMemory error which in turn resulted in the buttons not displaying the images.
2. The foreground attribute does not work for API 22 and below.
Steps to solving these issues:
1. We reduced the size of the image files.
2. We replaced Button with ImageButton
3. In the XML file we removed the foreground attribute, added a black background, and added the image via the src attribute. The following is a snippet.
<ImageButton
android:layout_weight="5"
android:id="#+id/firstP"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:src="#drawable/icebutton"
android:scaleType="fitXY"
android:background="#android:color/black"/>
We then had to change our code to dynamically adjust the height of the buttons to match the new image buttons with the help of this link by setting the LayoutParams:
how to change size of button dynamic in android
Now everything works perfectly!
The target I need to achieve: 2 lines of text and 1 straight line in between should always be on top of Button. So in such a case, setting text in Button's attribute is not applicable according to my knowledge. Therefore I use TextView and View aligning on top of Button to achieve it.
Problem: A strange UI appearance I have come across of Android 5.0+ is that when the Button is enabled, it covers TextView and View even it comes before TextView in RelativeLayout xml file. (according to my knowledge, this means that TextView should on top of Button) The following is my xml code:
<RelativeLayout
android:id="#+id/rl_daily_check_in_button_container"
android:layout_width="140dp"
android:layout_height="140dp"
android:layout_marginBottom="4dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/textview_check_in_days_in_row">
<Button
android:id="#+id/button_daily_check_in"
android:layout_width="140dp"
android:layout_height="140dp"
android:background="#drawable/daily_checkin_button" />
<TextView
android:id="#+id/textview_check_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_above="#+id/view_line"
android:layout_marginBottom="4dp"
android:text="#string/title_not_yet_daily_check_in"
android:textColor="#color/text_gray"
android:textStyle="bold"
android:textSize="36sp" />
<View
android:id="#+id/view_line"
android:layout_width="94dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/textview_check_in_points"
android:layout_marginBottom="6dp"
android:background="#color/text_gray" />
<TextView
android:id="#+id/textview_check_in_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="32dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/points_can_get_daily_check_in_placeholder"
android:textColor="#color/text_gray"
android:textSize="14sp" />
</RelativeLayout>
But when the app is in Android 5.0-, say 4.4.2, the UI is exactly what I expect. I have tried to set android:elevation="xxdp" attribute, it success until I set the background of Button programatically. Can anyone explain the reason and how the Andoird 5.0+ render its UI? Many Thanks!
Button on Andoird 5.0+:
Button on Android 5.0-:
From Android Lollipop (5.0), the Button has a default StateListAnimator. It has set the default android:elevation and android:translationZ attributes to the Button. Since the Button has default elevation set to it, it appears above the other Views that doesn't have elevation set (Views that has elevation less than the Button, to be precise). i.e. The Views that has higher elevation set to it will appear above the Views that has lower elevation set.
So that's why, when you changed the Button to ImageView, the problem is solved, because ImageView has no default elevation set.
Issue
I've got an issue with 2 ImageViews on Android.
The first displays a large image. It is inside a RelativeLayout, and is a custom ImageView (com.ortiz.touch). It was displaying well until now.
The second is also inside the RelativeLayout but is a "normal" ImageView. It shows bluetooth state. Displaying it doesn't cause any issue.
However, when I put code that changes the src of the bluetooth indicator programatically, the first image is not displayed anymore ....
Is the problem coming from the custom view not doing its job right ? Am I missing something ?
Code
If I'm not doing this kind of stuff :
bluetoothState.setImageResource(R.drawable.bluetooth_enabled192);
The image is displayed correctly.
Here's the layout I use :
<?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"
android:background="#1b1b1b"
android:theme="#style/Theme.AppCompat.Light.NoActionBar.FullScreen">
<com.ortiz.touch.TouchImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/imageView"
android:layout_gravity="center"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_above="#+id/textView" />
<TextView
android:layout_width="fill_parent"
android:layout_height="32dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/emptyDisplayText"
android:layout_gravity="center_horizontal|bottom"
android:gravity="center_vertical|center_horizontal"
android:textAllCaps="true"
android:elegantTextHeight="false"
android:ellipsize="end"
android:maxLines="1"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textSize="15sp"
android:textColor="#f3f3f3"
android:id="#+id/textView"
android:background="#drawable/rounded_rect"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_margin="10dp" />
<ImageView
android:layout_width="52dp"
android:layout_height="52dp"
android:id="#+id/bluetooth_state"
android:scaleType="centerCrop"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_gravity="top|right"
android:layout_margin="10dp"/>
</RelativeLayout>
Desired Result
What I get is the same screen without the central image (the text and bluetooth indication are displayed correctly)
NB
I'm starting to get quite depressed on that issue. I just want to display 2 images. Thank you.
Edit
I've not mentioned it, but the main image is loaded in background, using an AsyncTask. I've tried to add some View.invalidate() (on top level layout, on image, on bluetooth indication) but it hasn't solved the problem.
In addition to the image appearing on rotation, it also appears when I try to pinch the non-existant image. And trying to reset the zoom (hacky) programatically doesn't work either.
Okay I've found the error.
As I said, I have a AsyncTask (BitmapWorkerTask) that I call to load a Bitmap into an ImageView in background.
It's called like this :
new BitmapWorkerTask(imageView, getApplicationContext()).execute(filename);
Changing getApplicationContext() to MainActivity.this or getContext() solves the issue :/ (However, I still find it's quite magic how it worked fine for so long even if application context != activity context !)
I am developing an android application,That has a buttons and images.I need to make it responsive.If i use bigger devices like tablets,it displays the controls very small.And when i used in landscape mode,it displays half of the controls or items.How can i overcome this and make my application responsive to all devices.I attached one of my XML code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="125dp"
android:layout_marginTop="50dp"
android:layout_weight="0.01"
android:adjustViewBounds="true"
>
</ImageView>
<LinearLayout
android:id="#+id/layButtonH"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.01"
android:layout_marginTop="20dp"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/addnew"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" ADD NEW "
android:background="#drawable/button_shape"
android:textColor="#FFFFFF"/>
<Button
android:id="#+id/open"
android:background="#drawable/button_shape_cancel"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" OPEN "
android:textColor="#FFFFFF" />
<Button
android:id="#+id/Register"
android:background="#drawable/button_shape_cancel"
android:layout_marginTop="30dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" LOGIN "
android:textColor="#FFFFFF" />
</LinearLayout>
You can start off with below mentioned resources. Making an app available for all screen sizes needs certain consideration while designing and developing the app.
You will have to work on your images to make them consistent with different screen sizes. This will solve the issue with very small controls in tablets.
Also, it looks like in landscape mode your widgets are going beyond the screen height. A quick solution would be to put the LinearLayout within a ScrollView so that it scrolls when in landscape and you see all of your controls. But ideal way would be to have different layouts for landscape and portrait modes.
If you use ScrolLView the code will look like:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Your remaining xml elements -->
</ScrollView>
Ref:
Design for multiple screens
Supporting different screen sizes
Supporting multiple screens
For responsive design take
1) Don't give hard code values like as 125dp rather than user wrap_content or match_parent property
2) Put images under res drawable as per resolution OS take images suited for its resolution, e.g for tablet design create drawable-sw600 folder under res and put tablet images under it.
3) Same for values->dimension create different dimens file with specific folder name. e.g values-sw600 which is used for tablet
4) Use ScrollView control for avoiding screen cutting in landscape mode.
For more details and guideline please visit http://developer.android.com/guide/practices/screens_support.html and http://developer.android.com/training/multiscreen/screendensities.html