Develop Reference

Resize EditText with fixed height when keyboard is shown

I have a screen with a small text on top, an editText under it and a button on the bottom of the screen. The editText view should have a given height (around 30% of screen size), but when I open the keyboard, the button will be pushed up (as it should) and overlaps with the editText. How can I make the editText resize itself when the keyboard shows up, so that it won't overlap with the button? I tried giving it a min & max height, but that didn't affect it, probably because of the fixed height.
My code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="text"
android:layout_marginStart="20dp"
android:textAppearance="#style/TextAppearance.AppTheme.Job.Subtitle"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="300dp"
android:windowSoftInputMode="stateVisible|adjustNothing"
android:adjustViewBounds="true"
android:minHeight="150dp"
android:layout_marginHorizontal="20dp"
android:layout_marginTop="20dp"
android:padding="5dp"
android:gravity="top"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text"
app:layout_constraintVertical_bias="0" />
<com.google.android.material.button.MaterialButton
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="56dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="14dp"
tools:visibility="visible"
android:backgroundTint="#color/button_color"
android:enabled="false"
android:text="#string/content_feedback_button_text"
android:textColor="#color/white"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:tint="#color/white" />

Delete these attributes from the EditText:
android:layout_height="300dp"
android:adjustViewBounds="true"
android:minHeight="150dp"
Then, add these:
android:layout_height="0dp"
app:layout_constraintHeight_min="150dp"
app:layout_constraintHeight_max="300dp"
This will make sure that your EditText (shown here with a white background) consumes 300dp when there's a lot of space:
And shrinks (down to a minimum of 150dp) when there's less space:

Maybe you find an answer here:
How can I change the height of a EditText and a Button?
There is mentioned to use "android:layout_height" instead of "android:heigt".
Also pay attention, not to use "wrap_content" and don't decrease size of TextEdit if the font is too big inside.
That are a few hints, why this may not work.
Plus, how do you check the visibility of your keyboard?
In case, you don't have a solution so far, this links can help:
How do I detect if software keyboard is visible on Android Device or not?
How to check visibility of software keyboard in Android?
Maybe in newer SDK there are simpler methods, but to refer to the link, where it is handled over the diff in the screen:
final View activityRootView = findViewById(R.id.activityRoot);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
int heightDiff = activityRootView.getRootView().getHeight() - activityRootView.getHeight();
if (heightDiff > dpToPx(this, 200)) { // if more than 200 dp, it's probably a keyboard...
// ... do something here
}
}
});
And then use it like:
public static float dpToPx(Context context, float valueInDp) {
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueInDp, metrics);
}

Card view not working below Lollipop version

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.

How can I specify that this ImageView have to be shown smaller?

I am absolutly new in Android development and I am findig the following problem working on my first app.
My problem is related to changing the space occupied by an image into my layout.
So I have a situation like this: I don't put the image directly into my XML layout file but I do it programatically into my activity code calling this method:
ImageView difficultyContainerImageView1 = (ImageView) rootView.findViewById(R.id.difficultyContainer);
difficultyContainerImageView1.setImageDrawable(new BitmapDrawable(getResources(), ImgUtility.createRankingImg(context, 3)));
So the ImgUtility.createRankingImg(context, 3) return a Bitmap object that is setted into the ImgeView of my layout having difficultyContainer as ID.
It works fine and the image is showed into my layout, this one:
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="250dp"
android:scaleType="fitXY" />
<TextView
android:id="#android:id/text1"
style="#style/pastaTitleTextStyle" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
style="#style/HeaderTextStyle"
android:text="Difficoltà:" />
<ImageView
android:id="#+id/difficultyContainer"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:scaleType="fitXY" />
</LinearLayout>
</LinearLayout>
The image is correctly showed into this ImageView:
<ImageView
android:id="#+id/difficultyContainer"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:scaleType="fitXY" />
The only problem is that doing in this way the image horizontally occupy all the space of the view, this is what I obtained (the image is the last one that contains the chef hats):
It should depends by the fact that I am using android:layout_width="fill_parent" to say that the ImageView having id=difficultyContainer have to horizontally occupy all the spac of its container (the main LinearLayout).
So I want know how can I set a percentual width\height for this ImageView.
What is the best way to specify a percentage so my image will be shown smaller in my app? What is the best solution to do it?

