How to use a ScrollView without keyboard altering view? - java

I have limited space in one of my views and I am trying to implement a Scroll View which can help to resolve the limited space issue. However when I try to implement the scroll view it messes-up the keyboard, every time I now try to edit a EditText it causes the elements within the view to move up with the keyboard.
Is there any other solutions or work arounds which I can try to implement?
I have tried the solution at Move layouts up when soft keyboard is shown? which suggest to add the following code to the Manifest android:windowSoftInputMode="stateHidden|adjustResize which prevents the keyboard from jumping up at runtime.
I have also tried to set the gravity of the scrollview and use different layouts example: linear, constraint, relative-layouts. I have tried to make a custom keyboard class and to implement it by setting it in the relevant view activity class (Not my code but tried to implement it)
Here is the solution for this fix
- android:windowSoftInputMode="adjustResize" in Manifest File
- Make a class "CommentKeyBoardFix.Java" and copy and paste the below code.
public class CommentKeyBoardFix
{
private View mChildOfContent;
private int usableHeightPrevious;
private FrameLayout.LayoutParams frameLayoutParams;
private Rect contentAreaOfWindowBounds = new Rect();
public CommentKeyBoardFix(Activity activity)
{
FrameLayout content = activity.findViewById(android.R.id.content);
mChildOfContent = content.getChildAt(0);
mChildOfContent.getViewTreeObserver().addOnGlobalLayoutListener(this::possiblyResizeChildOfContent);
frameLayoutParams = (FrameLayout.LayoutParams) mChildOfContent.getLayoutParams();
}
private void possiblyResizeChildOfContent()
{
int usableHeightNow = computeUsableHeight();
if (usableHeightNow != usableHeightPrevious)
{
int heightDifference = 0;
if (heightDifference > (usableHeightNow /4))
{
// keyboard probably just became visible
frameLayoutParams.height = usableHeightNow - heightDifference;
}
else
{
// keyboard probably just became hidden
frameLayoutParams.height = usableHeightNow;
}
mChildOfContent.layout(contentAreaOfWindowBounds.left, contentAreaOfWindowBounds.top, contentAreaOfWindowBounds.right, contentAreaOfWindowBounds.bottom);
mChildOfContent.requestLayout();
usableHeightPrevious = usableHeightNow;
}
}
private int computeUsableHeight()
{
mChildOfContent.getWindowVisibleDisplayFrame(contentAreaOfWindowBounds);
return contentAreaOfWindowBounds.height();
}
}
And then call this class in your Activity or Fragment
setContentView(R.layout.your_comments_layout)
CommentKeyBoardFix(this) ---> For Kotlin
or
new CommentKeyBoardFix(this) ---> For Java
This gives a static member error which I don't know how to solve.
However none of these solved the problem.
My current layout file which is causing the error.
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true"
android:id="#+id/main_layout1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/freq_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="Freq"
android:textSize="14sp" />
<EditText
android:id="#+id/freq"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:digits="0123456789.,"
android:inputType="numberDecimal"
android:textAlignment="center"
android:textColor="#color/black" />
<Spinner
android:id="#+id/spinner_r1_unit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:tooltipText="unit"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="5dp">
<TextView
android:id="#+id/duty_cycle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/duty_cycle"
android:textSize="14sp"
android:layout_marginLeft="5dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/duty_cycle_percentage"
android:layout_marginLeft="5dp"
android:text="50%"/>
</LinearLayout>
<SeekBar
android:id="#+id/seekBar"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:max="100"
android:progress="50" />
<android.support.v7.widget.AppCompatButton
android:layout_width="100dp"
android:layout_below="#id/main_layout1"
android:layout_height="wrap_content"
android:text="Design"
android:layout_marginLeft="30dp"
android:id="#+id/button_design"
android:layout_marginTop="10dp"
android:background="#drawable/white_rounded_button"
/>
<ScrollView
android:layout_width="200dp"
android:layout_height="100dp"
>
</ScrollView>
</LinearLayout>
</merge>
If I remove the scroll view it solves the problem however, I need to add a scroll view since this .xml file is used as a snippet in a different .xml file where the space is very limited.
Is there any other possible work-around of the implementation of a scroll view? Is there any good explanation to why this scroll view is causing this bug and considering the space issue what other alternatives are there that I can take into account, which can deliver similar results to that of a scroll view, without causing the keyboard error?

