Align Bitmap Image inside ImageView - CS50 Pokedex Android - java

I have been working on CS50 and now I am tracking android. I almost finished my PSet Pokedex, but small thing is bothering me.
I am trying to align bitmap image on top of ImageView, but I could not do it. Could you please help me? I tried "scaletype", "layout_gravitiy" etc. But it does not seem to work. I want image to be just below description stating that this should be changed by the java code.
Please see current view here
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PokemonActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_name"
android:textAlignment="center"
android:textSize="18dp"
android:textStyle="bold"
android:paddingTop="10dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_number"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type1"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_type2"
android:textAlignment="center"
android:textSize="16dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/pokemon_button_catch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:paddingTop="5dp"
android:textSize="24dp"
android:onClick="toggleCatch"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/pokemon_description"
android:textAlignment="center"
android:textSize="16dp"
android:textStyle="bold|italic"
android:paddingTop="50dp"
android:text="This is testing something, this should changed by the java code."/>
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

Welcome to StackOverFlow !
If there is no special requirement than no need to use match_parent inside ImageView. You can do following adjustment-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".PokemonActivity">
..............
<ImageView
android:id="#+id/pokemon_avatar"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Happy coding !

sorry. I was roasting snow in a furnace. I found out that actually source image is one to blame. Image size does not wrap the content but it has extra space around content. This is the reason when it is enlarged, there is space between text and image.

Related

How can I convert an XML to make a programmatically view in Android Java

I made a design for a comment section in XML, but I want to create it programmatically when I get some data from database. How can I convert all of these to Java?
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
app:cardCornerRadius="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/complete"
android:scaleType="centerCrop"
android:layout_gravity="center">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.75" >
<TextView
android:id="#+id/commentFullname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calin Onaca:"
android:textColor="#000"
android:layout_gravity="center"/>
<TextView
android:id="#+id/commentReply"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textColor="#000"
android:text="So Bleesed i choosed him no matter what you say i will always choose him"/>
<com.google.android.material.button.MaterialButton
android:id="#+id/postReply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Reply"
android:layout_gravity="center" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginTop="10dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:text="Reply: "/>
<TextView
android:id="#+id/replyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#000"
android:text="Thank you very much my dear" />
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
All the texts will be displayed from database. I know it sounds stupid, but I'm a begginer and I really don't know how to do this. :) Thank you in advance!
Use one of the LayoutInflater inflate methods that best satisfies your use case. The below example will create View containing your layout.
View commentView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.comment_layout,null);

ScrollView doesn't work when keyboard shows up

I'm trying to implement a simple activity where the user can rate something and put a comment.
My view is this :
with the code :
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:background="#color/background_material_light"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:isScrollContainer="true"
>
<ImageView
android:id="#+id/img_journey"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:src="#drawable/pirate"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:layout_alignParentTop="true" />
<LinearLayout
android:id="#+id/ratingLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_below="#+id/img_journey"
android:layout_marginTop="10dp">
<TextView
android:id="#+id/title_journey"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Title"
android:layout_gravity="center"
android:textSize="30sp"
android:textColor="#color/niceblue" />
<RatingBar
android:id="#+id/framework_normal_ratingbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="48dp"
android:maxHeight="48dp"
android:rating="5"
android:layout_gravity="center"
android:layout_marginTop="10dp"/>
</LinearLayout>
<LinearLayout
android:id="#+id/textbox_rate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button_layout"
android:layout_below="#+id/ratingLayout"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp">
<EditText
android:padding="10dp"
android:gravity="start"
android:background="#drawable/textbox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="#string/hint_comment"
android:inputType="text"
android:autofillHints="" />
</LinearLayout>
<LinearLayout
android:id="#+id/button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center|bottom"
android:orientation="horizontal"
android:weightSum="8"
android:layout_marginBottom="40dp">
<Button
android:id="#+id/btn_launch"
android:text="SEND RATE"
style="#style/button_classic"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
The fact is, when I show the keyboard on clicking in the editText, the view is not scrollable and the result is this :
I search like 3 hours on the internet but I found nothing, the only result that I found was to put this on the onCreate of my activity
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN|WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
But it doesn't work either. (I've tried with and without each flag)
The second thing I've tried was to put the ScrollView into the RelativeLayout, but sameresult, doesn't work.
The thing I would like is that the keyboard appears below the edit text and that we do not see the button SEND RATE (except if the user scroll) and, finally, the user should be able to scroll even when the keyboard is displayed.
Am I doing something wrong or what ?
Thanks in advance !!

Is it possible to set view on the left side of ImageView using LinearLayouts?

Is it possible to place the views like that using nested LinearLayout's? The black rectangle will be an icon which will inform user about current weather (it can be sunny, rainy, cloudy etc)
Solved, if someone is curious about code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".hourly_menu"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="20°C"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1111 HPA"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="11%"/>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="57dp"
android:src="#drawable/day_clear_sky"/>