Are you trying to ask how to set the size of the imageView programmatically?
If so use:
ImageView imageView = findViewById(R.id.difficultyContainer);
imageView.getLayoutParams().width = 120;
The same for height, just replace width with height.
This value of '120' being in dp, which means the size of the image will adjust depending on the screen size of the output device, meaning you don't need to utilise percentages like you would in html/css

Just add padding to your ImageView
<ImageView
android:id="#+id/difficultyContainer"
android:layout_width="fill_parent"
android:layout_height="55dp"
android:padding="8dp"
android:scaleType="fitXY" />

how do i accurately calculate my layout (button) height relative to screen size?

Hey everyone im currently working on my first app and im facing a strange problem.
I have 5 buttons in my layout of which the height is calculated by a function to get the right size for every screen.
The function works fine and almost correctly sets the height for each button except for a tiny little line at the bottom, I guess it's some kind of rounding error?
Maybe somebody can point me in the right direction, i cant figure this out.
Thanks in advance.
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager wm = (WindowManager) getApplicationContext().getSystemService(Context.WINDOW_SERVICE);
wm.getDefaultDisplay().getMetrics(displayMetrics);
int minusthis = 0;
Context context = this;
int resource = context.getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resource > 0) {
minusthis = context.getResources().getDimensionPixelSize(resource);
}
int screenHeight = displayMetrics.heightPixels - minusthis;
int tilesize = (screenHeight / 5);
As you can see I get the displayMetrics and divide them by 5 because i have 5 tiles which have to be exactly 1/5 of the screen.
"tilesize" will be applied to the buttons in the code later on.
app running on Nexus6p
In the picture I attatched you can see the buttons get stretched almost correctly over the screen except for the tiny white line I circled in red.
The line may seem small but I cant make it disappear and it really annoys me, also it becomes more apparent in other activities where I have differently sized buttons and panels.
So if you've read this far, thank you already! If you see any way to improve my code please tell me :)

Instead of calculating size dynamically use Linear Layout and the child Text Views with weight property. It will solve your problem.
Here is the sample code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>
</LinearLayout>

We have better option to display view with same weight. You can use LinearLayout with android:orientation="vertical". Add all TextView into LinearLayout and set All TextView property android:layout_width="0dp", android:layout_height="match_parent" and android:layout_weight="1".
With LinearLayout and weight property in we can easily divide screen equally.

Instead of trying to get the size dynamically try linear layout and give the height and weight
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>
if u want to add buttons horizontally than use orientation horizontal and weightsum property
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightsum="10"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5"
android:background="#android:color/holo_orange_light"
android:gravity="center"
android:text="item1"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="5"
android:background="#android:color/holo_blue_light"
android:gravity="center"
android:text="item2"
/>

How would I go about moving my blue bar Image to cover all of the gray area?

As the image shows, the blue image here does not completely move to the top. I would like to be able to move this blue bar to be on the border of the black bar above, but the small gray area is there and I cannot move it in the graphical layout.
EDIT: here is the XML
<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="#F3F3F3" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="124dp"
android:background="#drawable/roundedcorner"
android:ems="10"
tools:ignore="TextFields" >
<requestFocus />
</EditText>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/bluebars" />
</RelativeLayout>
EDIT: My temporary solution I programmatically changed how my image is aligned.
ImageView iv;
iv = (ImageView)findViewById(R.id.imageView1);
iv.getLayoutParams().height = 265;
I call this the temporary solution because this is what I'll work with until I find a better way (I'm a newb to RelativeLayout) and this fix might cause problems on bigger/smaller devices. So it is not recommended, but it'll do until I find a better way.

Put this in Application Tag in your menifest file.
android:theme="#android:style/Theme.Light.NoTitleBar"
And Remove this If you have added in your code:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);

Try this in the onCreate() of your activity.
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
This should hide the titlebar as Aleks G mentioned.
Make sure to do this before setContentView()