Related

Need to show view above of seekbar at specific position android

I want to show seekbar with dashed line as per below images . This line will be display dynamically based on low/high value. I have attached below image.
I have achieved below image. Can you please help me in this?
Add your progress bar inside a constraint layout and have its width set to match the parent. Add two imageviews on top of it that have the dotted line as a resource. Add two vertical guidelines and restrict each imageview to the appropriate guideline. Set the percentage of the guidelines to be where you want each time on the progress bar and the views will move accordingly. You can programmatically change the percentage of the guidelines like so:
Guideline guideLineLeft = (Guideline) findViewById(R.id.your_left_guideline);
Guideline guideLineRight = (Guideline) findViewById(R.id.your_right_guideline);
ConstraintLayout.LayoutParams params = (ConstraintLayout.LayoutParams) guideLineLeft.getLayoutParams();
params.guidePercent = 0.10f; // 10%
guideLineLeft.setLayoutParams(params);
guideLineRight.getLayoutParams();
params.guidePercent = 0.90f; // 90%
guideLineRight.setLayoutParams(params);
UPDATE after comment:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:srcCompat="#drawable/ic_divider_more" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:srcCompat="#drawable/ic_divider_more" />
<android.support.constraint.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.21" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.80"/>
</android.support.constraint.ConstraintLayout>

Exoplayer ui split the screen and add double tap to go forward/backward circular effect

I have to reproduce the following circular effect on the exoplayer.
I added two views, exo_rew and exo_ffwd.
Which automatically do go back or forward by standard setting.
This is the code I've written so far:
<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="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="#+id/exo_rew"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:background="#00000000"
android:foreground="?attr/selectableItemBackground"
tools:ignore="Orientation" />
<LinearLayout
android:id="#+id/exo_ffwd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="true"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:background="#00000000"
android:foreground="?attr/selectableItemBackground"
tools:ignore="Orientation" />
<LinearLayout
android:id="#+id/play_pause_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#15ffffff"
android:gravity="center"
>
<ImageButton
android:id="#id/exo_play"
style="#style/ExoMediaButton.Play"
/>
<ImageButton
android:id="#id/exo_pause"
style="#style/ExoMediaButton.Pause"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignWithParentIfMissing="false"
android:layout_centerHorizontal="false"
android:layout_centerVertical="false"
android:gravity="center_vertical"
>
<TextView
android:id="#id/exo_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="00:00"
android:textColor="#FFBEBEBE"
android:textSize="14sp"
android:textStyle="bold"
/>
<com.google.android.exoplayer2.ui.DefaultTimeBar
android:id="#id/exo_progress"
android:layout_width="0dp"
android:layout_height="26dp"
android:layout_weight="1"
app:played_color="#4589f2"
/>
<TextView
android:id="#id/exo_duration"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:includeFontPadding="false"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="2:00:00"
android:textColor="#FFBEBEBE"
android:textSize="14sp"
android:textStyle="bold"
/>
</LinearLayout>
</RelativeLayout>
There are two problems that I could not solve:
1) That each view takes half of the screen, exo_rew on the left and exo_ffwd on the right.
I could not find a way to specify in xml a layout_width equal to match_parent/2.
Is there a way?
I tried with weightSum at 1, but it does not seem to work.
2) Create the circular effect as in the image.
the doubts are better to use a canvas creating a circle or a "circle reveal" effect.
Can someone give me a hand?
Best way would be to use ConstraintLayout and add these images with constraint start, end, bottom and top and give them width of 0dp, in this way they'll just occupy the width according to their constraint.
ConstraintLayout is very powerful it will also reduce your view hierarchy. And it would help your purpose.
If you want to add the same double tap behavior like YouTube, you can use my library to achieve it. My basic approach is to override the onTouchEvent of the PlayerView to detect DoubleTapGesture (SimpleGestureDetector) and creating an overlay on top of it.
I've written an answer here already. Use the following to implement it:
0) Requirements:
Minimum SDK: 21 (could be lower, but I've not tested older versions yet)
ExoPlayer2 library (at least 2.10.4) since the replaced view is written above ExoPlayer's PlayerView
1) Include it to your gradle (it's hosted on jitpack.io so you've got to add it to your respositories):
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.vkay94:DoubleTapPlayerView:0.7.1'
}
2) Add the views inside your XML:
<FrameLayout
... >
<!-- Replace ExoPlayer's PlayerView -->
<com.github.vkay94.dtpv.DoubleTapPlayerView
android:id="#+id/doubletapplayerview"
app:player_layout_id="#layout/exo_simple_player_view"
app:use_controller="true"
...
/>
<!-- Other views e.g. ProgressBar etc -->
<!-- Add the overlay on top of PlayerView -->
<com.github.vkay94.dtpv.YouTubeDoubleTap
android:background="#color/dtp_overlay_dim"
android:id="#+id/youTubeDoubleTap"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
3) Set it up inside your activity:
// Link the PlayerView to the overlay to pass increment to the Player (seekTo)
// Important: set the (Simple)ExoPlayer to the PlayerView before this call
youTubeDoubleTap
.setPlayer(doubletapplayerview)
.setForwardRewindIncrementMs(5000)
// Set YouTube overlay to the PlayerView and double tapping enabled (false by default)
doubletapplayerview
.activateDoubleTap(true)
.setDoubleTapDelay(500)
.setDoubleTapListener(youTubeDoubleTap)
//.setDoubleTapListener(this) => handle event directly within´the activity
Link to the library on Github
Use FrameLayout instead of LinearLayout Like this
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/exo_rew"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00000000"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground" />
<FrameLayout
android:id="#+id/exo_ffwd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00000000"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground" />
</LinearLayout>

