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);
}
Related
Design
I use this xml code :
<RelativeLayout
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/bg_triangle_big_product"
android:visibility="#{viewModel.isBig == true ? View.VISIBLE : View.GONE}"
>
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:text="#string/big_discount"
android:textSize="10sp"
android:paddingHorizontal="5dp"
android:rotation="-45"
fontPath="fonts/bebasneue_regular.ttf"
android:fontFamily="#font/bebasneue_regular"
android:gravity="center_horizontal|top"
android:lineSpacingExtra="-4dp"
android:ellipsize="end"
android:textColor="#color/white"
/>
</RelativeLayout>
but the background triangle is fixed, when you rotate the text, the paddings are not adjusted according to the triangle. Text is sticking out on the first line.
Result1 Result2
<TextView
android:rotation="45"/>
Rotation simple rotates your TextView and about designing it, up to you, either use drawable.xml or any other way you see fit
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" />
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"
/>
I am absolutly new in Android development and I have a problem positioning image in the first app that I am developing.
So I have the following situation.
Into a layout file I have:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Dummy content. -->
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="0dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="#drawable/carbonara" />
<TextView android:id="#android:id/text1"
style="?android:textAppearanceLarge"
android:textStyle="bold"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp" />
</LinearLayout>
</ScrollView>
So, as you can see, there is this ImageView element:
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="300dp"
android:src="#drawable/carbonara" />
As you can see, for this ImageView I have setted the following values for the width and for the height
android:layout_width="wrap_content"
android:layout_height="300dp
This because I want that the image occupies horizontally all the space, but I have also to put a vaue for the height.
So for the previous value I obtain the following result:
As you can see in the previous screenshot there is a space up and down the image because I am manually giving a specific value to my ImageView element and this is wrong.
I have tryed to set a lower hwight value and this empty space is deleted for the android:layout_height="240dp" value.
But I think that this is not a good solution because it depens from the used screen.
So, what is the best way to handle this situation?
I have an image view that horizontally have to fill the screen and its height have be automatically handled and not manually specified with a dp value.
How can I implement this behavior? What am I missing?
Your problem can be solved with this simple line of code below
The XML attribute for this is:
android:scaleType="fitCenter"
Put it here like this your code below I just added new line see #1
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:scaleType="fitCenter" // #1
android:layout_height="300dp"
android:src="#drawable/carbonara" />
Also you are using src but you can use background attribute:
android:background="#drawable/carbonara"
Try to use android:scaleType="centerCrop" or android:scaleType="fitXY" if you need to rescale the picture
you can use screen aspect ratio for setting height and width to the image.Try following function.`
public void calculateAspectRatio() {
int imagewidth;
int imagewidth;
DisplayMetrics displaymetrics = new DisplayMetrics();
getActivity().getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
imagewidth=width;
imageHeight = (imageTwoWidth / 4) * 3;
}
set image height and width
imageview.requestLayout();
imageview.getLayoutParams().width = imagewith;//take value from above function for height and width.
imageview.getLayoutParams().height =imageheight;
`
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()