when I launch my app on tablet emulator it shows different colors. See this image (I have cut the right side of the image so it shows just a part of it)
And this is from the standart smartphone emulator:
So you see that there is a strange difference. However the code is the same. Here is my layout xml:
<?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/com.markupartist.android.actionbar.example"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<com.markupartist.android.widget.ActionBar
android:id="#+id/actionbar"
style="#style/ActionBar"
app:title="#string/some_title" />
<RelativeLayout
xmlns:a="http://schemas.android.com/apk/res/android"
a:layout_width="fill_parent"
a:layout_height="fill_parent"
a:background="#ffffff" >
<LinearLayout
a:layout_width="fill_parent"
a:layout_height="wrap_content"
a:orientation="horizontal"
a:paddingBottom="5dip"
a:paddingLeft="5dip"
a:paddingRight="5dip"
a:paddingTop="5dip" >
<MultiAutoCompleteTextView
a:id="#+id/recipientBody"
a:layout_width="0dip"
a:layout_height="wrap_content"
a:layout_weight="1.0"
a:hint="#string/sms_to_whom"
a:maxLines="10"
a:nextFocusRight="#+id/smsRecipientButton" />
<LinearLayout
a:layout_width="wrap_content"
a:layout_height="fill_parent"
a:orientation="vertical" >
<Button
a:id="#+id/smsRecipientButton"
a:layout_width="wrap_content"
a:layout_height="0dip"
a:layout_marginLeft="5dip"
a:layout_weight="1.0"
a:enabled="true"
a:nextFocusLeft="#+id/recipientBody"
a:onClick="onPickContact"
a:text="#string/sms_contacts" />
</LinearLayout>
</LinearLayout>
<LinearLayout
a:layout_width="wrap_content"
a:layout_height="fill_parent"
a:layout_marginRight="10dip"
a:layout_marginBottom="10dip"
a:gravity="bottom"
a:orientation="vertical"
a:layout_above="#+id/bottomLayer" a:layout_alignParentRight="true">
<TextView
android:id="#+id/chars"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="" />
</LinearLayout>
<LinearLayout
a:id="#+id/bottomLayer"
a:layout_width="fill_parent"
a:layout_height="wrap_content"
a:layout_alignParentBottom="true"
a:background="#9c9e9c"
a:orientation="horizontal"
a:paddingBottom="5dip"
a:paddingLeft="5dip"
a:paddingRight="5dip"
a:paddingTop="5dip" >
<EditText
a:id="#+id/smsBody"
a:layout_width="0dip"
a:layout_height="wrap_content"
a:layout_weight="1.0"
a:autoText="true"
a:capitalize="sentences"
a:hint="#string/sms_enter_message"
a:inputType="textShortMessage|textAutoCorrect|textCapSentences|textMultiLine"
a:nextFocusRight="#+id/send_button"
a:minLines="5"
a:gravity="left|top"/>
<LinearLayout
a:layout_width="wrap_content"
a:layout_height="fill_parent"
a:orientation="vertical" >
<Button
a:id="#+id/smsSendButton"
a:layout_width="wrap_content"
a:layout_height="0dip"
a:layout_marginLeft="5dip"
a:layout_weight="1.0"
a:enabled="false"
a:nextFocusLeft="#+id/smsBody"
a:text="#string/sms_send_abbr" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Any ideas what might be wrong or how to fix it?
It is not wrong but intended. Android uses the default style of the device / android version. The default style for tablets is different to those on smartphones. Since it is a good idea to stick to the default styles with your app this behaviour you see there is just right.
Related
This xml layout has been populated by ViewPager and RecyclerView via an activity class, I want to position ViewPager on top and RecyclerView at the bottom, I tired to use android:layout_below="#+id/awesomepager" in the LinearLayout of RecyclerView but it doesn't work (it stays on top behind the toolbar[Deep blue color in the picture]), I also used android:layout_alignBottom="#+id/awesomepager" but that puts it inside the ViewPager at the bottom.
I basically want ViewPager and RecyclerView to be siblings , like this picture , black area to be ViewPager at the top and the green area to be RecyclerView at the bottom.
what is correct way to do this?
viewpager_with_toolbar_overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</RelativeLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
Update:
If I define the hight of ViewPager the problem will be resolved , but when screen size changes lower part of the screen will be blank
I searched a lot and finally came up with a solution, first I changed RelativeLayout to LinearLayout and added android:orientation="vertical" to it, then added android:layout_weight="1" to ViewPager.
Final version
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v4.view.ViewPager
android:id="#+id/awesomepager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#068006"
android:layout_below="#+id/awesomepager"
>
<android.support.v7.widget.RecyclerView
android:id="#+id/episodesLIST"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:scrollbars="horizontal" />
</LinearLayout>
</LinearLayout>
<include layout="#layout/toolbar_layout" />
</FrameLayout>
I have a bottom sheet with a NestedScrollView inside (see below). When I press on a FAB button, I want to make some parts in this NestedScrollView invisible. But when I change some linearlayouts visibilities to GONE, bottomsheet fly aways from the top.
My XML code:
<?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:id="#+id/messageOptionBottomSheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/back_miscellaneous"
android:gravity="center"
android:orientation="vertical"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<View
android:id="#+id/divider2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/textSecondary" />
<LinearLayout
android:id="#+id/layoutDeleteMessage"
android:layout_width="match_parent"
android:layout_height="#dimen/_35sdp"
android:layout_margin="#dimen/_10sdp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:animateLayoutChanges="true"
tools:ignore="UseCompoundDrawables">
<ImageView
android:layout_width="#dimen/_22sdp"
android:layout_height="#dimen/_22sdp"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_remove" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:includeFontPadding="false"
android:text="#string/delete_message"
android:textColor="#color/textSecondary"
android:textSize="#dimen/_12ssp" />
<TextView
android:id="#+id/textConfirmDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/_10sdp"
android:fontFamily="#font/ubuntu_medium"
android:gravity="end"
android:includeFontPadding="false"
android:text="#string/confirm"
android:textColor="#color/red"
android:textSize="#dimen/_12ssp"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
Your bottom sheet is moving top because you are using
android:animateLayoutChanges="true"
remove this line from your layoutDeleteMessage (Linear layout)
Hope this solve your problem
I use Code A to design UI with constraint layout, the top of the UI is google AD and the bottom of the UI is toolbar.
I hope the RecyclerView control named mRecyclerView fill in all other space, how can I do?
BTW, Code B is generated by Android Studio 3.01 automatically when I drag and drop RecyclerView control to UI. It's a hard code for layout_width and layout_height.
Code A
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
ads:layout_constraintTop_toTopOf="parent"
ads:adSize="SMART_BANNER"
ads:adUnitId="#string/ad_unit_id"
/>
<LinearLayout
android:id="#+id/linearLayoutToolBar"
style="#style/myToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="4"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<Button
android:id="#+id/btnBackup"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnBackup" />
<Button
android:id="#+id/btnExit"
style="#style/myTextMedium"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:text="#string/BtnExit" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
</android.support.constraint.ConstraintLayout>
Code B
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="368dp"
android:layout_height="396dp"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="58dp" />
Replace your RecyclerView code like below to fill the free space:
<android.support.v7.widget.RecyclerView
android:id="#+id/mRecyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="#id/adView"
app:layout_constraintBottom_toTopOf="#id/linearLayoutToolBar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
In the following template , at the above New vhd text,
overlap the row , I want to fix this problem .I tried to change the height of the Main File but no used.I just increase the text Size 14 to 15 PX in the all template ,size increased in main template programmatically, this problem occur. I attached my code with the question also see the commented section in XML file.Please suggest me solution if any.I am new to android .Not familiar with the android.I also attached the image below.Thank you.
//Main file
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" //Changed the height but not work
android:background="#ffffff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:orientation="vertical"
android:background="#color/green">
<TextView
android:id="#+id/queue_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="#color/white"
android:text="Inbox"
android:textStyle="bold"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" />
</LinearLayout>
<ExpandableListView android:id="#+id/que_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content" //changed as fill_parent but not worked
android:groupIndicator="#drawable/settings_selector"/>
</LinearLayout>
//Second File
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"> //changed as fill_parent but not worked
<TextView android:id="#+id/groupname"
android:paddingLeft="50px"
android:paddingTop="10px"//changed as 15px not worked
android:paddingBottom="10px"//changed as 15px not worked
android:textSize="15px"
android:textColor="#0b730b"
android:layout_width="250px"
android:layout_height="wrap_content"/>//changed as fill_parent but not worked
</LinearLayout>
//Third file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">//changed as fill_parent but not worked
<ImageView
android:id="#+id/imageView1"
android:paddingLeft="40px"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/green" />
<TextView android:id="#+id/childname"
android:paddingLeft="20px"
android:paddingTop="10px"
android:paddingBottom="10px"
android:textSize="15px"
android:textColor="#0b730b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/child_id"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/dept_id"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView android:id="#+id/rgb"
android:textSize="16px"
android:layout_marginLeft="10px"
android:textColor="#0b730b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
I am struggling big time with trying to make a simple layout with two TextView:s under each other on the left and corresponding two TimePicker:s under each other on the right. However, whichever view I use or attributes I choose that seem relevant I do not get the desired outcome. Here is my current try:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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:stretchColumns="1"
>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_start_time"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
>
<TextView
android:layout_column="1"
android:id="#+id/text_end_time"
android:text="#string/end_time"
android:layout_gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
/>
</TableRow>
<TableRow>
<Button
android:layout_column="2"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</TableRow>
</TableLayout>
This gives the following output
Where is "Start"?
As you can see "Start" is not even shown! I would like to align "Start" with the vertical center of the TimePicker spinner. How to do that?
First, don't use a TableLayout. Use Linears, as you are a beginner and they're easier to use and understand. Here's what you should do:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_start_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_start"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text_end_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/end_time"
android:gravity="center_horizontal"
/>
<TimePicker
android:id="#+id/time_picker_end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:timePickerMode="spinner"
android:layout_marginTop="-25dp"
android:layout_marginBottom="-25dp"
android:layout_gravity="center"
/>
</LinearLayout>
<Button
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="#string/button_calculate"
android:gravity="center"
android:onClick="calculateWorkingTime"
/>
</LinearLayout>
What I've done is creating a Linear Layout and, into it, another two with orientation:horizontal, which makes the elements appear one next to each other.
Also, I've put width and height to all the elements, what is very important.
I've put wrap_content, if you want to change it, no problem.
I didn't test it, if there's any error, just coment
Hope it helps!