GridView items overlapping each other

Please check my attached image. I am facing this issue when the product name is more than one line. I am confused what should i do now.
In my gridview i am facing this issue. How can i solve this? Here is my gridview xml code.
<GridView
android:id="#+id/productGrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:verticalSpacing="4dp"
android:horizontalSpacing="3dp"
android:focusable="true"
android:stretchMode="columnWidth"
android:fitsSystemWindows="true">
</GridView>
Here is my grid item xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:id="#+id/card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="8dp"
app:cardPreventCornerOverlap="true"
app:contentPadding="8dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_productImage"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_gravity="center"
android:src="#drawable/avatar"/>
<TextView
android:id="#+id/tv_productName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:text="Bread Trimmer"
android:textSize="17sp"
android:textStyle="bold"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp">
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:src="#drawable/coin"/>
<TextView
android:id="#+id/tv_productPrice"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="1049999999999990"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:textColor="#FAAD18"
android:textSize="17sp"/>
</LinearLayout>
<TextView
android:id="#+id/btn_buy"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:paddingLeft="12dp"
android:paddingRight="12dp"
android:layout_height="wrap_content"
android:text="Get Now"
android:textColor="#FFFFFF"
android:focusable="false"
android:textSize="16sp"
android:gravity="center"
android:background="#drawable/buy_background"
android:textStyle="bold"
android:textAllCaps="false"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
This is single item. I am confused where did i made mistake. Please help. Thanks.
solution 1
you can add this attribute to your tv_productName
android:ellipsize="end"
android:singleLine="true"
android:maxLines="1"
this lines add ... to end of your TextView text
solution 2
use this library for your tv_productName TextView
autofittextview
this library fit your TextView size to prevent overlaping
solution 3
this is a bad solution but it work you can add margin to your parent layout(RelativeLayout)
android:layout_margin="5dp"
I think the problem is. Your text view. The name of the product. As the product name increases the whole text view get divided and spread vertically. Like Rhinestones Rose watch the watch is in the vertical position related to the upper text which is creating the issue. I guess. Try to use small text and check if that's the issue or not and if that's the issue you can easily be able to solve it I guess and plz let me know if it works. Thanks .

Android UI using XML (Android and Xml)

I am tying to create a UI like the image below.
This is how it SHOULD look like: (Screen shot from my app using Nexsus 5):
And this is how it look like on a Nexsus S device (4 inch):
Someone have an idea why the diffrences happen? This is my XML code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2e2e2e"
tools:context=".MainActivity"
android:id="#+id/viewew">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="9"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_marginBottom="0dp"
android:layout_weight="8"
android:gravity="center_vertical"
>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:background="#drawable/www"
android:paddingLeft="10dp"
android:paddingRight="10dp"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
<Button
android:id="#+id/www"
android:layout_weight="2"
android:layout_width="90dp"
android:layout_height="90dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/www"
/>
<View
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="15" />
</LinearLayout>
<View
android:id="#+id/idd"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_alignParentBottom="true"
android:layout_weight="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text="Doesn't belong here?"
android:layout_alignParentBottom="true"
/>
</LinearLayout>
<include layout="#layout/buttons" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:layout_centerHorizontal="true"
android:text=" here?"
android:paddingBottom="15dp"
android:layout_alignParentBottom="true"
android:textColor="#f7f7f7"
android:id="#+id/tDoesntBelongHere"
/>
<com.lorentzos.flingswipe.SwipeFlingAdapterView
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:rotation_degrees="15.5"
android:layout_above="#+id/eee"
tools:context=".MyActivity" />
</RelativeLayout>
On android studio you have to set the screen size for different devices.
your buttons have this:
android:layout_width="90dp"
android:layout_height="90dp"
So whichever screen you are using the size will always be 90dp.
In android studio you can create more xml pages for same page: one for portrait, for landscape, ecc ecc and also one for small-big-xxl ecc screen.
Have a look at this link from android developer site.
Hope it help :)
EDIT:
At the moment i don't have Android studio in the pc i'm working on, so i try to explain a possible solution.
Instead of setting height and width, set margins:
You can anchor all from botside, adding in your TextView android:layout_alignParentBottom="true" (and a margin-bottom if you want). Then keep your view with a static height of 400dp like now, then anchor it to the top of the TextView by android:layout_above="#id/TextViewId (it doesn't have id, add it)
Now you have to do the same with your LinearLayout: use android:layout_above="#id/idd and removing the the static size. At this point you can just let your buttons to set height equals to the LinearLayout's height (obiouvsly you can set margin top-bot in buttons).
Sorry if my english is not that good, i hope u got the solution

Categories

Resources