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.
Related
I need to create a custom looking SearchView that opens when an ImageButton, that I already have in my MainActivity.xml, is pressed.
I would really appreciate if you could explain me how to do it, because all I could find on SO was either people not having a custom looking SearchView or having it permanently on their TitleBar which I do not have since I'm using the light.NoTitleBar theme.
This is what I would need it to look like, this is a design I made with photoshop:
You have mutliple ways to obtain what you are looking for in term of design.
A solution i use (wich may not be the best) is to put my EditText (your search field) in a FrameLayout, this way i can have a search button and delete text button overlapping my textView:
XML Example :
<FrameLayout
android:id="#+id/SearchTextInputLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:minWidth="100.0dp">
<EditText
android:id="#+id/SearchTextInput"
android:textColorHint="#layout/inputselector"
android:hint="Search terms here..."
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:id="#+id/ClearSearchButton"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_gravity="end|center_vertical"
android:background="#android:drawable/ic_delete" />
</FrameLayout>
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!
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
I'm trying to present Hebrew text in m TextView.
I have read here I need to change the font from default android's to a hebrew supporting one.
I have tried few solutions, but none of them worked:
Typeface font= Typeface.createFromAsset(mContext.getAssets(), "fonts/Raanana.ttf");
titleTextView.setTypeface(font);
titleTextView.setText(mTitles[position]);
or:
titleTextView.setText(Html.fromHtml(mTitles[position]));
here is my xml:
<ImageView
android:id="#+id/todo_row_image"
android:layout_width="50dp"
android:layout_height="30dp"
android:layout_marginBottom="32dp"
android:layout_marginLeft="21dp"
android:contentDescription="my image" />
<TextView
android:id="#+id/todo_row_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:lines="1"
android:text="#+id/titleTextView"
android:layout_toRightOf="#id/todo_row_image"
android:textSize="12sp" >
</TextView>
<TextView
android:id="#+id/todo_row_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/todo_row_title"
android:layout_marginTop="6dp"
android:lines="1"
android:text="#+id/dateTextView"
android:textSize="12sp" >
</TextView>
any idea how to solve this?
is there a way to define default font per application? per Layout?
Hebrew in a TextView works well "right out of the box". Maybe there are issues with the BIDI, but generally it displays it good.
Regarding you second question, how can you set up a layout to be used when using hebrew, take a look at this:
RTL Languages support in android and resource qualifiers
Base on my experience, if you specify on the TextView android:singleLine="true" it will not show Hebrew characters, it's definitely a bug in the android source code and might be fixed in a later release.
based on that I believe that android:lines="1" is what is causing the issue for you.