I'm sure this is something simple that I am overlooking but I can't figure it out. I have a ListView using a custom adapter with a simple layout and my padding value seems to be ignored. Here's how I want the layout to be:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="#style/Widget.Layout.ComponentEntry" android:padding="#dimen/preferred_padding">
<include layout="#layout/component_entry_summary" />
</LinearLayout>
But the padding is ignored. If I use a nested LinearLayout then it works but the inner LinearLayout seems pointless. This works:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" style="#style/Widget.Layout.ComponentEntry">
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent" android:padding="#dimen/preferred_padding">
<include layout="#layout/component_entry_summary" />
</LinearLayout>
</LinearLayout>
The first layout works outside of a ListView so I'm stumped. For reference here is the style used (which also specifies a padding):
<style name="Widget">
<item name="android:textAppearance">#style/TextAppearance</item>
</style>
<style name="Widget.Layout">
<!-- Empty Style -->
</style>
<style name="Widget.Layout.ListViewItem">
<item name="android:background">#drawable/listview_item_background</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">match_parent</item>
<item name="android:padding">#dimen/preferred_padding</item>
</style>
<style name="Widget.Layout.ComponentEntry" parent="Widget.Layout.ListViewItem">
<item name="android:layout_height">#dimen/listview_item_height</item>
</style>
And the included layout:
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<ImageView android:id="#+id/iconImage"
android:layout_gravity="center_vertical"
android:layout_height="#dimen/icon_size"
android:layout_width="#dimen/icon_size"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher" />
<LinearLayout android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:paddingLeft="#dimen/preferred_padding"
android:orientation="vertical">
<TextView android:id="#+id/topText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="#dimen/preferred_padding"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/header_text_enabled"
android:textStyle="bold" />
<TextView android:id="#+id/bottomText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:paddingLeft="#dimen/preferred_padding"
android:singleLine="true"
android:text="#string/app_name"
android:textColor="#color/header_text_enabled" />
</LinearLayout>
</merge>
Here's how layout is inflated (I was originally supplying a null parent and thought that was the issue but it doesn't seem to be:
public View getView(int position, View view, ViewGroup parent) {
ViewHolder viewHolder;
if (view == null) {
view = _layoutInflater.inflate(_layoutResourceId, parent, false);
...
I ran into the same with issue,when I removed the code to set the background the padding worked.
Edit: Found out what is causing it, it is the padding line in the 9 patch images, I thought if you left it out of the drawing it would use the padding in the layout xml. But it actually then uses the stretchable area also as the drawable area.
If the padding lines are not included, Android uses the left and top lines to define this drawable area, effectively defining the padding.
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
Removing the background caused the padding on the outer LinearLayout to start working. Haven't dug into why yet but the problem is (partially) resolved at least.
Related
I am trying to make my first hamburger menu with some images, but they are displayed in grey scale, not the real image. Here is a photo of how it looks:
And here is the code for the XML file:
<item
android:id="#+id/desp_mercedes"
android:icon="#drawable/mercedes"
android:title="Mercedes" />
<item
android:id="#+id/desp_audi"
android:icon="#drawable/audi"
android:title="Audi" />
<item
android:id="#+id/desp_bmw"
android:icon="#drawable/bmw"
android:title="BMW" />
I want to know how to display the original images. I have both SVG and PNG files for better quality.
In your nav_header_main.xml layout resource file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/nav_header"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#color/colorAccent"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:gravity="bottom"
android:orientation="vertical"
android:padding="16dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
//here you can add your image src
<ImageView
android:id="#+id/nav_header_imageView"
android:layout_width="64dp"
android:layout_height="64dp"
android:src="#drawable/ic_imageview" />
<TextView
android:id="#+id/nav_header_textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="16dp"
android:text="Chike Mgbemena"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
</LinearLayout>
You can maybe try this out: How do I customize the navigation drawer in Android Studios?
TL;DR: Create a ListView in your DrawerLayout with the appropriate implementation, Adapter, item.xml and such.
I found the way to display the original images, here is the fragment of code:
navigationView.setItemIconTintList(null);
"navigationView" is the name for my drawer, change it to yours on your MainActivity
I am using actionbar and displaying some title and subtitle of the actionbar. I want the size of subtitle to be smaller than the title. And also I have a logo icon in left. So how should I adjust the alignment.
There's an another fragment in which I am using back button as home button. So, I also want to reduce the space between the back button and the Title of actionbar.
I tried using this code. But it didn't help.
UserListFragment.java
View viewActionBar = getActivity().getLayoutInflater().inflate(R.layout.actionbar_layout, null);
ActionBar.LayoutParams params = new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT,ActionBar.LayoutParams.MATCH_PARENT,Gravity.CENTER);
TextView textviewTitle = (TextView) viewActionBar.findViewById(R.id.mytext);
textviewTitle.setText("DemoIosAppDoctor"+"\n"+"Doctor");
actionBar.setCustomView(viewActionBar, params);
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setDisplayShowTitleEnabled(false);
}
actionbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:id="#+id/mytext"
android:textSize="18sp"
android:layout_marginTop="5dp"
android:layout_marginLeft="-2dp"/>
</LinearLayout>
To completely customise Actionbar, you should define Toolbar in design XML and add you own component there. and, then use like this
Toolbar tb = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(tb);
Use XML like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/textView7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Note: You have to set this activity theme as NoActionBar like this:
<activity
android:name=".YourActivity"
android:parentActivityName=".index.IndexActivity"
android:theme="#style/AppTheme.NoActionBar" />
And theme like this:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
In our application we need an indeterminate progress bar, like so:
We can achieve this by setting a negative margin on the ProgressBar, like this:
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:marginTop="-7dp"
android:visibility="#{loading ? View.VISIBLE : View.GONE}" />
BUT because ConstraintLayout does not support negative margins, it will look like this:
OK, the negative margin was a hack. Let's replace it with a different hack, shall we? Let's introduce our custom view CustomProgressBar, which extends ProgressBar and overrides its onDraw method, like this:
#Override
protected void onDraw(Canvas canvas) {
int marginTop = dpToPx(7);
canvas.translate(0, -marginTop);
super.onDraw(canvas);
}
But all of this smells like bad code. There has to be a better solution!
What would you recommend?
Solution that feels less like a hack: Wrap a huge ProgressBar in a smaller FrameLayout. That way the FrameLayout constrains its height, but the ProgressBar still shows in full.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="4dp">
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="32dp"
android:layout_gravity="center" />
</FrameLayout>
Another way to do this is to use a Guideline and center ProgressBar between the parent top and the guideline.
<ProgressBar
android:id="#+id/progressBar2"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dp"
android:paddingTop="-4dp"
android:layout_height="wrap_content"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline"
android:orientation="horizontal"
app:layout_constraintGuide_begin="4dp" />
I encountered the same problem as well. And like you said, I come across numerous solutions which all seem like a hack that might break something else down the line.
With that said, I came across one solution which is to use this library instead for progress bar.
One thing to note is, it tells you to integrate it by adding:
compile 'me.zhanghai.android.materialprogressbar:library:1.3.0'
However, when I used this, it gave me an error from an Android support library for Floating Action Bar. So I'll recommend you to use this instead:
compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'
A sample code snippet on how I used it:
<me.zhanghai.android.materialprogressbar.MaterialProgressBar
android:id="#+id/reviewProgressBar"
style="#style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="6dp"
android:layout_below="#+id/my_toolbar"
android:indeterminate="false"
app:mpb_progressStyle="horizontal"
app:mpb_useIntrinsicPadding="false"/>
Hope this helps!
A dirty workaround I did was set the height of the ProgressBar closely to the to stroke width like so:
Progress bar:
<ProgressBar
android:id="#+id/pb_loading_progress"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="2.1dp"
android:layout_below="#id/tb_browser"
android:max="100"
android:progressDrawable="#drawable/style_browser_progress_drawable"
android:visibility="invisible" />
Progress drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#color/colorPrimary" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="horizontal"
android:gravity="left">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#color/white" />
</shape>
</clip>
</item>
</layer-list>
Which looked like this:
You declared your view without any explicit height so it's height is being picked from the pre-defined style.
<ProgressBar
android:id="#+id/progressbar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:marginTop="-7dp"
android:visibility="#{loading ? View.VISIBLE : View.GONE}" />
"?android:attr/progressBarStyleHorizontal" will be searched in current theme and is stored in attrs.xml file. Since this defined by the platform it will obtain it's the value from there. As of writing this answer, I'm on android platform 29 and searching "?android:attr/progressBarStyleHorizontal" gives the following results
➜ values
pwd
/Users/vihaanverma/Library/Android/sdk/platforms/android-29/data/res/values
➜ values
grep -rin "progressBarStyleHorizontal" .
./themes_device_defaults.xml:126: <item name="progressBarStyleHorizontal">#style/Widget.DeviceDefault.ProgressBar.Horizontal</item>
./themes_device_defaults.xml:857: <item name="progressBarStyleHorizontal">#style/Widget.DeviceDefault.Light.ProgressBar.Horizontal</item>
./themes.xml:272: <item name="progressBarStyleHorizontal">#style/Widget.ProgressBar.Horizontal</item>
./themes_holo.xml:263: <item name="progressBarStyleHorizontal">#style/Widget.Holo.ProgressBar.Horizontal</item>
./themes_holo.xml:626: <item name="progressBarStyleHorizontal">#style/Widget.Holo.Light.ProgressBar.Horizontal</item>
./public.xml:148: <public type="attr" name="progressBarStyleHorizontal" id="0x01010078" />
./themes_material.xml:258: <item name="progressBarStyleHorizontal">#style/Widget.Material.ProgressBar.Horizontal</item>
./themes_material.xml:635: <item name="progressBarStyleHorizontal">#style/Widget.Material.Light.ProgressBar.Horizontal</item>
./styles_material.xml:1010: <item name="progressBarStyle">?attr/progressBarStyleHorizontal</item>
./attrs.xml:684: <attr name="progressBarStyleHorizontal" format="reference" />
➜ values
Opening one of the files which contain "progressBarStyleHorizontal" you will see minHeight defined in the style and is equal to 16dp.
<style name="Widget.Material.ProgressBar.Horizontal" parent="Widget.ProgressBar.Horizontal">
<item name="progressDrawable">#drawable/progress_horizontal_material</item>
<item name="indeterminateDrawable">#drawable/progress_indeterminate_horizontal_material</item>
<item name="minHeight">16dip</item>
<item name="maxHeight">16dip</item>
</style>
This is the cause of the extra padding you are getting. You can fix it by giving your view height and a scaleY value like below
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:indeterminate="true"
android:scaleY="5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Use inside Linearlayout and you will success, the simple way
<LinearLayout
android:layout_width="match_parent"
android:background="#efefef"
android:layout_height="wrap_content">
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
android:visibility="gone"
android:layout_marginTop="-7dp"
android:layout_marginBottom="-7dp"
style="#style/Widget.AppCompat.ProgressBar.Horizontal"
/>
</LinearLayout>
I am trying to make a alert dialog which will show like the picture.
Im trying to use frame layout but can't make the it right like the picture. In my current layout I used an imageView and textview.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src=""/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#strings/text"
/>
</FrameLayout>
<!---<other layouts--->
</LinearLayout>
Create an Activity it represents your overlay.
Put this in your onCreate
requestWindowFeature(Window.FEATURE_NO_TITLE);
#Override
public void onCreate(Bundle savedInstanceState) {
requestWindowFeature(Window.FEATURE_NO_TITLE); //importan no title show
super.onCreate(savedInstanceState);
setContentView(R.layout.overlay);
}
put this in styles.xml
<style name="FloatingPopup" parent="#android:style/Theme.Black.NoTitleBar.Fullscreen">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowNoTitle">true</item>
</style>
In your manifiest declare the activity thath looks like a overlay and add the theme
<activity
android:name=".YourOverlayActivity"
android:screenOrientation="portrait"
android:theme="#style/FloatingPopup" >
</activity>
It looks like a semitransparent activity and now you can custom with xml layout editor.
A FrameLayout will stack the Views, causing them to overlap each other. If you want one directly above the other, consider using a LinearLayout with the orientation set to vertical.
Update: Try this, replacing your FrameLayout with a LinearLayout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#strings/text"
/>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src=""/>
</LinearLayout>
Obviously fill in the src parameter for the ImageView with your image.
I have an activity where I am showing ActionBar. I have split mode enabled and on bottom bar i am showing 4 menu items. The icons are all sized 32 dp. However all the icons are not horizontally aligned.
The first two buttons are closer to each other. The third button takes half of action bar space and 4th button is relatively on right.
On pressed 3rd Button shows the space taken is much more.
What is this behavior and how to fix it?
Provided the images are all the same width, you have two options:
Use weightSum and layout_weight to set the icons to take up equal amounts of spacing.
Manually set the padding, like so:
<style name="AppTheme" parent="Theme.Sherlock">
<item name="actionButtonStyle">#style/MyActionButtonStyle</item>
<item name="android:actionButtonStyle">#style/MyActionButtonStyle</item>
</style>
<style name="MyActionButtonStyle" parent="Widget.Sherlock.ActionButton">
<item name="android:minWidth">32dip</item>
<item name="android:padding">0dip</item>
</style>
Make sure all the images are of same size.
If you are using custom view to inflate into actionbar, use LinearLayout and set LinearLayout's layoutWeightSum="4" and give layout_weight="1" to all it's child.
Edit : as per your comment, in top custom_layout.xml use the below layout. Also note android:layout_width="0dp" in the parentlayout
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/img" />
</LinearLayout>