¿Cómo puedo añadir imágenes en la ficha ? Actualmente soy capaz de mover la pestaña de abajo, pero no tienen idea acerca de cómo cambiar la LL Tab1, LL Tab2, LL Tab3 a icono.Estoy en el camino correcto ? Cualquier ayuda sería muy apreciada.

código xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:padding="5dp" >


        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:padding="5dp"
            android:layout_weight="1" >

            <LinearLayout
                android:id="@+id/ll_tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

            <LinearLayout
                android:id="@+id/ll_tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />

            <LinearLayout
                android:id="@+id/ll_tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" />
        </FrameLayout>
        <TabWidget
            android:id="@android:id/tabs"
            android:background="@color/light_gray"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>
    </LinearLayout>

</TabHost>

Agregar imagen en 3 pestañas

Alguien puede ayudar? Muchas gracias !

InformationsquelleAutor John Joe | 2016-03-07

5 Comentarios

  1. 9

    Trate de usar TabLayout de Android Diseño De La Biblioteca De Soporte para satisfacer diseño de material de directrices para las pestañas.

    El Diseño de la biblioteca TabLayout implementa tanto fijos pestañas, donde el
    vista del ancho se divide en partes iguales entre todas las pestañas, así como
    desplazable pestañas, donde las fichas no son de un tamaño uniforme y puede desplazarse
    horizontalmente.

    Para implementar TabLayout comprobar este guía y cómo agregar el icono de swipeable pestañas para establecer los iconos de las pestañas usando setIcon.

    final int[] ICONS = new int[]{
            R.drawable.ic_action_document,
            R.drawable.ic_action_tick,
            R.drawable.ic_action_trash};
            ....
    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(mViewPager);
    
    tabLayout.getTabAt(0).setIcon(ICONS[0]);
    tabLayout.getTabAt(1).setIcon(ICONS[1]);
    tabLayout.getTabAt(2).setIcon(ICONS[2]);

    Para establecer las pestañas en la parte inferior en un TabLayout check – ¿Cómo puedo poner pestañas en la parte inferior y también ocultar la parte superior actionbar? donde se coloca la TabLayout en un relativeLayout y alinear a los padres de fondo:

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        app:tabMode="fixed"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabTextColor="#d3d3d3"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        android:minHeight="?attr/actionBarSize"
        android:layout_alignParentBottom="true"
        />

    Aunque usted puede poner su diseño de la ficha en la parte inferior, trate de no usar la parte inferior de la barra de pestañas, si es posible como por la Puro Android guía.

    Otras plataformas de utilizar la parte inferior de la barra de pestañas para cambiar entre la aplicación del
    vistas. Por la plataforma de convenio, Android fichas para el control de vista son
    se muestra en la barra de acción en la parte superior de la pantalla en su lugar.

  2. 5
    import android.os.Bundle;
    import android.support.design.widget.TabLayout;
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.Toolbar;
    import java.util.ArrayList;
    import java.util.List;
    public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private int[] tabIcons = {
    R.drawable.ic_tab_favourite,
    R.drawable.ic_tab_call,
    R.drawable.ic_tab_contacts
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    setupTabIcons();
    }
    private void setupTabIcons() {
    tabLayout.getTabAt(0).setIcon(tabIcons[0]);
    tabLayout.getTabAt(1).setIcon(tabIcons[1]);
    tabLayout.getTabAt(2).setIcon(tabIcons[2]);
    }
    private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new OneFragment(), "ONE");
    adapter.addFragment(new TwoFragment(), "TWO");
    adapter.addFragment(new ThreeFragment(), "THREE");
    viewPager.setAdapter(adapter);
    }
    class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();
    public ViewPagerAdapter(FragmentManager manager) {
    super(manager);
    }
    @Override
    public Fragment getItem(int position) {
    return mFragmentList.get(position);
    }
    @Override
    public int getCount() {
    return mFragmentList.size();
    }
    public void addFragment(Fragment fragment, String title) {
    mFragmentList.add(fragment);
    mFragmentTitleList.add(title);
    }
    @Override
    public CharSequence getPageTitle(int position) {
    return mFragmentTitleList.get(position);
    }
    }
    } 

    Diseño de Ficha
    activity_main.xml

    <android.support.design.widget.CoordinatorLayout 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="match_parent">
    <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabMode="fixed"
    app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
    </android.support.design.widget.CoordinatorLayout>

    Fragmentos(de Clase) que se utilizan en esta ficha

    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    public class OneFragment extends Fragment{
    public OneFragment() {
    //Required empty public constructor
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    //Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_one, container, false);
    }
    }

    Archivo Xml
    fragment_one.xml

    <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="match_parent"
    tools:context=".fragments.OneFragment">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/one"
    android:textSize="40dp"
    android:textStyle="bold"
    android:layout_centerInParent="true"/>
    </RelativeLayout>

    TwoFragment.java

    import android.os.Bundle;
    import android.support.v4.app.Fragment;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    public class TwoFragment extends Fragment{
    public TwoFragment() {
    //Required empty public constructor
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
    Bundle savedInstanceState) {
    //Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_two, container, false);
    }
    }

    fragment_two.xml

    <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="match_parent"
    tools:context=".fragments.TwoFragment">
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/one"
    android:textSize="40dp"
    android:textStyle="bold"
    android:layout_centerInParent="true"/>
    </RelativeLayout>

    Puede crear tercer fragmento de la clase, y el diseño, como lo he hecho anteriormente.

    Ejecutarlo. Espero que esto iba a funcionar

  3. 2

    Probar este,

    puth este activity_main.xml y establecer la altura personalizada a TabLayout.

    <android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="@dimen/custom_tab_layout_height"
    app:tabMode="fixed"
    app:tabGravity="fill"/>

    Crear un xml de diseño llamado custom_tab.xml en virtud de res ⇒ diseño. En este diseño hemos definido la vista personalizada para la ficha.

    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/tab"
    android:textColor="@color/colorAccent"
    android:textSize="@dimen/tab_label"
    android:fontFamily="@string/font_fontFamily_medium"/>

    Abierto MainActivity.java y modificar el código como el siguiente. Aquí si usted observa setupTabIcons() método, que me han prestado custom_tab.xml diseño en cada ficha por debajo de líneas de código.

    TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabOne.setText("ONE");
    tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0);
    tabLayout.getTabAt(0).setCustomView(tabOne);
    TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabTwo.setText("TWO");
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0);
    tabLayout.getTabAt(1).setCustomView(tabTwo);
    TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabThree.setText("THREE");
    tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0);
    tabLayout.getTabAt(2).setCustomView(tabThree);
  4. -1

    Bien puede colocar un ImageView en su Linearlayout que es cada ficha, o se puede establecer una imagen como fondo para su LinearLayout. Si la imagen va a actuar de un fondo, a continuación, obviamente quieres agregar la imagen de fondo y no añadir un ImageView como un niño a su LinearLayout. Si es que va a ser el contenido, aunque, no de fondo, se debe añadir un ImageView para cada LinearLayout como usted podría agregar a un niño de cualquier otro tipo para un padre Ver.

    • Puedo definir una imagen como fondo para LinearLayout pero la imagen no se muestra

Dejar respuesta

Please enter your comment!
Please enter your name here