How to keep views from disappearing in wrap_content

I have a problem where a view of mine is disappearing in my RecyclerView when the layout of that view is wrap_content. The RecyclerView is match_parent both directions, and uses a LinearLayout that inflates the below xml file. Here is what each piece of the RecyclerView is supposed to look like:
And here is the XML for that:
<?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="wrap_content"
android:layout_margin="10dp">
<View
android:id="#+id/scheduleBlockColor"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/scheduleBlockText"
android:background="#color/colorCougarRed" />
<RelativeLayout
android:id="#+id/scheduleBlockText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/scheduleBlockColor"
android:layout_toRightOf="#id/scheduleBlockColor"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp">
<TextView
android:id="#+id/scheduleBlockTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="#string/schedule_block_time_default"
android:textSize="16sp" />
<TextView
android:id="#+id/scheduleBlockClassName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockTime"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="#string/schedule_block_class_default"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/scheduleBlockRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockClassName"
android:padding="2dp"
android:text="#string/schedule_block_room_default"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
My question is, how do I keep that colored piece from disappearing when the RecyclerView loads? If I have the parent RelativeLayout above set to match_parent, it works fine. I've tried this answer, but haven't had the same success
It is because of the height set on the <View>. It gets messed up (even with match_parent) by the fact that it doesn't have content. Since the intention is to have a vertical stripe, you could anchor it to the top and bottom of the parent. You already are doing it for the bottom part (kind of, aligning it to the bottom of the text view container), so you only need to take care of the top anchoring:
<View
android:id="#+id/scheduleBlockColor"
...
android:layout_alignParentTop="true"
... />
Instead of padding using layout_margin inside your RelativeLayout.

How to make EditText not focused when creating Activity

