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

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" />

Related

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);
}

How can I specify the layout_height value based on the layout_width in Android layout?

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;
`

How to Show Image View in android?

I am sorry I am very beginner in java/android, maybe this question is too bad.
I want to display my icon in splash screen, but if I use ic_launcher it's size is too small. (192x192)
When I generate ic_launcher from new image asset it generates an image with size 512x512 in "app\src\main\ic_launcher-web.png"
Can I display that image?
I think I can change #mipmap/ic_launcher to some path/image location. So, I don't need to copy my image to drawable/mipmap directory.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
I have been looking for it and did not find it.
Thanks for help
Save your original image in res/drawable/youimage.png. Then call it from
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/yourimage.png" />

Image view doesn't display image if screen is not rotated and an other image view has been updated

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 !)

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()

Categories

Resources