I have a custom designed button (LinearLayout) that I want to reuse multiple times by just replacing a couple of attributes of the layout's nested views (icon and text).
I understand that using the <include> tag I can only override root view attributes.
I can sure do it programatically in java, but I wonder if there is a smart way to do this in XML.
Essentially, I want to be able to use something like <include> to reuse below shown complex layout and override only the following two nested attributes in two different nested views:
...
android:src="#drawable/google_icon"
...
android:text=" Google"
...
My (not yet) reusable layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/button_vertical_margin"
android:layout_marginBottom="#dimen/button_vertical_margin"
android:gravity="center_horizontal"
android:clickable="true"
android:background="#drawable/default_button_selector">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="-2dp"
android:background="#drawable/layout_border"
android:gravity="center">
<ImageView
android:layout_width="#dimen/button_icon_size"
android:layout_height="#dimen/button_icon_size"
android:layout_margin="#dimen/button_icon_margin"
android:src="#drawable/google_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/layout_border"
android:gravity="center"
android:paddingLeft="#dimen/button_text_horizontal_padding"
android:paddingRight="#dimen/button_text_horizontal_padding">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/button_text_vertical_margin"
android:layout_marginBottom="#dimen/button_text_vertical_margin"
android:textSize="#dimen/button_text_size"
android:text="Continue with" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/button_text_vertical_margin"
android:layout_marginBottom="#dimen/button_text_vertical_margin"
android:text=" Google"
android:textSize="#dimen/button_text_size"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
Related
I have a Linear Layout with a list of six horizontal button in column. Each Button is defined as a AppCompactTextView since I need to place two images on it, as you can see in the following image:
What I need to do is separate the drawableStartCompat image (the one on the left) from the AppCompactTextView, without changing its position. I would like to keep it separated from the button. How can do it? I was thinking to wrap it with the button in a View but I do not know how to manage it. This is the code of one of the six element of the list:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/view_top_up_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="#string/placeholder"
android:textColor="#color/black"
app:drawableEndCompat="#drawable/ic_arrow_right_small_black"
app:drawableStartCompat="#drawable/ic_menu_charge" />
You can wrap the Imageview & TextView into any viewgroup you like & create one view like this, which gives you flexibility to maintain margin postion etc for your view:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/leftImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:src="#drawable/ic_android" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_weight="1"
android:padding="8dp"
android:text="Boost"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rightImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_arrow_right" />
</LinearLayout>
</LinearLayout>
Output:
You can even go ahead & create a custom/compound view out of your layout.
Create custom button out of horizontal LinearLayout, which contains ImageView, Button and perhaps another ImageView for the image on the right.
I have a Linear layout then programatically I'm adding some spinners and buttons and so on, but I have xml button Wrap content (width) and then on java I add spinner (or anything else) and it goes below this view even if both views are wrap content:
progBar = new ProgressBar(this);
pBarToca = new ProgressBar(this);
pBarToca.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
linToca = (LinearLayout) findViewById(R.id.tetoca);
linToca.addView(pBarToca);
and it's placed under the button of xml:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
edit!!!!!!
I want textview on first line then on next line button + progressbar (for example)
You have android:orientation=vertical so the Views will be laid out starting at the top and going down.
If you want them to all be next to each other, remove that from your xml since the default orientation for a LinearLayout is horizontal. If you do this, you will obviously need to change the android:width to wrap_content for your TextView or else it will take up the entire screen.
After your comment, a RelativeLayout would work best here.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
style="#style/StylePartida"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/te_toca_jugar"
android:id="#+id/tvID" /> // give it an id
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca"
android:layout_below="#/id=tvID"> // place it below the TV
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
</RelativeLayout>
Note the changes in the comments. Now when you add your progressbar to the LL, it should be next to the Button. You may need some changes but this should give you approximately what you want.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:id="#+id/tetoca">
<TextView style="#style/StylePartida"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/te_toca_jugar"
android:text="#string/te_toca_jugar" />
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9" android:onClick="callJugar"
android:text="#string/jugar" />
</LinearLayout>
In your textView you are matching the parent
android:layout_width="match_parent"
This will cause the textview to take up the entire width of the parent view.
android:layout_width="wrap_content"
and
android:orientation="horizontal"
android:orientation="vertical" will cause the elements to be stacked.
If you are using "horizontal" it's important not to have a child element with width matching parent.
EDIT:
After OPs change to question:
I have used a textview, two buttons and listview to give you an idea of how you can format it. There are many ways to achieve the same thing, this is one suggestion.
The internal linearlayout has a horizontal orientation (by default).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="te_toca_jugar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#A7E9A9"
android:text="jugar2"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lv">
</ListView>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/component1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:background="#drawable/my_shape">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:id="#+id/component2"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="50dp"
android:background="#drawable/my_shape"
android:visibility="gone">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello" />
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
android:id="#+id/component2"
visibility is gone; which I want to attach in
android:id="#+id/component1"
at runtime; not a single one but N-numbers of component 2 (changing property)
All I mean to say, I want to make cloning of component2
Can anyone please assist me with snip of code ?
Thanks in Advance.
I thnik you are looking for re-using layout
you can create all your component in one layout and call that using include tag
<include layout="#layout/component"/>
<include layout="#layout/component"/>
<include layout="#layout/component"/>
link here
Even with two different layouts for different rows, you still can use a ListView and use different ViewTypes in the ListAdapter.
An other way would be to have just a container layout in your layout xml (e.g. LinearLayout wrapped in a ScrollView) and add the components programmatically. You could have the layout for the component in a separate layout xml and in code, inflate that layout xml to a View (or ViewGroup), set the texts or whatever and finally add the component view to the container view.
I can provide code examples too, if one of the suggestions makes sense for you.
I have a LinearLayout that contains a lot of TextViews and ImageButtons, I want to align some of these elements to right, i had a look at this and this but i can't use their tips as i can't change the orientation and can't make android.gravity:right as i don't want to align all the elements to right, also i can't use nested layouts or but the desired elements into RelativeLayout because that shifts the rest of elements to the left and i want them at the center.
this is my code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.15"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/media_mediabar"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/move_backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/media_button_rewind"
android:layout_marginLeft="7dp"
android:layout_marginRight="7dp"
android:tag="released"/>
<ImageButton
android:id="#+id/rmeote_mines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:clickable="true"
android:scaleType="centerInside"
android:src="#drawable/remote_minus" />
<TextView
android:id="#+id/remote_plus_minus"
android:text="0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:layout_gravity="center"
android:layout_marginTop="15dp"
android:layout_marginBottom="15dp" />
.
.
.<!.. some other elements ..!>
</LinearLayout>
The desired result:
The simplest solution would be using empty views with weights as separators.
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Left button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Middle button -->
<Button ...
... />
<View android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!-- Right button -->
<Button ...
... />
</LinearLayout>
The separator views can be made invisible as an optimization, because they don't draw anything and are used only for layout. You can tweak the actual 'layout_weight' values to get the desired layout. Starting from API level 14 you can use instances of Space as separators which will improve performance and readability (there is also a version of Space in the support library).
For such a complex layout you'd be way better of using RelativeLayout instead.
i can't use nested layouts
Then you can't solve your problem.
Nested layout are the heart of Android layout, to create such complex view that you desire, I think you must use nested layouts.
#Ridcully suggested you to use RelativeLayout, this is a good idea. You can combine it with few linear layouts and you be fine.
I think that RelativeLayout should be your base layout.
I'm trying to set my TextView to the left of an ImageButton, but I can't seems to find this option.
I was expecting to use something like android:layout_alignLeft, but this option is missing.
I've tried to google the issue, but couldn't find any relative results.
Without it my TextView overlaps the ImageButton and I want to avoid it.
UPDATE
The full xml code is too complex, but here is the important part of it:
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentLeft="true"
android:background="#color/white"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_toLeftOf="#+id/frameLayoutBalanceClosed">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/button_edit_nickname"
android:id="#+id/card_closed_control_editNickname" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/card_closed_description_nickname"
android:layout_margin="8dp" android:layout_gravity="left"/>
</FrameLayout>
I think what you need is a RelativeLayout. You can specify your TextView to the left of your ImageView with it's specifications. Your code would look something like this:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/imagebutton1" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
The reason FrameLayout isn't working is because it's purpose is to overlay items on top of each other, which wouldn't work at all!
If that isn't what you're looking for, you could also use a TableLayout in which items are arranged in columns.