I've read the other questions discussing this, and all of them work for my layouts, except for the very first one created.
At the moment, this is at the top of my onCreate method:
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
^ That makes it so at least the keyboard doesn't pop up on startup, but the EditText is still focused on.
This is the XML for my EditText:
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/changePass"
android:layout_centerHorizontal="true"
android:layout_marginTop="167dp"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="30" >
</EditText>
This is what it looks like when I bring up my activity:
The problem is that with some phones, when an EditText is focused like this, they can't write in it. I want it to not focus.
What I've done works for the next layouts brought up in that it the EditTexts are not focused on and would look more like this:
Notice that it's the same layout, though. This is the screen after the user has been brought back to this screen, which would indicate nothing wrong with the XML because this is the same XML, but the problem is that the EditText is only focused on when the activity is created.
I've done research and all of the other questions don't help me with this (they did however help the keyboard not show up, thankfully). How can I make it so the EditText on startup will look like the second screenshot, rather than the first?
You can set property of Layout like android:descendantFocusability="beforeDescendants" and android:focusableInTouchMode="true"
Example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true" >
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/changePass"
android:layout_centerHorizontal="true"
android:layout_marginTop="167dp"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="30" >
</EditText>
</RelativeLayout>
May this one helpful ;)
XML code:
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/changePass"
android:layout_centerHorizontal="true"
android:layout_marginTop="167dp"
android:ems="10"
android:focusable="false"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="30" >
</EditText>
Java code:
EditText edPwd = (EditText)findViewById(R.id.password);
edtPwd.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.setFocusable(true);
v.setFocusableInTouchMode(true);
return false;
}
});
set focusable false in xml and set it true via the code
In your main_layout
add this 2 lines:
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
example:
<RelativeLayout 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:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"> *YOUR LAYOUT CODE* </RelativeLayout>
the best solution is here:
https://stackoverflow.com/a/45139132/3172843
the correct and simple solution is to setFocusable false and setFocusableInTouchMode true . so the EditText gain focus only when user touch that EditText
android:focusable="false"
android:focusableInTouchMode="true"
Add this in onCreate()
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
or in onCreateView()
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
XML Code
<EditText
android:imeOptions="flagNoExtractUi"
android:focusable="false"
/>
Java Code in onClickListerner
mEdtEnterPhoneNumber.setFocusable(true);
mEdtEnterPhoneNumber.setFocusableInTouchMode(true);
Whenever I'm trying to open Editext after selection item of Spinner, so on that time not able to open keyboard & write down the values in Edit text, but I resolved my issue with this code.
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true"
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="beforeDescendants"
android:focusableInTouchMode="true">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/titleName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:hint="#string/hint_your_full_name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks!
You can do this programmatically. use editText.setEnabled(false) in your onStart() method of your activity (not in onCreate() - because this is some method for initializing GUI components)
It is possible to use android:focusable="false" to disable it, but if that does not work for some reason, then you can simply put a LinearLayout and it will take the focus without disrupting your layout.
NOTE: Eclipse will give you an error saying that your LinearLayout is useless because it has no contents. You should be able to disregard it with no problems.
For example:
<LinearLayout
android:focusable="true"
android:focusableInTouchMode="false"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/changePass"
android:layout_centerHorizontal="true"
android:layout_marginTop="167dp"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="30" >
</EditText>
</LinearLayout>
The easiest way is to add
android:windowSoftInputMode="stateAlwaysHidden|adjustPan"
in the activity tag of the Manifest.xml file
1) Its the simplest,open the manifest and put the following code between the activity tag:
android:windowSoftInputMode="stateHidden"
2) Put this attributes in the parent layout
android:focusable="true"
android:focusableInTouchMode="true"
In Manifest , copy and paste the beneath code.
<activity
android:name=".LoginActivity"
android:windowSoftInputMode="stateAlwaysHidden"/>
<activity
android:name=".MainActivity"
android:windowSoftInputMode="stateAlwaysHidden" />
android:windowSoftInputMode="stateAlwaysHidden"
add this line in the activity tag of the Manifest.xml file.when you click on the EditText the keyboard gets into focus.
use android:focusable="false" for focusing disable
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/changePass"
android:layout_centerHorizontal="true"
android:layout_marginTop="167dp"
android:ems="10"
android:imeOptions="flagNoExtractUi"
android:inputType="textPassword"
android:maxLength="30"
android:focusable="false" >
</EditText>

spreading a DataGrid across the screen will all it's items visible

I'm writing my first android application. I'm using android 2.3.3 SDK.
the game is kind of a cards game that has a 4x4 grid of cards on the screen.
when the game starts the only thing visible on the screen is the datagrid (no menus or nothing).
so the GameActivity layout is the following:
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/faces_grid_view"
android:numColumns="4"
android:verticalSpacing="1dp"
android:horizontalSpacing="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</GridView>
this is the relevant code of the onCreate function of the GameActivity class:
Display display = getWindowManager().getDefaultDisplay();
final int width = display.getWidth();
final int height = display.getHeight();
final int bottomPadding=150;
//Display display = getWindowManager().getDefaultDisplay();
gameTurns = new ArrayList<GameTurn>();
imageWidth=width/4;
imageHeight=(height-bottomPadding)/4;
imageAdapter = new ImageAdapter(this,imageWidth,imageHeight);
facesGridView = (GridView) findViewById(R.id.faces_grid_view);
facesGridView.setAdapter(imageAdapter);
in the onCreate() code I'm getting the defaultDisplaySize, divide it by 4 so i'll know the max height and width that an image can take.
for some reason I need to add a bottomPadding. I checked it on galaxy note and galaxy tab 10.1 and maybe the getDefaultDisplay also returns the space of the bottom toolbar of the tablet itself so the pictures overlap the all screen without any padding.
as you can see I set an adapter for the GridView. the adapter extends BaseAdapter
and i paste to his constructor the width and height the I calculated earlier.
the getView function of the adapter contains the following:
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) { // if it's not recycled, initialize some attributes
imageView = new ImageView(mContext);
LayoutParams param = new LinearLayout.LayoutParams(this.imageWidth,this.imageHeight);
imageView.setLayoutParams(new GridView.LayoutParams(param));
imageView.setAdjustViewBounds(true);
imageView.setScaleType(ScaleType.CENTER_INSIDE);
imageView.setPadding(1,1,1,1);
} else {
imageView = (ImageView) convertView;
}
so a couple of questions:
is there a way just to configure the datagrid to be visible on the all screen and to show all items with no scrolling without configuration the image width or height ? why do I need to work so hard for such a simple task?
if I do need to calculate stuff myself, is there a way to get the actual Activity height and width so I won't need to add any padding? welp I want it to work on all scree sizes in landscape and portrait.
I tired to change and play with the configuration for many days and that's the best I've achieved so far so any information regarding the issue would be greatly appreciated.
update
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="*"
android:weightSum="4" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
>
<ImageView
android:id="#+id/imageView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
<ImageView
android:id="#+id/imageView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/face"
android:onClick="onItemClick"
/>
</TableRow>
</TableLayout>
this xml file results in a 4 images centered and spread vertically (this fits the all screen so there may be more below).
.
what did i miss? :)
thanks!
Kfir
is there a way just to configure the datagrid to be visible on the all
screen and to show all items with no scrolling without configuration
the image width or height ? why do I need to work so hard for such a
simple task?
This is a simple task just that you're using the wrong widget. You would generally use a GridView if the grid of cells is bigger than the screen so you could benefit from the GridView's recycling mechanism(to improve performance and to don't get in trouble with the app's memory). This is not your case as you want all the cells to be visible.
I would use a TableLayout with width and height set to FILL_PARENT(with stretchColumns set to * so the row columns will have the same width) which will contain four TableRows(with layout_weight set to 1(and weighSum set to 4 for the parent TableLayout) so they will have equal height), also the layout_height for the TableRow will be set to 0dp. Each TableRow will contain four ImageViews.
if I do need to calculate stuff myself, is there a way to get the
actual Activity height and width so I won't need to add any padding?
Help I want it to work on all scree sizes in landscape and portrait.
I would advise you to use the solution I posted above. If you still want to use the GridView then make it fill all the width/height (by using fill_parent and not wrap_content like you did for the layout_width/height) and in the onCreate method use a Handler to post a Runnable in which you retrieve the GridView's LayoutParams and use those to set up the adapter.

Categories